Skip to content

Commit 7cfffa0

Browse files
didimmovadidimmova
committed
chore(button-group): refactor button group styles
1 parent 9992bf7 commit 7cfffa0

4 files changed

Lines changed: 65 additions & 116 deletions

File tree

‎src/components/button-group/themes/shared/button/button.common.scss‎

Lines changed: 48 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,21 @@ $theme: $material;
2929
padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
3030
padding-block: pad-block(rem(1px), rem(4px), rem(6px));
3131
border-color: var-get($theme, 'item-border-color');
32+
33+
::slotted(igc-icon) {
34+
color: var-get($theme, 'item-icon-color');
35+
}
3236
}
3337

34-
::slotted(igc-icon) {
35-
color: var-get($theme, 'item-icon-color');
38+
[part='toggle focused'] {
39+
z-index: 2;
40+
color: var-get($theme, 'item-focused-text-color');
41+
background: var-get($theme, 'item-focused-background');
42+
border-color: var-get($theme, 'item-focused-border-color');
43+
44+
::slotted(igc-icon) {
45+
color: var-get($theme, 'item-focused-text-color');
46+
}
3647
}
3748
}
3849

@@ -42,43 +53,19 @@ $theme: $material;
4253
color: var-get($theme, 'item-hover-text-color');
4354
background: var-get($theme, 'item-hover-background');
4455
border-color: var-get($theme, 'item-hover-border-color');
45-
}
46-
47-
::slotted(igc-icon) {
48-
color: var-get($theme, 'item-hover-icon-color');
49-
}
50-
}
51-
52-
:host([part='toggle focused']),
53-
:host(:focus-within) {
54-
[part~='toggle'] {
55-
z-index: 2;
56-
color: var-get($theme, 'item-focused-text-color');
57-
background: var-get($theme, 'item-focused-background');
58-
border-color: var-get($theme, 'item-focused-border-color');
5956

6057
::slotted(igc-icon) {
61-
color: var-get($theme, 'item-focused-text-color');
58+
color: var-get($theme, 'item-hover-icon-color');
6259
}
60+
}
6361

64-
&:hover {
65-
background: var-get($theme, 'item-focused-hover-background');
66-
border-color: var-get($theme, 'item-focused-hover-border-color');
67-
color: var-get($theme, 'item-focused-hover-text-color');
68-
69-
::slotted(igc-icon) {
70-
color: var-get($theme, 'item-focused-hover-text-color');
71-
}
72-
}
62+
[part='toggle focused'] {
63+
background: var-get($theme, 'item-focused-hover-background');
64+
border-color: var-get($theme, 'item-focused-hover-border-color');
65+
color: var-get($theme, 'item-focused-hover-text-color');
7366

74-
&:active {
75-
background: var-get($theme, 'item-active-background');
76-
border-color: var-get($theme, 'item-active-border-color');
67+
::slotted(igc-icon) {
7768
color: var-get($theme, 'item-focused-hover-text-color');
78-
79-
::slotted(igc-icon) {
80-
color: var-get($theme, 'item-focused-hover-text-color');
81-
}
8269
}
8370
}
8471
}
@@ -94,15 +81,30 @@ $theme: $material;
9481
}
9582
}
9683

84+
:host(:active) [part='toggle-focused'],
85+
[part='toggle focused']:active {
86+
color: var-get($theme, 'item-focused-hover-text-color');
87+
88+
::slotted(igc-icon) {
89+
color: var-get($theme, 'item-focused-hover-text-color');
90+
}
91+
}
92+
9793
:host([selected]) {
9894
[part~='toggle'] {
9995
color: var-get($theme, 'item-selected-text-color');
10096
background: var-get($theme, 'item-selected-background');
10197
border-color: var-get($theme, 'item-selected-border-color');
98+
z-index: 2;
99+
100+
::slotted(igc-icon) {
101+
color: var-get($theme, 'item-selected-icon-color');
102+
}
102103
}
103104

104-
::slotted(igc-icon) {
105-
color: var-get($theme, 'item-selected-icon-color');
105+
[part='toggle focused'] {
106+
background: var-get($theme, 'item-selected-focus-background');
107+
border-color: var-get($theme, 'item-selected-hover-border-color');
106108
}
107109
}
108110

@@ -111,53 +113,27 @@ $theme: $material;
111113
color: var-get($theme, 'item-selected-hover-text-color');
112114
background: var-get($theme, 'item-selected-hover-background');
113115
border-color: var-get($theme, 'item-selected-hover-border-color');
114-
}
115-
116-
::slotted(igc-icon) {
117-
color: var-get($theme, 'item-selected-hover-icon-color');
118-
}
119-
}
120-
121-
:host([selected][part='toggle focused']),
122-
:host([selected]:focus-within) {
123-
[part~='toggle'] {
124-
z-index: 2;
125-
color: var-get($theme, 'item-selected-text-color');
126-
background: var-get($theme, 'item-selected-focus-background');
127-
border-color: var-get($theme, 'item-selected-hover-border-color');
128116

129117
::slotted(igc-icon) {
130-
color: var-get($theme, 'item-selected-icon-color');
118+
color: var-get($theme, 'item-selected-hover-icon-color');
131119
}
120+
}
132121

133-
&:hover {
134-
background: var-get($theme, 'item-selected-focus-hover-background');
135-
color: var-get($theme, 'item-selected-hover-text-color');
136-
border-color: var-get($theme, 'item-selected-border-color');
137-
138-
::slotted(igc-icon) {
139-
color: var-get($theme, 'item-selected-hover-icon-color');
140-
}
141-
}
142-
143-
&:active {
144-
background: var-get($theme, 'item-selected-active-background');
145-
color: var-get($theme, 'item-selected-hover-text-color');
146-
border-color: var-get($theme, 'item-selected-active-border-color');
147-
148-
::slotted(igc-icon) {
149-
color: var-get($theme, 'item-selected-hover-icon-color');
150-
}
151-
}
122+
[part='toggle focused'] {
123+
background: var-get($theme, 'item-selected-focus-hover-background');
124+
border-color: var-get($theme, 'item-selected-border-color');
152125
}
153126
}
154127

