Skip to content

Commit 094a2d6

Browse files
didimmovadidimmova
committed
feat(button-group): update button group styles
1 parent dfcae5a commit 094a2d6

File tree

5 files changed

+58
-240
lines changed

5 files changed

+58
-240
lines changed

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

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,15 @@ $group-item-border-thickness: rem(1px);
1111
min-height: $bootstrap-flat-btn-size;
1212
border-width: $group-item-border-thickness;
1313
padding-block: pad-block(rem(2px), rem(4px), rem(7px));
14-
15-
&::before {
16-
position: absolute;
17-
pointer-events: none;
18-
width: 100%;
19-
height: 100%;
20-
z-index: -1;
21-
}
2214
}
2315

2416
[part='toggle focused'] {
2517
box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
26-
z-index: 1;
2718
}
2819
}
2920

30-
[part~='toggle']:active {
31-
background: var-get($theme, 'item-hover-background');
32-
color: var-get($theme, 'item-hover-text-color');
33-
border-color: var-get($theme, 'item-hover-border-color');
34-
35-
&::before {
36-
content: '';
37-
background: var-get($theme, 'item-focused-background');
38-
}
39-
40-
::slotted(igc-icon) {
41-
color: var-get($theme, 'item-hover-icon-color');
42-
}
43-
}
4421

4522
:host([selected]) {
46-
[part~='toggle']:active {
47-
background: var-get($theme, 'item-selected-hover-background');
48-
color: var-get($theme, 'item-selected-hover-text-color');
49-
border-color: var-get($theme, 'item-selected-hover-border-color');
50-
51-
::slotted(igc-icon) {
52-
color: var-get($theme, 'item-selected-hover-icon-color');
53-
}
54-
55-
&::before {
56-
background: var-get($theme, 'item-selected-focus-background');
57-
}
58-
}
59-
6023
[part='toggle focused'] {
6124
box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
6225
}

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

Lines changed: 55 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,31 @@ $theme: $material;
4848
}
4949
}
5050

51+
:host([part='toggle focused']),
52+
:host(:focus-within) {
53+
[part~='toggle'] {
54+
color: var-get($theme, 'item-focused-text-color');
55+
background: var-get($theme, 'item-focused-background');
56+
border-color: var-get($theme, 'item-focused-border-color');
57+
58+
&:hover {
59+
background: var-get($theme, 'item-focused-hover-background');
60+
border-color: var-get($theme, 'item-focused-hover-border-color');
61+
}
62+
63+
&:active {
64+
background: var-get($theme, 'item-active-background');
65+
}
66+
}
67+
}
68+
69+
:host(:active),
70+
[part~='toggle']:active {
71+
[part~='toggle'] {
72+
background: var-get($theme, 'item-active-background');
73+
}
74+
}
75+
5176
:host([selected]) {
5277
[part~='toggle'] {
5378
color: var-get($theme, 'item-selected-text-color');
@@ -72,6 +97,29 @@ $theme: $material;
7297
}
7398
}
7499

100+
:host([selected][part='toggle focused']),
101+
:host([selected]:focus-within) {
102+
[part~='toggle'] {
103+
background: var-get($theme, 'item-selected-focus-background');
104+
border-color: var-get($theme, 'item-focused-hover-border-color');
105+
106+
&:hover {
107+
background: var-get($theme, 'item-selected-focus-hover-background');
108+
}
109+
110+
&:active {
111+
background: var-get($theme, 'item-selected-active-background');
112+
}
113+
}
114+
}
115+
116+
:host([selected]:active),
117+
:host([selected]) [part~='toggle']:active {
118+
[part~='toggle'] {
119+
background: var-get($theme, 'item-selected-active-background');
120+
}
121+
}
122+
75123
:host([disabled]),
76124
:host(:disabled) {
77125
@include disabled();
@@ -85,12 +133,12 @@ $theme: $material;
85133
:host([selected]:disabled),
86134
:host([selected][disabled]) {
87135
[part~='toggle'] {
88-
&::before {
89-
position: absolute;
90-
content: '';
91-
inset: 0;
92-
z-index: 3;
93-
background: var-get($theme, 'disabled-selected-background');
94-
}
136+
color: var-get($theme, 'disabled-selected-text-color');
137+
background: var-get($theme, 'disabled-selected-background');
138+
border-color: var-get($theme, 'disabled-selected-border-color');
139+
}
140+
141+
::slotted(igc-icon) {
142+
color: var-get($theme, 'disabled-selected-icon-color');
95143
}
96144
}

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

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

1414
[part='toggle focused'] {
15-
background: var-get($theme, 'item-background');
16-
1715
&::after {
1816
content: '';
1917
position: absolute;
@@ -27,48 +25,10 @@ $outline-btn-indent: rem(2px);
2725
}
2826
}
2927

30-
:host(:hover) {
31-
[part='toggle focused'] {
32-
background: var-get($theme, 'item-hover-background');
33-
}
34-
}
35-
36-
[part~='toggle']:active {
37-
background: var-get($theme, 'item-focused-background');
38-
}
39-
40-
[part='toggle focused'] {
41-
&:active {
42-
background: var-get($theme, 'item-focused-background');
43-
}
44-
}
45-
46-
:host([selected]:hover) {
28+
:host([part='toggle focused']),
29+
:host(:focus-within) {
4730
[part~='toggle'] {
48-
background: var-get($theme, 'item-selected-background');
49-
50-
&::before {
51-
content: '';
52-
position: absolute;
53-
pointer-events: none;
54-
width: 100%;
55-
height: 100%;
56-
z-index: -1;
57-
background: var-get($theme, 'item-selected-hover-background');
58-
}
31+
border-color: var-get($theme, 'item-border-color');
5932
}
6033
}
6134

62-
:host([selected]) {
63-
[part~='toggle']:active {
64-
background: var-get($theme, 'item-selected-focus-background');
65-
}
66-
67-
[part='toggle focused'] {
68-
background: var-get($theme, 'item-selected-background');
69-
70-
&:active {
71-
background: var-get($theme, 'item-selected-focus-background');
72-
}
73-
}
74-
}

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

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -20,72 +20,19 @@ $group-item-border-thickness: rem(1px);
2020
}
2121

2222
[part='toggle focused'] {
23-
z-index: 2;
2423
box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
25-
border-color: var-get($theme, 'item-border-color');
26-
color: var-get($theme, 'item-focused-text-color');
27-
}
28-
}
29-
30-
:host(:hover) {
31-
[part~='toggle'] {
32-
z-index: 1;
33-
}
34-
35-
[part='toggle focused'] {
36-
border-color: var-get($theme, 'item-hover-border-color');
37-
color: var-get($theme, 'item-hover-text-color');
38-
}
39-
}
40-
41-
[part~='toggle']:active {
42-
color: var-get($theme, 'item-hover-text-color');
43-
background: var-get($theme, 'item-hover-background');
44-
border-color: var-get($theme, 'item-hover-border-color');
45-
z-index: 2;
46-
47-
::slotted(igc-icon) {
48-
color: var-get($theme, 'item-hover-icon-color');
49-
}
50-
}
51-
52-
:host([selected]:hover) {
53-
[part='toggle focused'] {
54-
border-color: var-get($theme, 'item-selected-hover-border-color');
5524
}
5625
}
5726

