Skip to content

Commit 3068b42

Browse files
AlexanderMeloxjnm2377
andauthoredFeb 3, 2022
feat(content-switcher): adds fade up animation (#10148)
* feat(content-switcher): adds fade up animation * fix(content-switcher): styles only applied when not disabled * feat(content-switcher): added styles to packages/styles * fix(content-switcher): removed carbon prefix on motion mixin Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com> * Update packages/components/src/components/content-switcher/_content-switcher.scss * feat(content-switcher): changed after and disabled selectors Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
1 parent b9ea6a3 commit 3068b42

File tree

2 files changed

+56
-2
lines changed

2 files changed

+56
-2
lines changed
 

‎packages/components/src/components/content-switcher/_content-switcher.scss

+28-1
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,37 @@
5151
color: $text-secondary;
5252
text-align: left;
5353
text-decoration: none;
54-
transition: all $duration--fast-01 motion(standard, productive);
54+
transition: all $duration--moderate-01 motion(standard, productive);
5555
white-space: nowrap;
5656

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+
5775
&:focus {
5876
z-index: 3;
5977
border-color: $focus;
6078
box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
6179
}
6280

81+
&:focus::after {
82+
clip-path: inset(3px 3px 3px 3px);
83+
}
84+
6385
&:hover {
6486
color: $text-primary;
6587
cursor: pointer;
@@ -156,6 +178,7 @@
156178
}
157179

158180
.#{$prefix}--content-switcher__label {
181+
z-index: 1;
159182
overflow: hidden;
160183
max-width: 100%;
161184
text-overflow: ellipsis;
@@ -172,6 +195,10 @@
172195
background-color: $layer-selected-inverse;
173196
color: $text-inverse;
174197

198+
&::after {
199+
transform: scaleY(1);
200+
}
201+
175202
&:disabled {
176203
background-color: $layer-selected-disabled;
177204
color: $text-disabled;

‎packages/styles/scss/components/content-switcher/_content-switcher.scss

+28-1
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,37 @@
5252
color: $text-secondary;
5353
text-align: left;
5454
text-decoration: none;
55-
transition: all $duration-fast-01 motion(standard, productive);
55+
transition: all $duration-moderate-01 motion(standard, productive);
5656
white-space: nowrap;
5757

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+
5876
&:focus {
5977
z-index: 3;
6078
border-color: $focus;
6179
box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
6280
}
6381

82+
&:focus::after {
83+
clip-path: inset(3px 3px 3px 3px);
84+
}
85+
6486
&:hover {
6587
color: $text-primary;
6688
cursor: pointer;
@@ -157,6 +179,7 @@
157179
}
158180

159181
.#{$prefix}--content-switcher__label {
182+
z-index: 1;
160183
overflow: hidden;
161184
max-width: 100%;
162185
text-overflow: ellipsis;
@@ -177,6 +200,10 @@
177200
background-color: $layer-selected-disabled;
178201
color: $text-disabled;
179202
}
203+
204+
&::after {
205+
transform: scaleY(1);
206+
}
180207
}
181208

182209
.#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected

0 commit comments

Comments
 (0)
Please sign in to comment.