Skip to content

Commit

Permalink
Merge pull request #382 from sebgroup/develop
Browse files Browse the repository at this point in the history 
cut release
  • Loading branch information
@hjalmers
hjalmers authored Jun 4, 2020
2 parents 600adf7 + 34ca374 commit 74ebf1e
Show file tree
Hide file tree
Showing 6 changed files with 325 additions and 112 deletions.
85 changes: 81 additions & 4 deletions scss/styles/_skeleton-loader.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +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-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;
Expand Down Expand Up @@ -36,6 +48,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;
Expand Down Expand Up @@ -64,6 +85,62 @@ $skeleton-loader-mask-table: escape-svg(str-replace(url("data:image/svg+xml,%3Cs
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 {
Expand Down
157 changes: 83 additions & 74 deletions scss/styles/_spinners.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
$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-fill-color: inherit !default;

.spinner,
.spinner:before,
Expand All @@ -10,69 +11,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;
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;
width: $spinner-md-size/2; //5.2em;
height: $spinner-md-size; // 10.2em;
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;
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;
}
}

Expand All @@ -81,43 +84,49 @@ $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 {
@each $color, $value in $theme-colors {
&.bg-#{$color} {
&::before, &::after {
box-shadow: $value 0 0 0 1px;
}
}
}
}
.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-"] {
Expand All @@ -126,9 +135,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;
}
}
}
Expand All @@ -138,9 +147,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;
}
}
}
Expand All @@ -156,14 +165,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;
}
Expand Down
Loading

0 comments on commit 74ebf1e

Please sign in to comment.