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

update toggle/thumb size calcs

Browse Source
This commit is contained in:
lindsaym-fa
2024-05-09 11:44:05 -04:00
parent c3a2fbdfb0
commit cb56535cd5
3 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/checkbox/checkbox.styles.ts
View File

@@ -13,7 +13,7 @@ export default css`
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
--toggle-size: calc(1em * var(--wa-font-line-height-compact));
--toggle-size: calc(1em * var(--wa-form-controls-value-line-height));
display: inline-block;
}

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

@@ -10,8 +10,8 @@ export default css`
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-form-controls-activated-color);
--checked-icon-scale: 0.8;
--toggle-size: calc(1em * var(--wa-font-line-height-compact));
--checked-icon-scale: 0.75;
--toggle-size: calc(1em * var(--wa-form-controls-value-line-height));
display: block;
}

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

@@ -9,11 +9,11 @@ export default css`
--border-style: var(--wa-form-controls-border-style);
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
--height: calc(1em * var(--wa-font-line-height-compact));
--height: calc(1em * var(--wa-form-controls-value-line-height));
--thumb-color: var(--wa-form-controls-resting-color);
--thumb-color-checked: var(--wa-form-controls-background);
--thumb-shadow: none;
--thumb-size: calc(var(--height) - var(--border-width) * 4);
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
--width: calc(var(--height) * 1.75);
display: inline-block;
@@ -65,7 +65,6 @@ export default css`
height: var(--thumb-size);
background-color: var(--thumb-color);
border-radius: 50%;
border: solid var(--border-width) var(--thumb-color);
box-shadow: var(--thumb-shadow);
translate: calc((var(--width) - var(--height)) / -2);
transition:
@@ -97,7 +96,6 @@ export default css`
.switch--checked .switch__control .switch__thumb {
background: var(--thumb-color-checked);
border-color: var(--thumb-color-checked);
translate: calc((var(--width) - var(--height)) / 2);
}