Skip to content

Commit dde546e

Browse files
SisIvanovadidimmovarkaraivanov
authored
fix(radio): style component using sass theme (#1980)
--------- Co-authored-by: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com> Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>
1 parent 3f0e325 commit dde546e

File tree

5 files changed

+87
-90
lines changed

5 files changed

+87
-90
lines changed

‎src/components/radio/themes/shared/radio.bootstrap.scss‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ $theme: $bootstrap;
3131
width: var(--size);
3232
height: var(--size);
3333
min-width: var(--size);
34-
background: var-get($theme, 'empty-fill-color');
3534
transition: transparent;
3635

3736
&::before,
@@ -86,6 +85,10 @@ $theme: $bootstrap;
8685
background: var-get($theme, 'fill-color-hover');
8786
border-color: var-get($theme, 'fill-color-hover');
8887
}
88+
89+
&::before {
90+
background: var-get($theme, 'fill-hover-border-color');
91+
}
8992
}
9093

9194
[part~='focused'] [part='control'] {
@@ -114,10 +117,6 @@ $theme: $bootstrap;
114117

115118
:host(:not([disabled]):state(ig-invalid):hover),
116119
:host(:not(:disabled):state(ig-invalid):hover) {
117-
[part~='control']::after {
118-
border-color: var-get($theme, 'error-color-hover');
119-
}
120-
121120
[part='control checked'] {
122121
&::after {
123122
background: var-get($theme, 'error-color-hover');
@@ -127,16 +126,14 @@ $theme: $bootstrap;
127126

128127
:host([disabled]),
129128
:host(:disabled) {
130-
[part='control'] {
131-
&::after {
132-
border-color: var-get($theme, 'disabled-color');
129+
[part='control checked'] {
130+
&::before {
131+
background: var-get($theme, 'fill-hover-border-color');
132+
border-color: var-get($theme, 'fill-hover-border-color');
133133
}
134-
}
135134

136-
[part='control checked'] {
137135
&::after {
138136
background: var-get($theme, 'disabled-fill-color');
139-
border-color: var-get($theme, 'disabled-fill-color');
140137
}
141138
}
142139
}

‎src/components/radio/themes/shared/radio.common.scss‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,64 @@
11
@use 'styles/utilities' as *;
22
@use '../light/themes' as *;
33

4-
$theme: $base;
4+
$theme: $material;
55

66
[part~='label'] {
77
color: var-get($theme, 'label-color');
88
}
99

10+
[part~='base']:hover {
11+
[part~='label'] {
12+
color: var-get($theme, 'label-color-hover');
13+
}
14+
}
15+
16+
[part~='control'] {
17+
background: var-get($theme, 'empty-fill-color');
18+
}
19+
20+
:host(:hover) {
21+
[part='control checked'] {
22+
&::before {
23+
background: var-get($theme, 'fill-color-hover');
24+
border: rem(2px) solid var-get($theme, 'fill-hover-border-color');
25+
}
26+
27+
&::after {
28+
border-color: var-get($theme, 'fill-hover-border-color');
29+
}
30+
}
31+
}
32+
33+
:host(:not([disabled]):state(ig-invalid):hover),
34+
:host(:not(:disabled):state(ig-invalid):hover) {
35+
[part~='control']::after {
36+
border-color: var-get($theme, 'error-color-hover');
37+
}
38+
}
39+
1040
:host([disabled]),
1141
:host(:disabled) {
1242
[part~='label'] {
1343
color: var-get($theme, 'disabled-label-color');
1444
}
45+
46+
[part~='control'] {
47+
&::after {
48+
border-color: var-get($theme, 'disabled-color');
49+
}
50+
}
51+
52+
[part='control checked'] {
53+
&::before {
54+
background: var-get($theme, 'disabled-fill-color');
55+
border-color: var-get($theme, 'disabled-fill-color');
56+
}
57+
58+
&::after {
59+
border-color: var-get($theme, 'disabled-fill-color');
60+
}
61+
}
1562
}
1663

1764
:host(:not([disabled]):state(ig-invalid)),

‎src/components/radio/themes/shared/radio.fluent.scss‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,14 @@ $theme: $fluent;
104104

105105
&::before {
106106
background: var-get($theme, 'fill-color-hover');
107-
border-color: var-get($theme, 'fill-hover-border-color');
107+
border: rem(1px) solid var-get($theme, 'fill-hover-border-color');
108108
}
109109
}
110110
}
111111

112112
:host(:not([disabled]):state(ig-invalid):hover),
113113
:host(:not(:disabled):state(ig-invalid):hover) {
114114
[part='control'] {
115-
&::after {
116-
border-color: var-get($theme, 'error-color-hover');
117-
}
118-
119115
&::before {
120116
background: var-get($theme, 'error-color');
121117
}
@@ -128,6 +124,7 @@ $theme: $fluent;
128124

129125
&::before {
130126
background: var-get($theme, 'error-color-hover');
127+
border-color: var-get($theme, 'error-color-hover');
131128
}
132129
}
133130
}
@@ -156,19 +153,3 @@ $theme: $fluent;
156153
}
157154
}
158155
}
159-
160-
:host([disabled]),
161-
:host(:disabled) {
162-
[part~='control'] {
163-
&::after {
164-
border-color: var-get($theme, 'disabled-color');
165-
}
166-
}
167-
168-
[part='control checked'] {
169-
&::before {
170-
background: var-get($theme, 'disabled-color');
171-
border-color: var-get($theme, 'disabled-color');
172-
}
173-
}
174-
}

‎src/components/radio/themes/shared/radio.indigo.scss‎

Lines changed: 15 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@ $theme: $indigo;
1212
}
1313
}
1414

