js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify switch thumb calc (#490)

Browse Source
This commit is contained in:
David Gonzalez
2021-07-28 15:03:22 +02:00
committed by GitHub
parent 807cba18d1
commit b13e2c32ff
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/switch/switch.styles.ts
View File

@@ -43,7 +43,7 @@ export default css`
background-color: var(--sl-color-white);
border-radius: 50%;
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));
transform: translateX(calc((var(--width) - var(--height)) / -2));
transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
}
@@ -86,7 +86,7 @@ export default css`
.switch--checked .switch__control .switch__thumb {
background-color: var(--sl-color-white);
border-color: var(--sl-color-primary-500);
transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));
transform: translateX(calc((var(--width) - var(--height)) / 2));
}
/* Checked + hover */