103 lines
3.1 KiB
SCSS
103 lines
3.1 KiB
SCSS
@use 'sass:math';
|
|
@use '../../style/checkbox-common';
|
|
@use '../../style/private';
|
|
@use '../../style/variables';
|
|
@use '../../tokens/token-utils';
|
|
@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
|
|
@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
|
|
@use './pseudo-checkbox-common';
|
|
|
|
.mat-pseudo-checkbox {
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
transition: border-color checkbox-common.$transition-duration
|
|
variables.$linear-out-slow-in-timing-function, background-color
|
|
checkbox-common.$transition-duration variables.$linear-out-slow-in-timing-function;
|
|
|
|
// Used to render the checkmark/mixedmark inside of the box.
|
|
&::after {
|
|
position: absolute;
|
|
opacity: 0;
|
|
content: '';
|
|
border-bottom: checkbox-common.$border-width solid currentColor;
|
|
transition: opacity checkbox-common.$transition-duration
|
|
variables.$linear-out-slow-in-timing-function;
|
|
}
|
|
|
|
@include private.private-animation-noop {
|
|
&::after {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-pseudo-checkbox-disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
.mat-pseudo-checkbox-indeterminate::after {
|
|
left: math.div(checkbox-common.$border-width, 2);
|
|
opacity: 1;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.mat-pseudo-checkbox-checked::after {
|
|
left: pseudo-checkbox-common.$padding - checkbox-common.$border-width * 1.5;
|
|
border-left: checkbox-common.$border-width solid currentColor;
|
|
transform: rotate(-45deg);
|
|
opacity: 1;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.mat-pseudo-checkbox-minimal {
|
|
@include token-utils.use-tokens(tokens-mat-minimal-pseudo-checkbox.$prefix,
|
|
tokens-mat-minimal-pseudo-checkbox.get-token-slots()) {
|
|
&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
|
|
&::after {
|
|
@include token-utils.create-token-slot(color, selected-checkmark-color);
|
|
}
|
|
|
|
&.mat-pseudo-checkbox-disabled::after {
|
|
@include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mat-pseudo-checkbox-full {
|
|
@include token-utils.use-tokens(tokens-mat-full-pseudo-checkbox.$prefix,
|
|
tokens-mat-full-pseudo-checkbox.get-token-slots()) {
|
|
@include token-utils.create-token-slot(border-color, unselected-icon-color);
|
|
border-width: checkbox-common.$border-width;
|
|
border-style: solid;
|
|
|
|
&.mat-pseudo-checkbox-disabled {
|
|
@include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
|
|
}
|
|
|
|
&.mat-pseudo-checkbox-checked, &.mat-pseudo-checkbox-indeterminate {
|
|
@include token-utils.create-token-slot(background-color, selected-icon-color);
|
|
border-color: transparent;
|
|
|
|
&::after {
|
|
@include token-utils.create-token-slot(color, selected-checkmark-color);
|
|
}
|
|
|
|
&.mat-pseudo-checkbox-disabled {
|
|
@include token-utils.create-token-slot(background-color, disabled-selected-icon-color);
|
|
|
|
&::after {
|
|
@include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include pseudo-checkbox-common.size(checkbox-common.$size);
|