15-
[part~='base'] {
16-
gap: rem(8px);
15+
:host(:hover) {
16+
[part~='control']::after {
17+
border: rem(2px) solid var-get($theme, 'hover-color');
18+
}
1719

18-
&:hover {
19-
[part~='label'] {
20-
color: var-get($theme, 'label-color-hover');
21-
}
20+
[part='control checked']::after {
21+
border-color: var-get($theme, 'fill-hover-border-color');
2222
}
2323
}
2424

25+
[part~='base'] {
26+
gap: rem(8px);
27+
}
28+
2529
[part~='label'] {
2630
@include type-style('body-2');
27-
28-
color: var-get($theme, 'label-color');
2931
}
3032

3133
[part~='control'] {
@@ -36,7 +38,6 @@ $theme: $indigo;
3638
height: var(--size, rem(20px));
3739
min-width: var(--size, rem(20px));
3840
transition: none;
39-
background: none;
4041

4142
&::before,
4243
&::after {
@@ -46,12 +47,6 @@ $theme: $indigo;
4647
&::after {
4748
border: rem(2px) solid var-get($theme, 'empty-color');
4849
}
49-
50-
&:hover {
51-
&::after {
52-
border: rem(2px) solid var-get($theme, 'hover-color');
53-
}
54-
}
5550
}
5651

5752
[part='control checked'] {
@@ -96,20 +91,14 @@ $theme: $indigo;
9691
}
9792
}
9893

99-
[part='label'] {
94+
[part~='label'] {
10095
color: var-get($theme, 'label-color');
10196
}
10297

10398
[part='control'] {
10499
&::after {
105100
border-color: var-get($theme, 'error-color');
106101
}
107-
108-
&:hover {
109-
&::after {
110-
border-color: var-get($theme, 'error-color-hover');
111-
}
112-
}
113102
}
114103

115104
[part='control checked'] {
@@ -120,16 +109,6 @@ $theme: $indigo;
120109
&::before {
121110
background: var-get($theme, 'error-color');
122111
}
123-
124-
&:hover {
125-
&::after {
126-
border-color: var-get($theme, 'error-color-hover');
127-
}
128-
129-
&::before {
130-
background: var-get($theme, 'error-color-hover');
131-
}
132-
}
133112
}
134113

135114
[part~='focused'] {
@@ -140,21 +119,12 @@ $theme: $indigo;
140119
}
141120
}
142121

143-
:host([disabled]),
144-
:host(:disabled) {
145-
[part='control'] {
146-
&::after {
147-
border-color: var-get($theme, 'disabled-color');
148-
}
149-
}
150-
122+
:host(:not([disabled]):state(ig-invalid):hover),
123+
:host(:not(:disabled):state(ig-invalid):hover) {
151124
[part='control checked'] {
152-
&::after {
153-
border-color: var-get($theme, 'disabled-fill-color');
154-
}
155-
156125
&::before {
157-
background: var-get($theme, 'disabled-fill-color');
126+
background: var-get($theme, 'error-color-hover');
127+
border-color: var-get($theme, 'error-color-hover');
158128
}
159129
}
160130
}

‎src/components/radio/themes/shared/radio.material.scss‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ $theme: $material;
5757
[part~='control'] {
5858
border-radius: var(--size);
5959
position: relative;
60+
background: unset;
6061

6162
&::before,
6263
&::after {
@@ -65,6 +66,7 @@ $theme: $material;
6566

6667
&::after {
6768
border: calc(var(--size) / 10) solid var-get($theme, 'empty-color');
69+
background: var-get($theme, 'empty-fill-color');
6870
}
6971
}
7072

@@ -81,10 +83,8 @@ $theme: $material;
8183

8284
:host(:not([disabled]):state(ig-invalid)),
8385
:host(:not(:disabled):state(ig-invalid)) {
84-
[part~='control'] {
85-
&::after {
86-
border-color: var-get($theme, 'error-color');
87-
}
86+
[part~='control']::after {
87+
border-color: var-get($theme, 'error-color');
8888
}
8989

9090
[part='control checked'] {
@@ -109,18 +109,20 @@ $theme: $material;
109109
}
110110
}
111111

112-
:host([disabled]),
113-
:host(:disabled) {
114-
[part~='control'] {
115-
&::after {
116-
border-color: var-get($theme, 'disabled-color');
117-
}
112+
:host(:not([disabled]):state(ig-invalid):hover),
113+
:host(:not(:disabled):state(ig-invalid):hover) {
114+
[part~='control']::after {
115+
border-color: var-get($theme, 'error-color');
118116
}
119117

120118
[part='control checked'] {
121119
&::before {
122-
background: var-get($theme, 'disabled-color');
123-
border-color: var-get($theme, 'disabled-color');
120+
background: var-get($theme, 'error-color-hover');
121+
border-color: var-get($theme, 'error-color-hover');
122+
}
123+
124+
&::after {
125+
border-color: var-get($theme, 'error-color-hover');
124126
}
125127
}
126128
}

0 commit comments

Comments
 (0)