From 0d721d854a85945dae76d9427b4602f1cdc9504a Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Wed, 3 Jun 2020 17:16:30 +0200 Subject: [PATCH 1/6] feat(skeleton-loader): add mask for list group --- scss/styles/_skeleton-loader.scss | 10 ++++++++++ .../skeleton-loader.component.html | 8 ++++++++ svg/list-mask.svg | 12 ++++++++++++ svg/mask-template.psd | Bin 233435 -> 327889 bytes 4 files changed, 30 insertions(+) create mode 100644 svg/list-mask.svg diff --git a/scss/styles/_skeleton-loader.scss b/scss/styles/_skeleton-loader.scss index 6170468..7e02bb2 100644 --- a/scss/styles/_skeleton-loader.scss +++ b/scss/styles/_skeleton-loader.scss @@ -2,6 +2,7 @@ $skeleton-loader-mask-color: $white; $skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")); $skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23")); $skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")); +$skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='40'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 24h1v16H0z'/%3E%3C/svg%3E"), "#", "%23")); .skeleton-loader { position: relative; overflow: hidden; @@ -36,6 +37,15 @@ $skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Cs width: 100vw; top: 0; } + &.skeleton-loader-list { + max-width: 320px; + height: 224px; + &::before { + background-size: 1px 40px; + background-repeat: repeat; + background-image: $skeleton-loader-mask-list; + } + } &.skeleton-loader-table { max-height: 100%; height: 181px; diff --git a/src/example/components/skeleton-loader/skeleton-loader.component.html b/src/example/components/skeleton-loader/skeleton-loader.component.html index 414f712..a70ddd7 100644 --- a/src/example/components/skeleton-loader/skeleton-loader.component.html +++ b/src/example/components/skeleton-loader/skeleton-loader.component.html @@ -22,6 +22,14 @@

Skeleton for content (default)

+
+

Skeleton for list content

+
+

The skeleton loader for list content will use the full width of its container, however the mask will never be wider than 320px.

+
+ +
+

Skeleton fill

diff --git a/svg/list-mask.svg b/svg/list-mask.svg new file mode 100644 index 0000000..acf1d8f --- /dev/null +++ b/svg/list-mask.svg @@ -0,0 +1,12 @@ + + + + + + + + diff --git a/svg/mask-template.psd b/svg/mask-template.psd index 6967c4bc9d025be81f57c94baf8b462ce9fdbc58..10452e87b7d79700a2222fc48297da8fa68751ff 100644 GIT binary patch literal 327889 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 zj!~gJMoEQ~>ydmRz}zc!&R^YR;$}B*Vq`@+YZP3%HDl>%&rW-yF;_U^hn&b5YUNz+3~ECotmUja+^d$(w)rp zyLpGUn;q#B{hr1PS+BHYUpD3>ic>OZi$Cc8!5ilay-FuCJeAA2`JxW1@<=f^7CZx0 zG_gj9rdY!cSmkA9Z@M7enCq!CUCh$qpQhjJ@?0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH z0T2KI5C8!X009sH0T2KI5CDNoOyG@|AiXz;i~Dz>_wU{$s{8Lk=eJ2z_upcj--Xh> zl=fX>uD?DJ{PTPCTsfU9-b%K);_}-n9X*%MfAm~?bH!50HdkD*U1S2~xgOX80T2KI z5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X z009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH z0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI z5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X z009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH z0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI z5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X z009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH z0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI z5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X z009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH z0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI z5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X009sH0T2KI5C8!X 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

?rN?`n7=Lth)1AYGrd7?)b+>dCkcvfC$i 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 Date: Thu, 4 Jun 2020 09:10:29 +0200 Subject: [PATCH 2/6] feat(skeleton-loader): add support for `bg-dark` and `bg-light` --- scss/styles/_skeleton-loader.scss | 77 +++++++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 5 deletions(-) diff --git a/scss/styles/_skeleton-loader.scss b/scss/styles/_skeleton-loader.scss index 7e02bb2..6f09a02 100644 --- a/scss/styles/_skeleton-loader.scss +++ b/scss/styles/_skeleton-loader.scss @@ -1,8 +1,19 @@ -$skeleton-loader-mask-color: $white; -$skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")); -$skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23")); -$skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")); -$skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='40'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 24h1v16H0z'/%3E%3C/svg%3E"), "#", "%23")); +$skeleton-loader-mask-color: $white !default; +$skeleton-loader-mask-color-dark: $dark !default; +$skeleton-loader-mask-color-light: $light !default; +$skeleton-loader-mask: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='332'%3E%3Cpath d='M0 0h768v332H0V0zm0 0h220v48H0V0zm0 64h308v96H0V64zm0 112h418v96H0v-96zM324 64h444v96H324V64zm110 112h304v96H434v-96zM0 288h188v44H0v-44zm204 0h154v44H204v-44z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default; +$skeleton-loader-mask-dark: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-light: str-replace($skeleton-loader-mask, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-fill-pixel: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 0h1v1H0z'/%3E%3C/svg%3E"), "#", "%23")) !default; +$skeleton-loader-mask-fill-pixel-dark: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-fill-pixel-light: str-replace($skeleton-loader-mask-fill-pixel, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='180'%3E%3Cpath d='M0 0h768v180H0V0zm0 10h90v24H0V10zm0 45h70v24H0V55zm0 45h80v24H0v-24zm0 45h90v24H0v-24zM114 10h100v24H114V10zm0 45h120v24H114V55zm0 45h130v24H114v-24zm0 45h110v24H114v-24zM268 10h100v24H268V10zm0 45h80v24h-80V55zm0 45h100v24H268v-24zm0 45h110v24H268v-24zM402 10h90v24h-90V10zm0 45h70v24h-70V55zm0 45h80v24h-80v-24zm0 45h90v24h-90v-24zM516 10h90v24h-90V10zm0 45h110v24H516V55zm0 45h120v24H516v-24zm0 45h100v24H516v-24zm144 0h84v24h-84v-24zm0-45h74v24h-74v-24zm0-45h64v24h-64V55zm0-45h84v24h-84V10zM0 44h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1zm0 45h768v1H0v-1z' fill='#{$skeleton-loader-mask-color}' fill-rule='evenodd' /%3E%3C/svg%3E"), "#", "%23")) !default; +$skeleton-loader-mask-table-dark: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-table-light: str-replace($skeleton-loader-mask-table, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='40'%3E%3Cpath fill='#{$skeleton-loader-mask-color}' d='M0 24h1v16H0z'/%3E%3C/svg%3E"), "#", "%23")) !default; +$skeleton-loader-mask-list-dark: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-dark + '\''}, "#", "%23")) !default; +$skeleton-loader-mask-list-light: str-replace($skeleton-loader-mask-list, str-replace(#{'fill=\'' + $skeleton-loader-mask-color + '\''}, "#", "%23"), str-replace(#{'fill=\'' + $skeleton-loader-mask-color-light + '\''}, "#", "%23")) !default; + .skeleton-loader { position: relative; overflow: hidden; @@ -74,6 +85,62 @@ $skeleton-loader-mask-list: escape-svg(str-replace(url("data:image/svg+xml,%3Csv background: none; } } + &.bg-dark { + &::before { + background-size: 768px 332px, 100% 100%; + background-repeat:no-repeat; + background-image: $skeleton-loader-mask-dark, $skeleton-loader-mask-fill-pixel-dark; + background-position-x: 0, 768px; + } + &::after { + background: linear-gradient(80deg, lighten($dark, 5%) 10%, lighten($dark, 10%) 80%, transparent 90%), lighten($dark, 5%); + background-size: 50% 100%; + background-repeat: no-repeat; + } + &.skeleton-loader-list { + &::before { + background-size: 1px 40px; + background-repeat: repeat; + background-image: $skeleton-loader-mask-list-dark; + } + } + &.skeleton-loader-table { + &::before { + background-size: 768px 180px; + background-position-y: 1px; + background-repeat: repeat; + background-image: $skeleton-loader-mask-table-dark; + } + } + } + &.bg-light { + &::before { + background-size: 768px 332px, 100% 100%; + background-repeat:no-repeat; + background-image: $skeleton-loader-mask-light, $skeleton-loader-mask-fill-pixel-light; + background-position-x: 0, 768px; + } + &::after { + background: linear-gradient(80deg, darken($light, 5%) 10%, darken($light, 10%) 80%, transparent 90%), darken($light, 5%); + background-size: 50% 100%; + background-repeat: no-repeat; + } + &.skeleton-loader-list { + &::before { + background-size: 1px 40px; + background-repeat: repeat; + background-image: $skeleton-loader-mask-list-light; + } + } + &.skeleton-loader-table { + &::before { + background-size: 768px 180px; + background-position-y: 1px; + background-repeat: repeat; + background-image: $skeleton-loader-mask-table-light; + } + } + } } @include media-breakpoint-up(sm) { .skeleton-loader { From ea1e6fc114486b41f5d6070d0e561e28fc2b38e5 Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Thu, 4 Jun 2020 09:10:59 +0200 Subject: [PATCH 3/6] docs(skeleton-loader): add more examples --- .../skeleton-loader.component.html | 40 ++++++++++++++----- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/example/components/skeleton-loader/skeleton-loader.component.html b/src/example/components/skeleton-loader/skeleton-loader.component.html index a70ddd7..01b9d81 100644 --- a/src/example/components/skeleton-loader/skeleton-loader.component.html +++ b/src/example/components/skeleton-loader/skeleton-loader.component.html @@ -7,6 +7,7 @@

When and how to use them?

We currently have templates for the following:
  • Content (default)
    • +
  • List group
  • Single field
  • Table
@@ -114,6 +115,23 @@
With delay
+
+

Custom fill background

+
+ By default the skeleton loader uses white as fill color (for use against white backgrounds) but it's also possible to use skeleton loaders against dark (.bg-dark) and light (.bg-light). All skeleton loaders support custom fill colors. +
+
+
With dark background
+

Just add bg-dark to the skeleton loader element.

+
+
+
+
With light background
+

Just add bg-light to the skeleton loader element.

+
+ +
+

More examples

@@ -215,39 +233,39 @@
Form with fields and button

Example with cards

-
+
-
+
-
+
-
+
-
+
-
-
-
+
+
+
-
-
-
+
+
+
From 47498d1f02eb259bbcc33483a20841396b00db2d Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Thu, 4 Jun 2020 11:07:22 +0200 Subject: [PATCH 4/6] fix(spinner): adjust sizes and animation --- scss/styles/_spinners.scss | 145 ++++++++++++++++++------------------- 1 file changed, 72 insertions(+), 73 deletions(-) diff --git a/scss/styles/_spinners.scss b/scss/styles/_spinners.scss index e98ac8f..1997348 100644 --- a/scss/styles/_spinners.scss +++ b/scss/styles/_spinners.scss @@ -1,7 +1,7 @@ -$spinner-sm-size: 1rem; -$spinner-size: 2rem; -$spinner-md-size: 4rem; -$spinner-lg-size: 6rem; +$spinner-xs-size: 1rem !default; +$spinner-sm-size: 2rem !default; +$spinner-md-size: 4rem !default; +$spinner-lg-size: 6rem !default; .spinner, .spinner:before, @@ -10,69 +10,71 @@ $spinner-lg-size: 6rem; } .spinner { color: $green; + background: $white; position: relative; - width: $spinner-size; - height: $spinner-size; - box-shadow: inset 0 0 0 3.5px; + width: $spinner-md-size; + height: $spinner-md-size; + box-shadow: inset 0 0 0 5px; transform: translateZ(0); animation: rotate-circle 1s infinite linear; &:after { - width: $spinner-size/2 + 0.2rem; //5.2em; - height: $spinner-size + 0.2rem; // 10.2em; + width: $spinner-md-size/2; //5.2em; + height: $spinner-md-size; // 10.2em; background: $white; - border-radius: 0 $spinner-size + 0.2rem $spinner-size + 0.2rem 0;//0 10.2em 10.2em 0; - top: -0.1rem; - left: $spinner-size/2 + 0.1rem;//5.1em; - transform-origin: 0 $spinner-size/2 + 0.1rem;//0 5.1em; + border-radius: 0 $spinner-md-size $spinner-md-size 0;//0 10.2em 10.2em 0; + //top: -0.1rem; + left: $spinner-md-size/2;//5.1em; + transform-origin: 0 $spinner-md-size/2;//0 5.1em; animation: rotate-circle 2s infinite ease; } &:before { - width: $spinner-size/2 + 0.2rem; //5.2em; - height: $spinner-size + 0.2rem; //10.2em; - background: $white; - border-radius: $spinner-size + 0.2rem 0 0 $spinner-size + 0.2rem; // 10.2em 0 0 10.2em; - top: -0.1rem; - left: -0.1rem; - transform-origin: $spinner-size/2 + 0.2rem $spinner-size/2 + 0.1rem; // 5.2em 5.1em; + width: $spinner-md-size/2; //5.2em; + height: $spinner-md-size; //10.2em; + background: $spinner-fill-color; + border-radius: $spinner-md-size 0 0 $spinner-md-size; // 10.2em 0 0 10.2em; + //top: -0.1rem; + //left: -0.1rem; + left: 0; + transform-origin: $spinner-md-size/2 $spinner-md-size/2; // 5.2em 5.1em; animation: rotate-circle 2s infinite ease 1.5s; } } -.spinner.spinner-sm, .btn .spinner { - width: $spinner-sm-size; - height: $spinner-sm-size; +.spinner.spinner-xs, .btn .spinner { + width: $spinner-xs-size; + height: $spinner-xs-size; box-shadow: inset 0 0 0 2px; &:before { - width: $spinner-sm-size/2 + 0.2rem; - height: $spinner-sm-size + 0.2rem; - border-radius: $spinner-sm-size + 0.2rem 0 0 $spinner-sm-size + 0.2rem; - transform-origin: $spinner-sm-size/2 + 0.2rem $spinner-sm-size/2 + 0.1rem; + width: $spinner-xs-size/2; + height: $spinner-xs-size; + border-radius: $spinner-xs-size 0 0 $spinner-xs-size; + transform-origin: $spinner-xs-size/2 $spinner-xs-size/2; } &:after { - width: $spinner-sm-size/2 + 0.2rem; //5.2em; - height: $spinner-sm-size + 0.2rem; // 10.2em; - border-radius: 0 $spinner-sm-size + 0.2rem $spinner-sm-size + 0.2rem 0;//0 10.2em 10.2em 0; - left: $spinner-sm-size/2 + 0.1rem;//5.1em; - transform-origin: 0 $spinner-sm-size/2 + 0.1rem;//0 5.1em; + width: $spinner-xs-size/2; //5.2em; + height: $spinner-xs-size; // 10.2em; + border-radius: 0 $spinner-xs-size $spinner-xs-size 0;//0 10.2em 10.2em 0; + left: $spinner-xs-size/2;//5.1em; + transform-origin: 0 $spinner-xs-size/2;//0 5.1em; } } -.spinner.spinner-md { - width: $spinner-md-size; - height: $spinner-md-size; - box-shadow: inset 0 0 0 5px; +.spinner.spinner-sm { + width: $spinner-sm-size; + height: $spinner-sm-size; + box-shadow: inset 0 0 0 3.5px; &:before { - width: $spinner-md-size/2 + 0.2rem; - height: $spinner-md-size + 0.2rem; - border-radius: $spinner-md-size + 0.2rem 0 0 $spinner-md-size + 0.2rem; - transform-origin: $spinner-md-size/2 + 0.2rem $spinner-md-size/2 + 0.1rem; + width: $spinner-sm-size/2; + height: $spinner-sm-size; + border-radius: $spinner-sm-size 0 0 $spinner-sm-size; + transform-origin: $spinner-sm-size/2 $spinner-sm-size/2; } &:after { - width: $spinner-md-size/2 + 0.2rem; //5.2em; - height: $spinner-md-size + 0.2rem; // 10.2em; - border-radius: 0 $spinner-md-size + 0.2rem $spinner-md-size + 0.2rem 0;//0 10.2em 10.2em 0; - left: $spinner-md-size/2 + 0.1rem;//5.1em; - transform-origin: 0 $spinner-md-size/2 + 0.1rem;//0 5.1em; + width: $spinner-sm-size/2; //5.2em; + height: $spinner-sm-size; // 10.2em; + border-radius: 0 $spinner-sm-size $spinner-sm-size 0;//0 10.2em 10.2em 0; + left: $spinner-sm-size/2;//5.1em; + transform-origin: 0 $spinner-sm-size/2;//0 5.1em; } } @@ -81,43 +83,40 @@ $spinner-lg-size: 6rem; height: $spinner-lg-size; box-shadow: inset 0 0 0 7px; &:before { - width: $spinner-lg-size/2 + 0.2rem; - height: $spinner-lg-size + 0.2rem; - border-radius: $spinner-lg-size + 0.2rem 0 0 $spinner-lg-size + 0.2rem; - transform-origin: $spinner-lg-size/2 + 0.2rem $spinner-lg-size/2 + 0.1rem; + width: $spinner-lg-size/2; + height: $spinner-lg-size; + border-radius: $spinner-lg-size 0 0 $spinner-lg-size; + transform-origin: $spinner-lg-size/2 $spinner-lg-size/2; } &:after { - width: $spinner-lg-size/2 + 0.2rem; //5.2em; - height: $spinner-lg-size + 0.2rem; // 10.2em; - border-radius: 0 $spinner-lg-size + 0.2rem $spinner-lg-size + 0.2rem 0;//0 10.2em 10.2em 0; - left: $spinner-lg-size/2 + 0.1rem;//5.1em; - transform-origin: 0 $spinner-lg-size/2 + 0.1rem;//0 5.1em; + width: $spinner-lg-size/2; //5.2em; + height: $spinner-lg-size; // 10.2em; + border-radius: 0 $spinner-lg-size $spinner-lg-size 0;//0 10.2em 10.2em 0; + left: $spinner-lg-size/2;//5.1em; + transform-origin: 0 $spinner-lg-size/2;//0 5.1em; } } - -.spinner:before, -.spinner:after { +.spinner::before, +.spinner::after { position: absolute; content: ''; + box-shadow: $white 0 0 0 1px; } .spinner.light { - &:before, - &:after { - background: $light; - } + background: $light } .btn { .spinner { + background: $btn-disabled-color; //width: 1rem; //height: 1rem; color: $white; display: inline-block; vertical-align: -3px; - &:before, - &:after { - background: $btn-disabled-color; + &::before, &::after { + box-shadow: $btn-disabled-color 0 0 0 1px; } } &[class*=" btn-outline-"] { @@ -126,9 +125,9 @@ $spinner-lg-size: 6rem; } .spinner { color: $btn-disabled-color; - &:before, - &:after { - background: $gray-100; + background: $white; + &::before, &::after { + box-shadow: $white 0 0 0 1px; } } } @@ -138,9 +137,9 @@ $spinner-lg-size: 6rem; } .spinner { color: $btn-disabled-color; - &:before, - &:after { - background: $white; + background: $white; + &::before, &::after { + box-shadow: $white 0 0 0 1px; } } } @@ -156,14 +155,14 @@ $spinner-lg-size: 6rem; } .spinner-sq { - width: $spinner-size; - height: $spinner-size; + width: $spinner-md-size; + height: $spinner-md-size; background-color: $green; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } -.spinner-sq.spinner-sm,.btn > .spinner-sq { +.spinner-sq.spinner-xs,.btn > .spinner-sq { width: 1rem; height: 1rem; } From 1a57ac6c51f2d59aa06a59bddb1f8de34463b09b Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Thu, 4 Jun 2020 11:08:23 +0200 Subject: [PATCH 5/6] feat(spinner): add support for different background colors closes #306 --- scss/styles/_spinners.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/scss/styles/_spinners.scss b/scss/styles/_spinners.scss index 1997348..8b7f047 100644 --- a/scss/styles/_spinners.scss +++ b/scss/styles/_spinners.scss @@ -2,6 +2,7 @@ $spinner-xs-size: 1rem !default; $spinner-sm-size: 2rem !default; $spinner-md-size: 4rem !default; $spinner-lg-size: 6rem !default; +$spinner-fill-color: inherit !default; .spinner, .spinner:before, @@ -20,7 +21,7 @@ $spinner-lg-size: 6rem !default; &:after { width: $spinner-md-size/2; //5.2em; height: $spinner-md-size; // 10.2em; - background: $white; + background: $spinner-fill-color; border-radius: 0 $spinner-md-size $spinner-md-size 0;//0 10.2em 10.2em 0; //top: -0.1rem; left: $spinner-md-size/2;//5.1em; @@ -96,6 +97,15 @@ $spinner-lg-size: 6rem !default; transform-origin: 0 $spinner-lg-size/2;//0 5.1em; } } +.spinner { + @each $color, $value in $theme-colors { + &.bg-#{$color} { + &::before, &::after { + box-shadow: $value 0 0 0 1px; + } + } + } +} .spinner::before, .spinner::after { position: absolute; From 72496743e9272ed4880adcf2829f03d44288c66c Mon Sep 17 00:00:00 2001 From: Robert Hjalmers Date: Thu, 4 Jun 2020 11:08:44 +0200 Subject: [PATCH 6/6] docs(spinner): update examples --- .../spinners/spinners.component.html | 135 +++++++++++++++--- 1 file changed, 112 insertions(+), 23 deletions(-) diff --git a/src/example/components/spinners/spinners.component.html b/src/example/components/spinners/spinners.component.html index cb04470..c9c90f0 100644 --- a/src/example/components/spinners/spinners.component.html +++ b/src/example/components/spinners/spinners.component.html @@ -1,20 +1,20 @@

Spinners

-

Some experimental spinners

+

Some experimental spinners intended to be used on solid backgrounds.

-
-
- @@ -24,7 +24,7 @@

Spinners

+
+ +
+
+ +
+
+ +
+
+
+

And so on... spinners can be used on any solid background by adding a bg-* class either to the spinner element itself or to it's parent container. See available bg classes under the colors section.

+ +