5827
:host([selected]) {
5928
[part='toggle focused'] {
6029
box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');
61-
border-color: var-get($theme, 'item-selected-border-color');
62-
color: var-get($theme, 'item-selected-hover-text-color');
63-
}
64-
65-
[part~='toggle']:active {
66-
color: var-get($theme, 'item-selected-hover-text-color');
67-
background: var-get($theme, 'item-selected-hover-background');
68-
border-color: var-get($theme, 'item-selected-hover-border-color');
69-
70-
::slotted(igc-icon) {
71-
color: var-get($theme, 'item-selected-hover-icon-color');
72-
}
7330
}
7431
}
7532

7633
:host([selected]:disabled),
7734
:host([selected][disabled]) {
7835
[part~='toggle'] {
79-
color: var-get($theme, 'disabled-selected-text-color');
80-
background: var-get($theme, 'disabled-selected-background');
8136
border: none;
82-
83-
&::before {
84-
display: none;
85-
}
86-
}
87-
88-
::slotted(igc-icon) {
89-
color: var-get($theme, 'disabled-selected-icon-color');
9037
}
9138
}

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

Lines changed: 0 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -2,103 +2,3 @@
22
@use '../../light/themes' as *;
33

44
$theme: $material;
5-
6-
:host {
7-
[part~='toggle']::before {
8-
position: absolute;
9-
pointer-events: none;
10-
width: 100%;
11-
height: 100%;
12-
z-index: -1;
13-
}
14-
15-
[part='toggle focused'] {
16-
color: var-get($theme, 'item-hover-text-color');
17-
border-color: var-get($theme, 'item-hover-border-color');
18-
19-
::slotted(igc-icon) {
20-
color: var-get($theme, 'item-hover-icon-color');
21-
}
22-
23-
&::before {
24-
content: '';
25-
background: var-get($theme, 'item-hover-background');
26-
}
27-
}
28-
}
29-
30-
:host(:hover) {
31-
[part~='toggle'] {
32-
background: var-get($theme, 'item-background');
33-
34-
&::before {
35-
content: '';
36-
background: var-get($theme, 'item-hover-background');
37-
}
38-
}
39-
40-
[part='toggle focused'] {
41-
&::before {
42-
background: var-get($theme, 'item-focused-hover-background');
43-
}
44-
}
45-
}
46-
47-
[part~='toggle']:active {
48-
color: var-get($theme, 'item-hover-text-color');
49-
border-color: var-get($theme, 'item-hover-border-color');
50-
51-
&::before {
52-
content: '';
53-
background: var-get($theme, 'item-focused-background');
54-
}
55-
56-
::slotted(igc-icon) {
57-
color: var-get($theme, 'item-hover-icon-color');
58-
}
59-
}
60-
61-
:host([selected]) {
62-
[part~='toggle']:active {
63-
background: var-get($theme, 'item-selected-background');
64-
color: var-get($theme, 'item-selected-hover-text-color');
65-
border-color: var-get($theme, 'item-selected-border-color');
66-
67-
::slotted(igc-icon) {
68-
color: var-get($theme, 'item-selected-hover-icon-color');
69-
}
70-
71-
&::before {
72-
background: var-get($theme, 'item-selected-focus-background');
73-
}
74-
}
75-
76-
[part='toggle focused'] {
77-
color: var-get($theme, 'item-selected-hover-text-color');
78-
border-color: var-get($theme, 'item-selected-hover-border-color');
79-
80-
::slotted(igc-icon) {
81-
color: var-get($theme, 'item-selected-hover-icon-color');
82-
}
83-
84-
&::before {
85-
background: var-get($theme, 'item-selected-hover-background');
86-
}
87-
}
88-
}
89-
90-
:host([selected]:hover) {
91-
[part~='toggle'] {
92-
background: var-get($theme, 'item-selected-background');
93-
94-
&::before {
95-
background: var-get($theme, 'item-selected-hover-background');
96-
}
97-
}
98-
99-
[part='toggle focused'] {
100-
&::before {
101-
background: var-get($theme, 'item-selected-focus-hover-background');
102-
}
103-
}
104-
}

0 commit comments

Comments
 (0)