mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(checkbox): support logical shapes
PiperOrigin-RevId: 527283325
This commit is contained in:
parent
fb72f17a4c
commit
e62b16b9a6
@ -4,13 +4,13 @@
|
||||
//
|
||||
|
||||
// go/keep-sorted start
|
||||
@use 'sass:list';
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
// go/keep-sorted end
|
||||
// go/keep-sorted start
|
||||
@use '../../focus/focus-ring';
|
||||
@use '../../ripple/ripple';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens';
|
||||
// go/keep-sorted end
|
||||
|
||||
@ -26,32 +26,69 @@ $_indeterminate-bottom-left: 4px, -10px;
|
||||
$_checkmark-bottom-left: 7px, -14px;
|
||||
|
||||
@mixin theme($tokens) {
|
||||
$tokens: _resolve-tokens($tokens);
|
||||
$tokens: theme.validate-theme(
|
||||
_resolve-tokens(tokens.md-comp-checkbox-values()),
|
||||
$tokens
|
||||
$supported-tokens: list.join(
|
||||
tokens.$md-comp-checkbox-supported-tokens,
|
||||
(
|
||||
'container-shape-start-start',
|
||||
'container-shape-start-end',
|
||||
'container-shape-end-end',
|
||||
'container-shape-end-start'
|
||||
)
|
||||
);
|
||||
$tokens: theme.create-theme-vars($tokens, checkbox);
|
||||
|
||||
@include theme.emit-theme-vars($tokens);
|
||||
@each $token, $value in $tokens {
|
||||
@if list.index($supported-tokens, $token) == null {
|
||||
@error 'Token `#{$token}` is not a supported token.';
|
||||
}
|
||||
|
||||
@if $value {
|
||||
--md-checkbox-#{$token}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin styles() {
|
||||
$tokens: _resolve-tokens(tokens.md-comp-checkbox-values());
|
||||
$tokens: theme.create-theme-vars($tokens, checkbox);
|
||||
$tokens: tokens.md-comp-checkbox-values();
|
||||
|
||||
:host {
|
||||
@each $token, $value in $tokens {
|
||||
--_#{$token}: #{$value};
|
||||
--_#{$token}: var(--md-checkbox-#{$token}, #{$value});
|
||||
}
|
||||
|
||||
border-radius: var(--_container-shape);
|
||||
// Support logical shape properties
|
||||
--_container-shape-start-start: var(
|
||||
--md-checkbox-shape-start-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-start-end: var(
|
||||
--md-checkbox-shape-start-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-end: var(
|
||||
--md-checkbox-shape-end-end,
|
||||
var(--_container-shape)
|
||||
);
|
||||
--_container-shape-end-start: var(
|
||||
--md-checkbox-shape-end-start,
|
||||
var(--_container-shape)
|
||||
);
|
||||
|
||||
border-start-start-radius: var(--_container-shape-start-start);
|
||||
border-start-end-radius: var(--_container-shape-start-end);
|
||||
border-end-end-radius: var(--_container-shape-end-end);
|
||||
border-end-start-radius: var(--_container-shape-end-start);
|
||||
display: inline-flex;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
vertical-align: top; // Fix extra space when placed inside display: block
|
||||
width: 48px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
'offset': -2px,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
input {
|
||||
@ -129,17 +166,6 @@ $_checkmark-bottom-left: 7px, -14px;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
// Focus ring
|
||||
|
||||
md-focus-ring {
|
||||
@include focus-ring.theme(
|
||||
(
|
||||
offset: -2px,
|
||||
shape: map.get(tokens.md-sys-shape-values(), corner-full),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Ripple
|
||||
|
||||
md-ripple {
|
||||
@ -429,28 +455,3 @@ $_checkmark-bottom-left: 7px, -14px;
|
||||
fill: var(--_selected-disabled-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
@function _resolve-tokens($tokens) {
|
||||
// Remove deprecated tokens
|
||||
$tokens: map.remove(
|
||||
$tokens,
|
||||
'disabled-unselected-icon-color',
|
||||
'disabled-unselected-icon-opacity',
|
||||
'disabled-selected-icon-color',
|
||||
'disabled-selected-icon-opacity',
|
||||
'unselected-icon-color',
|
||||
'unselected-focus-icon-color',
|
||||
'unselected-hover-icon-color',
|
||||
'unselected-pressed-icon-color'
|
||||
);
|
||||
// Remove unsupported tokens
|
||||
$tokens: map.remove(
|
||||
$tokens,
|
||||
'selected-disabled-container-outline-width',
|
||||
'selected-focus-outline-width',
|
||||
'selected-hover-outline-width',
|
||||
'selected-outline-width',
|
||||
'selected-pressed-outline-width'
|
||||
);
|
||||
@return $tokens;
|
||||
}
|
||||
|
@ -8,6 +8,7 @@
|
||||
@use './md-sys-shape';
|
||||
@use './md-sys-state';
|
||||
@use './v0_172/md-comp-checkbox';
|
||||
@use './values';
|
||||
// go/keep-sorted end
|
||||
|
||||
$_default: (
|
||||
@ -16,6 +17,82 @@ $_default: (
|
||||
'md-sys-state': md-sys-state.values(),
|
||||
);
|
||||
|
||||
$supported-tokens: (
|
||||
// go/keep-sorted start
|
||||
'container-shape',
|
||||
'container-size',
|
||||
'error-focus-state-layer-color',
|
||||
'error-focus-state-layer-opacity',
|
||||
'error-hover-state-layer-color',
|
||||
'error-hover-state-layer-opacity',
|
||||
'error-pressed-state-layer-color',
|
||||
'error-pressed-state-layer-opacity',
|
||||
'icon-size',
|
||||
'selected-container-color',
|
||||
'selected-disabled-container-color',
|
||||
'selected-disabled-container-opacity',
|
||||
'selected-disabled-icon-color',
|
||||
'selected-error-container-color',
|
||||
'selected-error-focus-container-color',
|
||||
'selected-error-focus-icon-color',
|
||||
'selected-error-hover-container-color',
|
||||
'selected-error-hover-icon-color',
|
||||
'selected-error-icon-color',
|
||||
'selected-error-pressed-container-color',
|
||||
'selected-error-pressed-icon-color',
|
||||
'selected-focus-container-color',
|
||||
'selected-focus-icon-color',
|
||||
'selected-focus-state-layer-color',
|
||||
'selected-focus-state-layer-opacity',
|
||||
'selected-hover-container-color',
|
||||
'selected-hover-icon-color',
|
||||
'selected-hover-state-layer-color',
|
||||
'selected-hover-state-layer-opacity',
|
||||
'selected-icon-color',
|
||||
'selected-pressed-container-color',
|
||||
'selected-pressed-icon-color',
|
||||
'selected-pressed-state-layer-color',
|
||||
'selected-pressed-state-layer-opacity',
|
||||
'state-layer-shape',
|
||||
'state-layer-size',
|
||||
'unselected-disabled-container-opacity',
|
||||
'unselected-disabled-outline-color',
|
||||
'unselected-disabled-outline-width',
|
||||
'unselected-error-focus-outline-color',
|
||||
'unselected-error-hover-outline-color',
|
||||
'unselected-error-outline-color',
|
||||
'unselected-error-pressed-outline-color',
|
||||
'unselected-focus-outline-color',
|
||||
'unselected-focus-outline-width',
|
||||
'unselected-focus-state-layer-color',
|
||||
'unselected-focus-state-layer-opacity',
|
||||
'unselected-hover-outline-color',
|
||||
'unselected-hover-outline-width',
|
||||
'unselected-hover-state-layer-color',
|
||||
'unselected-hover-state-layer-opacity',
|
||||
'unselected-outline-color',
|
||||
'unselected-outline-width',
|
||||
'unselected-pressed-outline-color',
|
||||
'unselected-pressed-outline-width',
|
||||
'unselected-pressed-state-layer-color',
|
||||
'unselected-pressed-state-layer-opacity',
|
||||
// go/keep-sorted end
|
||||
);
|
||||
|
||||
$unsupported-tokens: (
|
||||
'selected-disabled-container-outline-width',
|
||||
'selected-focus-outline-width',
|
||||
'selected-hover-outline-width',
|
||||
'selected-outline-width',
|
||||
'selected-pressed-outline-width'
|
||||
);
|
||||
|
||||
@function values($deps: $_default, $exclude-hardcoded-values: false) {
|
||||
@return md-comp-checkbox.values($deps, $exclude-hardcoded-values);
|
||||
$tokens: values.validate(
|
||||
md-comp-checkbox.values($deps, $exclude-hardcoded-values),
|
||||
$supported-tokens: $supported-tokens,
|
||||
$unsupported-tokens: $unsupported-tokens
|
||||
);
|
||||
|
||||
@return $tokens;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user