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

Scope modifiers and add border-width-small/big

Browse Source
This commit is contained in:
Cory LaViska
2017-08-11 16:34:59 -04:00
parent 931a53f5e3
commit ad024ac892
3 changed files with 16 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/shoelace.css vendored
View File

File diff suppressed because one or more lines are too long

32
source/css/loaders.css
View File

@@ -1,7 +1,7 @@
/*! Loaders */
@keyframes loader {
0% { transform: rotate(0deg); }
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@@ -19,20 +19,6 @@
margin: var(--loader-spacing-y) var(--loader-spacing-x);
}
.loader-small,
.loader-bg-small::after {
border-width: calc(var(--loader-border-width) / 2);
width: calc(var(--loader-size) / 2);
height: calc(var(--loader-size) / 2);
}
.loader-big,
.loader-bg-big::after {
border-width: calc(var(--loader-border-width) * 1.5);
width: calc(var(--loader-size) * 2);
height: calc(var(--loader-size) * 2);
}
.loader-bg {
position: relative !important;
}
@@ -45,14 +31,14 @@
margin: 0;
}
.loader-bg-small::after {
position: absolute;
top: calc(50% - var(--loader-size) / 4);
left: calc(50% - var(--loader-size) / 4);
.loader-small,
.loader-bg-small {
--loader-size: var(--loader-size-small);
--loader-border-width: var(--loader-border-width-small);
}
.loader-bg-big::after {
position: absolute;
top: calc(50% - var(--loader-size) / 1);
left: calc(50% - var(--loader-size) / 1);
.loader-big,
.loader-bg-big {
--loader-size: var(--loader-size-big);
--loader-border-width: var(--loader-border-width-big);
}

6
source/css/variables.css
View File

@@ -204,8 +204,12 @@
/* Loaders */
--loader-bg-color: var(--component-bg-color);
--loader-border-color: var(--color-primary);
--loader-border-width: .25rem;
--loader-border-width: .2rem;
--loader-border-width-small: calc(var(--loader-border-width) / 2);
--loader-border-width-big: calc(var(--loader-border-width) * 2);;
--loader-size: 2rem;
--loader-size-small: calc(var(--loader-size) / 2);
--loader-size-big: calc(var(--loader-size) * 2);
--loader-speed: 750ms;
--loader-spacing-x: var(--component-spacing-small);
--loader-spacing-y: 0;