Skip to content

Commit

Permalink
chore(switch): flatten sass selectors
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 530783676
  • Loading branch information
@asyncLiz @copybara-github
asyncLiz authored and copybara-github committed May 10, 2023
1 parent a791f3f commit 5841e43
Show file tree
Hide file tree
Showing 4 changed files with 201 additions and 210 deletions.
216 changes: 107 additions & 109 deletions switch/lib/_handle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,20 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
// this easing is custom to perform the "overshoot" animation
transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
$margin: calc(var(--_track-width) - var(--_track-height));
}

.switch--selected & {
margin-inline-start: $margin;
}
$margin: calc(var(--_track-width) - var(--_track-height));

.switch--unselected & {
margin-inline-end: $margin;
}
.switch--selected .handle-container {
margin-inline-start: $margin;
}

.switch:disabled & {
transition: none;
}
.switch--unselected .handle-container {
margin-inline-end: $margin;
}

.switch:disabled .handle-container {
transition: none;
}

.handle {
Expand All @@ -50,81 +51,78 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
transition-duration: 250ms, 250ms, 67ms;
transition-timing-function: $_easing-standard, $_easing-standard, linear;
z-index: 0;
}

.handle::before {
content: '';
display: flex;
position: absolute;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;

transition: opacity 67ms linear;
}

&::before {
content: '';
display: flex;
position: absolute;
height: 100%;
width: 100%;
border-radius: inherit;
box-sizing: border-box;

transition: opacity 67ms linear;

.switch--selected & {
// When selected, turn off ::before
opacity: 0;
}

.switch:disabled & {
transition: none;
}
}

.switch:disabled & {
transition: none;
}

.switch--selected &,
.switch--unselected &.handle--big {
height: var(--_selected-handle-height);
width: var(--_selected-handle-width);
}

.switch--selected:enabled:active &,
.switch--unselected:enabled:active & {
height: var(--_pressed-handle-height);
width: var(--_pressed-handle-width);
transition-timing-function: linear;
transition-duration: 100ms;
}

.switch--selected:hover & {
background-color: var(--_selected-hover-handle-color);
}

.switch--selected:focus-visible & {
background-color: var(--_selected-focus-handle-color);
}

.switch--selected:active & {
background-color: var(--_selected-pressed-handle-color);
}

.switch--selected:disabled & {
background-color: var(--_disabled-selected-handle-color);
}

&::before {
background-color: var(--_unselected-handle-color);

.switch--unselected:hover & {
background-color: var(--_unselected-hover-handle-color);
}

.switch--unselected:focus-visible & {
background-color: var(--_unselected-focus-handle-color);
}

.switch--unselected:active & {
background-color: var(--_unselected-pressed-handle-color);
}

.switch--unselected:disabled & {
background-color: var(--_disabled-unselected-handle-color);
}
}
.switch--selected .handle::before {
// When selected, turn off ::before
opacity: 0;
}

.switch:disabled .handle,
.switch:disabled .handle::before {
transition: none;
}

.switch--selected .handle,
.switch--unselected .handle.handle--big {
height: var(--_selected-handle-height);
width: var(--_selected-handle-width);
}

.switch--selected:enabled:active .handle,
.switch--unselected:enabled:active .handle {
height: var(--_pressed-handle-height);
width: var(--_pressed-handle-width);
transition-timing-function: linear;
transition-duration: 100ms;
}

.switch--selected:hover .handle {
background-color: var(--_selected-hover-handle-color);
}

.switch--selected:focus-visible .handle {
background-color: var(--_selected-focus-handle-color);
}

.switch--selected:active .handle {
background-color: var(--_selected-pressed-handle-color);
}

.switch--selected:disabled .handle {
background-color: var(--_disabled-selected-handle-color);
}

.handle::before {
background-color: var(--_unselected-handle-color);
}

.switch--unselected:hover .handle::before {
background-color: var(--_unselected-hover-handle-color);
}

.switch--unselected:focus-visible .handle::before {
background-color: var(--_unselected-focus-handle-color);
}

.switch--unselected:active .handle::before {
background-color: var(--_unselected-pressed-handle-color);
}

.switch--unselected:disabled .handle::before {
background-color: var(--_disabled-unselected-handle-color);
}

