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

Add track and indicator vars to spniner

Browse Source
This commit is contained in:
Cory LaViska
2020-07-15 07:35:51 -04:00
parent 28d06cff4c
commit eeae06dd73
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/button/button.scss
View File

@@ -374,7 +374,7 @@
}
sl-spinner {
--color: currentColor;
--indicator-color: currentColor;
--stroke-width: 1px;
position: absolute;
height: 1em;

12
src/components/spinner/spinner.scss
View File

@@ -1,10 +1,16 @@
@import 'component';
/**
* @prop --track-color: The color of the spinner's track.
* @prop --indicator-color: The color of the spinner's indicator.
* @prop --stroke-width: The width of the indicator.
*/
:host {
display: inline-flex;
--track-color: transparent;
--indicator-color: var(--sl-color-primary-50);
--stroke-width: 2px;
--color: var(--sl-color-primary-50);
}
.spinner {
@@ -12,8 +18,8 @@
width: 1em;
height: 1em;
border-radius: 50%;
border: solid var(--stroke-width) var(--color);
border-bottom-color: transparent;
border: solid var(--stroke-width) var(--indicator-color);
border-bottom-color: var(--track-color);
animation: 1s linear infinite spin;
}