155-
:host([selected]:active),
128+
:host([selected]:active) [part~='toggle'],
156129
:host([selected]) [part~='toggle']:active {
157-
[part~='toggle'] {
158130
background: var-get($theme, 'item-selected-active-background');
131+
color: var-get($theme, 'item-selected-hover-text-color');
159132
border-color: var-get($theme, 'item-selected-active-border-color');
160-
}
133+
134+
::slotted(igc-icon) {
135+
color: var-get($theme, 'item-selected-hover-icon-color');
136+
}
161137
}
162138

163139
:host([disabled]),

‎src/components/button-group/themes/shared/button/button.fluent.scss‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ $outline-btn-indent: rem(2px);
1212
}
1313

1414
[part='toggle focused'] {
15+
border-color: var-get($theme, 'item-border-color');
16+
1517
&::after {
1618
content: '';
1719
position: absolute;
@@ -24,11 +26,3 @@ $outline-btn-indent: rem(2px);
2426
}
2527
}
2628
}
27-
28-
:host([part='toggle focused']),
29-
:host(:focus-within) {
30-
[part~='toggle'] {
31-
border-color: var-get($theme, 'item-border-color');
32-
}
33-
}
34-

‎src/components/button-group/themes/shared/button/button.indigo.scss‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,46 +21,28 @@ $group-item-border-thickness: rem(1px);
2121

2222
[part='toggle focused'] {
2323
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
24-
}
25-
}
2624

27-
:host([selected]) {
28-
[part='toggle focused'] {
29-
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
30-
}
31-
}
32-
33-
:host([part='toggle focused']),
34-
:host(:focus-within) {
35-
[part~='toggle'] {
3625
::slotted(igc-icon) {
3726
color: var-get($theme, 'item-icon-color');
3827
}
28+
}
29+
}
3930

40-
&:hover {
41-
::slotted(igc-icon) {
42-
color: var-get($theme, 'item-hover-icon-color');
43-
}
44-
}
45-
46-
&:active {
47-
::slotted(igc-icon) {
48-
color: var-get($theme, 'item-hover-icon-color');
49-
}
50-
}
31+
:host(:hover) [part='toggle focused'],
32+
[part='toggle focused']:active {
33+
::slotted(igc-icon) {
34+
color: var-get($theme, 'item-hover-icon-color');
5135
}
5236
}
5337

54-
:host([selected][part='toggle focused']),
55-
:host([selected]:focus-within) {
56-
[part~='toggle'] {
57-
border-color: var-get($theme, 'item-selected-border-color');
38+
:host([selected]) [part='toggle focused'] {
39+
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
40+
border-color: var-get($theme, 'item-selected-border-color');
41+
}
5842

59-
&:hover,
60-
&:active {
61-
border-color: var-get($theme, 'item-selected-hover-border-color');
62-
}
63-
}
43+
:host([selected]:hover) [part='toggle focused'],
44+
:host([selected]) [part='toggle focused']:active {
45+
border-color: var-get($theme, 'item-selected-hover-border-color');
6446
}
6547

6648
:host([selected]:disabled),

‎src/components/button-group/themes/shared/button/button.material.scss‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33

44
$theme: $material;
55

6-
:host([selected][part='toggle focused']),
7-
:host([selected]:focus-within) {
8-
[part~='toggle'] {
9-
color: var-get($theme, 'item-selected-hover-text-color');
10-
}
6+
:host([selected]) [part='toggle focused'] {
7+
color: var-get($theme, 'item-selected-hover-text-color');
118

129
::slotted(igc-icon) {
1310
color: var-get($theme, 'item-selected-hover-icon-color');

0 commit comments

Comments
 (0)