Commit 3068b42 and authored Feb 3, 2022 Verified
1 parent b9ea6a3 commit 3068b42 Copy full SHA for 3068b42
File tree 2 files changed +56
-2
lines changed
components/src/components/content-switcher
styles/scss/components/content-switcher
2 files changed +56
-2
lines changed Original file line number Diff line number Diff line change 51
51
color : $text-secondary ;
52
52
text-align : left ;
53
53
text-decoration : none ;
54
- transition : all $duration--fast -01 motion (standard , productive );
54
+ transition : all $duration--moderate -01 motion (standard , productive );
55
55
white-space : nowrap ;
56
56
57
+ & ::after {
58
+ position : absolute ;
59
+ top : 0 ;
60
+ left : 0 ;
61
+ display : block ;
62
+ width : 100% ;
63
+ height : 100% ;
64
+ background-color : $layer-selected-inverse ;
65
+ content : ' ' ;
66
+ transform : scaleY (0 );
67
+ transform-origin : bottom ;
68
+ transition : all $duration--moderate-01 motion (standard , productive );
69
+ }
70
+
71
+ & :disabled ::after {
72
+ display : none ;
73
+ }
74
+
57
75
& :focus {
58
76
z-index : 3 ;
59
77
border-color : $focus ;
60
78
box-shadow : inset 0 0 0 2px $focus , inset 0 0 0 3px $focus-inset ;
61
79
}
62
80
81
+ & :focus ::after {
82
+ clip-path : inset (3px 3px 3px 3px );
83
+ }
84
+
63
85
& :hover {
64
86
color : $text-primary ;
65
87
cursor : pointer ;
156
178
}
157
179
158
180
.#{$prefix } --content-switcher__label {
181
+ z-index : 1 ;
159
182
overflow : hidden ;
160
183
max-width : 100% ;
161
184
text-overflow : ellipsis ;
172
195
background-color : $layer-selected-inverse ;
173
196
color : $text-inverse ;
174
197
198
+ & ::after {
199
+ transform : scaleY (1 );
200
+ }
201
+
175
202
& :disabled {
176
203
background-color : $layer-selected-disabled ;
177
204
color : $text-disabled ;
Original file line number Diff line number Diff line change 52
52
color : $text-secondary ;
53
53
text-align : left ;
54
54
text-decoration : none ;
55
- transition : all $duration-fast -01 motion (standard , productive );
55
+ transition : all $duration-moderate -01 motion (standard , productive );
56
56
white-space : nowrap ;
57
57
58
+ & ::after {
59
+ position : absolute ;
60
+ top : 0 ;
61
+ left : 0 ;
62
+ display : block ;
63
+ width : 100% ;
64
+ height : 100% ;
65
+ background-color : $layer-selected-inverse ;
66
+ content : ' ' ;
67
+ transform : scaleY (0 );
68
+ transform-origin : bottom ;
69
+ transition : all $duration-moderate-01 motion (standard , productive );
70
+ }
71
+
72
+ & :disabled ::after {
73
+ display : none ;
74
+ }
75
+
58
76
& :focus {
59
77
z-index : 3 ;
60
78
border-color : $focus ;
61
79
box-shadow : inset 0 0 0 2px $focus , inset 0 0 0 3px $focus-inset ;
62
80
}
63
81
82
+ & :focus ::after {
83
+ clip-path : inset (3px 3px 3px 3px );
84
+ }
85
+
64
86
& :hover {
65
87
color : $text-primary ;
66
88
cursor : pointer ;
157
179
}
158
180
159
181
.#{$prefix } --content-switcher__label {
182
+ z-index : 1 ;
160
183
overflow : hidden ;
161
184
max-width : 100% ;
162
185
text-overflow : ellipsis ;
177
200
background-color : $layer-selected-disabled ;
178
201
color : $text-disabled ;
179
202
}
203
+
204
+ & ::after {
205
+ transform : scaleY (1 );
206
+ }
180
207
}
181
208
182
209
.#{$prefix } --content-switcher-btn.#{$prefix } --content-switcher--selected
You can’t perform that action at this time.
0 commit comments