93 lines
1.6 KiB
SCSS
93 lines
1.6 KiB
SCSS
.column-indicator {
|
|
overflow: visible;
|
|
transform: translate(-50%, -50%);
|
|
|
|
@include abs-position(50%, auto, auto, 50%);
|
|
|
|
&--loading & {
|
|
&__figure {
|
|
border: 6px solid lighten($ui-base-color, 26%);
|
|
}
|
|
}
|
|
|
|
&--missing & {
|
|
&__figure {
|
|
&:before {
|
|
@include pseudo('!');
|
|
@include text-sizing(40px, 600, 1, center);
|
|
@include abs-position(0, 0, 0, 0, false);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__figure {
|
|
transform: translate(-50%, -50%);
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
|
|
@include circle(42px);
|
|
@include abs-position(50%, auto, auto, 50%);
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
float: left;
|
|
margin-left: 50%;
|
|
transform: translateX(-50%);
|
|
margin: 82px 0 0 50%;
|
|
white-space: nowrap;
|
|
color: $dark-text-color;
|
|
|
|
@include text-sizing(14px, 400);
|
|
}
|
|
}
|
|
|
|
.no-reduce-motion .column-indicator--loading span {
|
|
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
|
|
.no-reduce-motion .column-indicator--loading .column-indicator__figure {
|
|
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
|
|
}
|
|
|
|
@keyframes loader-label {
|
|
0% {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
30% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.25;
|
|
}
|
|
}
|
|
|
|
@keyframes loader-figure {
|
|
0% {
|
|
background-color: lighten($ui-base-color, 26%);
|
|
|
|
@include size(0);
|
|
}
|
|
|
|
29% {
|
|
background-color: lighten($ui-base-color, 26%);
|
|
}
|
|
|
|
30% {
|
|
background-color: transparent;
|
|
border-width: 21px;
|
|
opacity: 1;
|
|
|
|
@include size(42px);
|
|
}
|
|
|
|
100% {
|
|
border-width: 0;
|
|
opacity: 0;
|
|
background-color: transparent;
|
|
|
|
@include size(42px);
|
|
}
|
|
} |