Skip to content

Commit

Permalink
fixup! fix(material/slide-toggle): fix m3 width, height, and margin
Browse files Browse the repository at this point in the history
  • Loading branch information
wagnermaciel committed Jan 30, 2024
1 parent 73b627e commit 0137d85
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 24 deletions.
12 changes: 4 additions & 8 deletions src/material-experimental/theming/_custom-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1089,14 +1089,10 @@
/// @return {Map} A set of custom tokens for the mat-slide-toggle
@function switch($systems, $exclude-hardcoded) {
@return ((
unselected-handle-width: 16px,
unselected-handle-height: 16px,
selected-handle-width: 24px,
selected-handle-height: 24px,
with-icon-handle-width: 24px,
with-icon-handle-height: 24px,
pressed-handle-width: 28px,
pressed-handle-height: 28px,
unselected-handle-size: 16px,
selected-handle-size: 24px,
with-icon-handle-size: 24px,
pressed-handle-size: 28px,
selected-handle-margin-left: 24px,
selected-with-icon-handle-margin-left: 24px,
selected-pressed-handle-margin-left: 22px,
Expand Down
12 changes: 4 additions & 8 deletions src/material/core/tokens/m2/mat/_switch.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,10 @@ $prefix: (mat, switch);
// but may be in a future version of the theming API.
@function get-unthemable-tokens() {
@return (
unselected-handle-width: 20px,
unselected-handle-height: 20px,
selected-handle-width: 20px,
selected-handle-height: 20px,
pressed-handle-width: 20px,
pressed-handle-height: 20px,
with-icon-handle-width: 20px,
with-icon-handle-height: 20px,
unselected-handle-size: 20px,
selected-handle-size: 20px,
pressed-handle-size: 20px,
with-icon-handle-size: 20px,

selected-handle-margin-left: 0,
selected-with-icon-handle-margin-left: 0,
Expand Down
16 changes: 8 additions & 8 deletions src/material/slide-toggle/slide-toggle.scss
Original file line number Diff line number Diff line change
Expand Up @@ -130,23 +130,23 @@
@include token-utils.use-tokens(m2-mat-switch.$prefix, m2-mat-switch.get-token-slots()) {
.mat-mdc-slide-toggle {
.mdc-switch--unselected .mdc-switch__handle {
@include token-utils.create-token-slot(width, unselected-handle-width);
@include token-utils.create-token-slot(height, unselected-handle-height);
@include token-utils.create-token-slot(width, unselected-handle-size);
@include token-utils.create-token-slot(height, unselected-handle-size);
}

.mdc-switch--selected .mdc-switch__handle {
@include token-utils.create-token-slot(width, selected-handle-width);
@include token-utils.create-token-slot(height, selected-handle-height);
@include token-utils.create-token-slot(width, selected-handle-size);
@include token-utils.create-token-slot(height, selected-handle-size);
}

.mdc-switch__handle:has(.mdc-switch__icons) {
@include token-utils.create-token-slot(width, with-icon-handle-width);
@include token-utils.create-token-slot(height, with-icon-handle-height);
@include token-utils.create-token-slot(width, with-icon-handle-size);
@include token-utils.create-token-slot(height, with-icon-handle-size);
}

&:active .mdc-switch:not(.mdc-switch--disabled) .mdc-switch__handle {
@include token-utils.create-token-slot(width, pressed-handle-width);
@include token-utils.create-token-slot(height, pressed-handle-height);
@include token-utils.create-token-slot(width, pressed-handle-size);
@include token-utils.create-token-slot(height, pressed-handle-size);
}
}
}
Expand Down

0 comments on commit 0137d85

Please sign in to comment.