|
83 | 83 |
|
84 | 84 | /* Disabled Radio With gap */
|
85 | 85 | [type="radio"].with-gap:disabled:checked + span:before {
|
86 |
| - border: 2px solid var(--md-sys-color-on-surface); |
| 86 | + border: 2px solid color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
87 | 87 | }
|
88 | 88 |
|
89 | 89 | [type="radio"].with-gap:disabled:checked + span:after {
|
90 | 90 | border: none;
|
91 |
| - background-color: var(--md-sys-color-on-surface); |
| 91 | + background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
92 | 92 | }
|
93 | 93 |
|
94 | 94 | /* Disabled style */
|
95 | 95 | [type="radio"]:disabled:not(:checked) + span:before,
|
96 | 96 | [type="radio"]:disabled:checked + span:before {
|
97 | 97 | background-color: transparent;
|
98 |
| - border-color: var(--md-sys-color-on-surface); |
| 98 | + border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
99 | 99 | }
|
100 | 100 |
|
101 | 101 | [type="radio"]:disabled + span {
|
102 |
| - color: var(--md-sys-color-on-surface); |
| 102 | + color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
103 | 103 | }
|
104 | 104 |
|
105 | 105 | [type="radio"]:disabled:not(:checked) + span:before {
|
106 |
| - border-color: var(--md-sys-color-on-surface); |
| 106 | + border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
107 | 107 | }
|
108 | 108 |
|
109 | 109 | [type="radio"]:disabled:checked + span:after {
|
110 |
| - background-color: var(--md-sys-color-on-surface); |
111 |
| - border-color: var(--md-sys-color-on-surface); |
| 110 | + background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
| 111 | + border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%); |
112 | 112 | }
|
0 commit comments