mirror of
https://github.com/material-components/material-web.git
synced 2024-09-21 02:27:12 +03:00
feat(checkbox): Added theme-extension() mixin to Checkbox
PiperOrigin-RevId: 440171798
This commit is contained in:
parent
d44e9e1a16
commit
2641c0b572
1
components/checkbox/_checkbox.scss
Normal file
1
components/checkbox/_checkbox.scss
Normal file
@ -0,0 +1 @@
|
||||
@forward './lib/checkbox-theme' show theme, theme-extension;
|
@ -24,7 +24,6 @@
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
@use 'sass:selector';
|
||||
@use '@material/touch-target/touch-target';
|
||||
@use '@material/theme/shadow-dom';
|
||||
@use '../../sass/theme';
|
||||
@use '../../tokens/latest' as tokens;
|
||||
@ -147,6 +146,18 @@ $custom-property-prefix: 'checkbox';
|
||||
}
|
||||
}
|
||||
|
||||
$_theme-extension-keys: (
|
||||
touch-target-size: null,
|
||||
);
|
||||
|
||||
@mixin theme-extension($theme) {
|
||||
$theme: theme.validate-theme($_theme-extension-keys, $theme);
|
||||
|
||||
.md3-checkbox {
|
||||
@include _touch-target(map.get($theme, touch-target-size));
|
||||
}
|
||||
}
|
||||
|
||||
@function _flatten-disable-colors($theme) {
|
||||
@return color.join-color-and-opacity-pairs(
|
||||
$theme,
|
||||
@ -318,11 +329,16 @@ $custom-property-prefix: 'checkbox';
|
||||
}
|
||||
|
||||
@mixin _state-layer-size($size) {
|
||||
height: $size;
|
||||
width: $size;
|
||||
.md3-checkbox__ripple {
|
||||
height: $size;
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin _touch-target($size) {
|
||||
height: $size;
|
||||
width: $size;
|
||||
|
||||
.md3-checkbox__native-control {
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
@ -23,8 +23,7 @@
|
||||
// TODO(b/228217731): Remove MDC/MWC dependencies
|
||||
@use 'sass:math';
|
||||
@use '@material/dom/dom';
|
||||
@use '@material/focusring/focus-ring';
|
||||
@use '@material/touch-target/touch-target';
|
||||
@use '../../focus/lib/focus-ring-theme';
|
||||
@use '../../motion/animation';
|
||||
@use '../../sass/var';
|
||||
@use './checkbox-theme';
|
||||
@ -39,14 +38,6 @@ $_selected-checkmark-padding: $_unselected-outline-width;
|
||||
|
||||
.md3-checkbox {
|
||||
@include base_;
|
||||
|
||||
// Turn off focus ring for IE when HCM is turn off. For some reason this
|
||||
// adds space to the bottom on the focused checkbox inside a dialog.
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
.md3-checkbox__focus-ring {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dom.forced-colors-mode {
|
||||
@ -129,6 +120,19 @@ $_selected-checkmark-padding: $_unselected-outline-width;
|
||||
@include child--upgraded_;
|
||||
}
|
||||
}
|
||||
|
||||
.md3-checkbox__ripple {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@include focus-ring-theme.theme(
|
||||
(
|
||||
container-outer-padding-vertical: -2px,
|
||||
container-outer-padding-horizontal: -2px,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin base_ {
|
||||
|
@ -182,7 +182,9 @@ export class Checkbox extends ActionElement {
|
||||
</svg>
|
||||
<div class="md3-checkbox__mixedmark"></div>
|
||||
</div>
|
||||
${this.renderRipple()}
|
||||
<div class="md3-checkbox__ripple">
|
||||
${this.renderRipple()}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user