583 lines
18 KiB
SCSS
583 lines
18 KiB
SCSS
|
@use '@angular/cdk';
|
||
|
|
@use '../core/style/layout-common';
|
||
|
|
@use '../core/tokens/m2/mat/switch' as tokens-mat-switch;
|
||
|
|
@use '../core/tokens/m2/mdc/switch' as tokens-mdc-switch;
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
@use '../core/style/vendor-prefixes';
|
||
|
|
|
||
|
|
$_mdc-slots: (tokens-mdc-switch.$prefix, tokens-mdc-switch.get-token-slots());
|
||
|
|
$_mat-slots: (tokens-mat-switch.$prefix, tokens-mat-switch.get-token-slots());
|
||
|
|
$_interactive-disabled-selector: '.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled';
|
||
|
|
|
||
|
|
.mdc-switch {
|
||
|
|
align-items: center;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-flex;
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin: 0;
|
||
|
|
outline: none;
|
||
|
|
overflow: visible;
|
||
|
|
padding: 0;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(width, track-width);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mdc-switch--disabled {
|
||
|
|
cursor: default;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-slide-toggle-disabled-interactive {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__track {
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(height, track-height);
|
||
|
|
@include token-utils.create-token-slot(border-radius, track-shape);
|
||
|
|
|
||
|
|
.mdc-switch--disabled.mdc-switch & {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-track-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&::after {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: inherit;
|
||
|
|
box-sizing: border-box;
|
||
|
|
content: '';
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mat-slots...) {
|
||
|
|
@include token-utils.create-token-slot(border-width, track-outline-width);
|
||
|
|
@include token-utils.create-token-slot(border-color, track-outline-color);
|
||
|
|
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(border-width, selected-track-outline-width);
|
||
|
|
@include token-utils.create-token-slot(border-color, selected-track-outline-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(border-width,
|
||
|
|
disabled-unselected-track-outline-width);
|
||
|
|
@include token-utils.create-token-slot(border-color,
|
||
|
|
disabled-unselected-track-outline-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
border-color: currentColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
|
||
|
|
transform: translateX(0);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
|
||
|
|
transform: translateX(100%);
|
||
|
|
|
||
|
|
[dir='rtl'] .mdc-switch--selected & {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mat-slots...) {
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, hidden-track-opacity);
|
||
|
|
@include token-utils.create-token-slot(transition, hidden-track-transition);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, visible-track-opacity);
|
||
|
|
@include token-utils.create-token-slot(transition, visible-track-transition);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
.mdc-switch:enabled:hover:not(:focus):not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-hover-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch:enabled:focus:not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-focus-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-pressed-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:focus:not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:active &,
|
||
|
|
.mdc-switch.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(background, disabled-unselected-track-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(background, selected-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mat-slots...) {
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, visible-track-opacity);
|
||
|
|
@include token-utils.create-token-slot(transition, visible-track-transition);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, hidden-track-opacity);
|
||
|
|
@include token-utils.create-token-slot(transition, hidden-track-transition);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
.mdc-switch:enabled:hover:not(:focus):not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-hover-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch:enabled:focus:not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-focus-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-pressed-track-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:focus:not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:active &,
|
||
|
|
.mdc-switch.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(background, disabled-selected-track-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__handle-track {
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
left: 0;
|
||
|
|
right: auto;
|
||
|
|
transform: translateX(0);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
width: calc(100% - #{token-utils.get-token-variable(handle-width)});
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
left: auto;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
transform: translateX(100%);
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__handle {
|
||
|
|
display: flex;
|
||
|
|
pointer-events: auto;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
left: 0;
|
||
|
|
right: auto;
|
||
|
|
|
||
|
|
// Used for M3 animations. Does not affect the M2 slide-toggle
|
||
|
|
// because the width and height are static, and the margin is unused.
|
||
|
|
transition:
|
||
|
|
width 75ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
|
|
height 75ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
|
|
margin 75ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(width, handle-width);
|
||
|
|
@include token-utils.create-token-slot(height, handle-height);
|
||
|
|
@include token-utils.create-token-slot(border-radius, handle-shape);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
left: auto;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mat-slots...) {
|
||
|
|
.mat-mdc-slide-toggle .mdc-switch--unselected & {
|
||
|
|
@include token-utils.create-token-slot(width, unselected-handle-size);
|
||
|
|
@include token-utils.create-token-slot(height, unselected-handle-size);
|
||
|
|
@include token-utils.create-token-slot(margin, unselected-handle-horizontal-margin);
|
||
|
|
|
||
|
|
&:has(.mdc-switch__icons) {
|
||
|
|
@include token-utils.create-token-slot(margin,
|
||
|
|
unselected-with-icon-handle-horizontal-margin);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle .mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(width, selected-handle-size);
|
||
|
|
@include token-utils.create-token-slot(height, selected-handle-size);
|
||
|
|
@include token-utils.create-token-slot(margin, selected-handle-horizontal-margin);
|
||
|
|
|
||
|
|
&:has(.mdc-switch__icons) {
|
||
|
|
@include token-utils.create-token-slot(margin, selected-with-icon-handle-horizontal-margin);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle &:has(.mdc-switch__icons) {
|
||
|
|
@include token-utils.create-token-slot(width, with-icon-handle-size);
|
||
|
|
@include token-utils.create-token-slot(height, with-icon-handle-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(width, pressed-handle-size);
|
||
|
|
@include token-utils.create-token-slot(height, pressed-handle-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(margin, selected-pressed-handle-horizontal-margin);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) & {
|
||
|
|
@include token-utils.create-token-slot(margin, unselected-pressed-handle-horizontal-margin);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--disabled.mdc-switch--selected &::after {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-selected-handle-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--disabled.mdc-switch--unselected &::after {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-unselected-handle-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before,
|
||
|
|
&::after {
|
||
|
|
border: 1px solid transparent;
|
||
|
|
border-radius: inherit;
|
||
|
|
box-sizing: border-box;
|
||
|
|
content: '';
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
|
|
border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
@include cdk.high-contrast {
|
||
|
|
border-color: currentColor;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
&::after {
|
||
|
|
.mdc-switch--selected:enabled & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:hover:not(:focus):not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-hover-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:focus:not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-focus-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-pressed-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$_interactive-disabled-selector}.mdc-switch--selected:hover:not(:focus):not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}.mdc-switch--selected:focus:not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}.mdc-switch--selected:active &,
|
||
|
|
.mdc-switch--selected.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(background, disabled-selected-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-hover-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled:focus:not(:active) & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-focus-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-pressed-handle-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(background, disabled-unselected-handle-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
@include token-utils.create-token-slot(background, handle-surface-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__shadow {
|
||
|
|
border-radius: inherit;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
.mdc-switch:enabled & {
|
||
|
|
@include token-utils.create-token-slot(box-shadow, handle-elevation-shadow);
|
||
|
|
}
|
||
|
|
|
||
|
|
#{$_interactive-disabled-selector}:hover:not(:focus):not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:focus:not(:active) &,
|
||
|
|
#{$_interactive-disabled-selector}:active &,
|
||
|
|
.mdc-switch.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(box-shadow, disabled-handle-elevation-shadow);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__ripple {
|
||
|
|
left: 50%;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
z-index: -1;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
@include token-utils.create-token-slot(width, state-layer-size);
|
||
|
|
@include token-utils.create-token-slot(height, state-layer-size);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
opacity: 0;
|
||
|
|
|
||
|
|
.mdc-switch--disabled & {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle-disabled-interactive & {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch:hover & {
|
||
|
|
opacity: 0.04;
|
||
|
|
transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Needs a little more specificity so the :hover styles don't override it.
|
||
|
|
.mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mdc-switch & {
|
||
|
|
opacity: 0.12;
|
||
|
|
}
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
#{$_interactive-disabled-selector}:enabled:focus &,
|
||
|
|
#{$_interactive-disabled-selector}:enabled:active &,
|
||
|
|
#{$_interactive-disabled-selector}:enabled:hover:not(:focus) &,
|
||
|
|
.mdc-switch--unselected:enabled:hover:not(:focus) & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-hover-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled:focus & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-focus-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, unselected-pressed-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
|
||
|
|
transition: opacity 75ms linear;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:hover:not(:focus) & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-hover-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:focus & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected:enabled:active & {
|
||
|
|
@include token-utils.create-token-slot(background, selected-pressed-state-layer-color);
|
||
|
|
@include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
|
||
|
|
transition: opacity 75ms linear;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__icons {
|
||
|
|
position: relative;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
.mdc-switch--disabled.mdc-switch--unselected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-unselected-icon-opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--disabled.mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(opacity, disabled-selected-icon-opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch__icon {
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
margin: auto;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens($_mdc-slots...) {
|
||
|
|
.mdc-switch--unselected & {
|
||
|
|
@include token-utils.create-token-slot(width, unselected-icon-size);
|
||
|
|
@include token-utils.create-token-slot(height, unselected-icon-size);
|
||
|
|
@include token-utils.create-token-slot(fill, unselected-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--unselected.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(fill, disabled-unselected-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected & {
|
||
|
|
@include token-utils.create-token-slot(width, selected-icon-size);
|
||
|
|
@include token-utils.create-token-slot(height, selected-icon-size);
|
||
|
|
@include token-utils.create-token-slot(fill, selected-icon-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected.mdc-switch--disabled & {
|
||
|
|
@include token-utils.create-token-slot(fill, disabled-selected-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-switch--selected .mdc-switch__icon--on,
|
||
|
|
.mdc-switch--unselected .mdc-switch__icon--off {
|
||
|
|
opacity: 1;
|
||
|
|
transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-slide-toggle {
|
||
|
|
@include vendor-prefixes.user-select(none);
|
||
|
|
display: inline-block;
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
|
||
|
|
// Remove the native outline since we use the ripple for focus indication.
|
||
|
|
outline: 0;
|
||
|
|
|
||
|
|
// The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
|
||
|
|
.mat-mdc-slide-toggle-ripple,
|
||
|
|
.mdc-switch__ripple::after {
|
||
|
|
@include layout-common.fill();
|
||
|
|
border-radius: 50%;
|
||
|
|
// Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
|
||
|
|
// for the input. Pointer events can be safely disabled because the ripple trigger element is
|
||
|
|
// the host element.
|
||
|
|
pointer-events: none;
|
||
|
|
// Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
|
||
|
|
// in order to avoid creating extra layers when there aren't any ripples.
|
||
|
|
&:not(:empty) {
|
||
|
|
transform: translateZ(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Needs a little more specificity so the :hover styles don't override it.
|
||
|
|
// For slide-toggles render the focus indicator when we know
|
||
|
|
// the hidden input is focused (slightly different for each control).
|
||
|
|
&.mat-mdc-slide-toggle-focused .mat-focus-indicator::before {
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-internal-form-field {
|
||
|
|
@include token-utils.use-tokens($_mat-slots...) {
|
||
|
|
@include token-utils.create-token-slot(color, label-text-color);
|
||
|
|
@include token-utils.create-token-slot(font-family, label-text-font);
|
||
|
|
@include token-utils.create-token-slot(line-height, label-text-line-height);
|
||
|
|
@include token-utils.create-token-slot(font-size, label-text-size);
|
||
|
|
@include token-utils.create-token-slot(letter-spacing, label-text-tracking);
|
||
|
|
@include token-utils.create-token-slot(font-weight, label-text-weight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-ripple-element {
|
||
|
|
opacity: 0.12;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Slide-toggle components have to set `border-radius: 50%` in order to support density scaling
|
||
|
|
// which will clip a square focus indicator so we have to turn it into a circle.
|
||
|
|
.mat-focus-indicator::before {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
&._mat-animation-noopable {
|
||
|
|
.mdc-switch__handle-track,
|
||
|
|
.mdc-switch__icon,
|
||
|
|
.mdc-switch__handle::before,
|
||
|
|
.mdc-switch__handle::after,
|
||
|
|
.mdc-switch__track::before,
|
||
|
|
.mdc-switch__track::after {
|
||
|
|
transition: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// If our slide-toggle is enabled the cursor on label should appear as a pointer.
|
||
|
|
.mdc-switch:enabled + .mdc-label {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO(wagnermaciel): Use our custom token system to emit this css rule.
|
||
|
|
.mdc-switch--disabled + label {
|
||
|
|
color: var(--mdc-switch-disabled-label-text-color);
|
||
|
|
}
|
||
|
|
}
|