Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Skeleton CSS

Browse Source
This commit is contained in:
Adina Țeudan 2022-12-21 13:16:24 +02:00
parent 2ad269d1d6
commit 80535298ae
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/styles/common-skeleton.scss
View File

@ -1,6 +1,6 @@
/* sk-w-${n} (in pixels) */ /* sk-w-${n} (in pixels) */
$skeleton-widths: (12, 40, 56, 60, 70, 110, 200, 250, 340); $skeleton-widths: (12, 40, 56, 60, 70, 100, 200, 250, 340);
@each $w in $skeleton-widths { @each $w in $skeleton-widths {
.sk-w-#{$w} { .sk-w-#{$w} {
max-width: #{$w}px; max-width: #{$w}px;
@ -17,6 +17,7 @@ $skeleton-heights: (6, 8, 12, 20, 24);
@each $h in $skeleton-heights { @each $h in $skeleton-heights {
.sk-h-#{$h} { .sk-h-#{$h} {
height: #{$h}px; height: #{$h}px;
min-height: #{$h}px;
} }
} }
@ -45,14 +46,14 @@ $skeleton-heights: (6, 8, 12, 20, 24);
.sk-circle { .sk-circle {
border-radius: 50%; border-radius: 50%;
}
&.w-24 { /* .sk-circle.w-${n} */
width: 24px;
height: 24px;
}
&.w-16 { $skeleton-circle-widths: (16, 24, 32);
width: 16px; @each $w in $skeleton-circle-widths {
height: 16px; .sk-circle.w-#{$w} {
width: #{$w}px;
height: #{$w}px;
} }
} }