.ripple {
Expand All @@ -135,31 +133,31 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
transform: translate(-50%, -50%);
height: var(--_state-layer-size);
width: var(--_state-layer-size);
}

.switch--selected .ripple {
@include ripple.theme(
(
hover-color: var(--_selected-hover-state-layer-color),
focus-color: var(--_selected-focus-state-layer-color),
pressed-color: var(--_selected-pressed-state-layer-color),
hover-opacity: var(--_selected-hover-state-layer-opacity),
focus-opacity: var(--_selected-focus-state-layer-opacity),
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
)
);
}

.switch--selected & {
@include ripple.theme(
(
hover-color: var(--_selected-hover-state-layer-color),
focus-color: var(--_selected-focus-state-layer-color),
pressed-color: var(--_selected-pressed-state-layer-color),
hover-opacity: var(--_selected-hover-state-layer-opacity),
focus-opacity: var(--_selected-focus-state-layer-opacity),
pressed-opacity: var(--_selected-pressed-state-layer-opacity),
)
);
}

.switch--unselected & {
@include ripple.theme(
(
hover-color: var(--_unselected-hover-state-layer-color),
focus-color: var(--_unselected-focus-state-layer-color),
pressed-color: var(--_unselected-pressed-state-layer-color),
hover-opacity: var(--_unselected-hover-state-layer-opacity),
focus-opacity: var(--_unselected-focus-state-layer-opacity),
pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
)
);
}
.switch--unselected .ripple {
@include ripple.theme(
(
hover-color: var(--_unselected-hover-state-layer-color),
focus-color: var(--_unselected-focus-state-layer-color),
pressed-color: var(--_unselected-pressed-state-layer-color),
hover-opacity: var(--_unselected-hover-state-layer-opacity),
focus-opacity: var(--_unselected-focus-state-layer-opacity),
pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
)
);
}
}
38 changes: 18 additions & 20 deletions switch/lib/_icon.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
transition: fill 67ms linear, opacity 33ms linear,
transform 167ms $_easing-standard;
opacity: 0;
}

.switch:disabled & {
transition: none;
}
.switch:disabled .icon {
transition: none;
}

.switch--selected .icon--on,
Expand All @@ -44,25 +44,23 @@ $_easing-standard: map.get($_md-sys-motion, easing-standard);
transform: rotate(-45deg);
}

.icon {
.switch--selected & {
width: var(--_selected-icon-size);
height: var(--_selected-icon-size);
fill: var(--_selected-icon-color);
}
.switch--selected .icon {
width: var(--_selected-icon-size);
height: var(--_selected-icon-size);
fill: var(--_selected-icon-color);
}

.switch--unselected & {
width: var(--_unselected-icon-size);
height: var(--_unselected-icon-size);
fill: var(--_unselected-icon-color);
}
.switch--unselected .icon {
width: var(--_unselected-icon-size);
height: var(--_unselected-icon-size);
fill: var(--_unselected-icon-color);
}

.switch--selected:disabled & {
fill: var(--_disabled-selected-icon-color);
}
.switch--selected:disabled .icon {
fill: var(--_disabled-selected-icon-color);
}

.switch--unselected:disabled & {
fill: var(--_disabled-unselected-icon-color);
}
.switch--unselected:disabled .icon {
fill: var(--_disabled-unselected-icon-color);
}
}
25 changes: 11 additions & 14 deletions switch/lib/_switch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,7 @@ $_forced-colors-theme: (
outline: none;
vertical-align: top;
-webkit-tap-highlight-color: transparent;
}

md-focus-ring {
@include focus-ring.theme(
(
'shape-start-start': var(--_track-shape-start-start),
Expand Down Expand Up @@ -164,18 +162,17 @@ $_forced-colors-theme: (
}

// Disabled - Track
.track {
.switch:disabled & {
background-color: transparent;
border-color: transparent;

&::before {
background-clip: content-box;
}
}
.switch--selected:disabled & {
background-clip: border-box;
}
.switch:disabled .track {
background-color: transparent;
border-color: transparent;
}

.switch:disabled .track::before {
background-clip: content-box;
}

.switch--selected:disabled .track {
background-clip: border-box;
}

@include track.styles();
Expand Down
Loading

0 comments on commit 5841e43

Please sign in to comment.