108 lines
3.3 KiB
SCSS
108 lines
3.3 KiB
SCSS
|
@use '../core/tokens/m2/mat/radio' as tokens-mat-radio;
|
||
|
|
@use '../core/tokens/m2/mdc/radio' as tokens-mdc-radio;
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
@use '../core/style/layout-common';
|
||
|
|
@use './radio-common';
|
||
|
|
|
||
|
|
.mat-mdc-radio-button {
|
||
|
|
-webkit-tap-highlight-color: transparent;
|
||
|
|
|
||
|
|
@include radio-common.radio-structure(true);
|
||
|
|
@include radio-common.radio-noop-animations();
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
|
||
|
|
.mdc-radio__background::before {
|
||
|
|
@include token-utils.create-token-slot(background-color, ripple-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-radio-checked {
|
||
|
|
.mat-ripple-element,
|
||
|
|
.mdc-radio__background::before {
|
||
|
|
@include token-utils.create-token-slot(background-color, checked-ripple-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.mat-mdc-radio-disabled-interactive .mdc-radio--disabled {
|
||
|
|
.mat-ripple-element,
|
||
|
|
.mdc-radio__background::before {
|
||
|
|
@include token-utils.create-token-slot(background-color, ripple-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-internal-form-field {
|
||
|
|
@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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mdc-radio--disabled + label {
|
||
|
|
@include token-utils.create-token-slot(color, disabled-label-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// This is necessary because we do not depend on MDC's ripple, but have our own that should be
|
||
|
|
// positioned correctly. This can be removed once we start using MDC's ripple implementation.
|
||
|
|
.mat-radio-ripple {
|
||
|
|
@include layout-common.fill;
|
||
|
|
pointer-events: none;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
.mat-ripple-element {
|
||
|
|
opacity: 0.14;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// We don't inherit the border focus style from MDC since we don't use their ripple.
|
||
|
|
// Instead we need to replicate it here.
|
||
|
|
@include token-utils.use-tokens(tokens-mdc-radio.$prefix, tokens-mdc-radio.get-token-slots()) {
|
||
|
|
.mdc-radio .mdc-radio__native-control:focus:enabled:not(:checked) {
|
||
|
|
& ~ .mdc-radio__background .mdc-radio__outer-circle {
|
||
|
|
@include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// For radios render the focus indicator when we know
|
||
|
|
// the hidden input is focused (slightly different for each control).
|
||
|
|
&.cdk-focused .mat-focus-indicator::before {
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-mdc-radio-disabled {
|
||
|
|
cursor: default;
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
&.mat-mdc-radio-disabled-interactive {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Element used to provide a larger tap target for users on touch devices.
|
||
|
|
.mat-mdc-radio-touch-target {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
height: 48px;
|
||
|
|
width: 48px;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
|
||
|
|
@include token-utils.use-tokens(tokens-mat-radio.$prefix, tokens-mat-radio.get-token-slots()) {
|
||
|
|
@include token-utils.create-token-slot(display, touch-target-display);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
left: auto;
|
||
|
|
right: 50%;
|
||
|
|
transform: translate(50%, -50%);
|
||
|
|
}
|
||
|
|
}
|