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

Expose switch custom props and fix width bug

Browse Source
This commit is contained in:
Cory LaViska
2020-08-20 09:09:23 -04:00
parent c6ae475d42
commit ee41a71ccd
2 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/switch/switch.scss
View File

@@ -1,9 +1,13 @@
@import 'component';
/**
* @prop --width: The width of the switch.
* @prop --height: The height of the switch.
* @prop --thumb-size: The size of the thumb.
*/
:host {
--height: var(--sl-toggle-size);
--thumb-size: calc(var(--sl-toggle-size) + 4px);
--track-border-radius: var(--height);
--width: calc(var(--height) * 2);
display: inline-block;
@@ -12,7 +16,6 @@
.switch {
display: inline-flex;
align-items: center;
width: var(--width);
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
@@ -30,7 +33,7 @@
height: var(--height);
background-color: var(--sl-color-gray-80);
border: solid var(--sl-input-border-width) var(--sl-color-gray-80);
border-radius: var(--track-border-radius);
border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
.switch__thumb {