gab-social/app/javascript/gabsocial/components/column_indicator/index.scss
mgabdev 42917806e9 Updated all basic components
removed unnecessary components, combined where necessary
added each component to a folder, added individual css style modules
optimized some component rendering flows
removed functional components in favor of pure components
linted and formatted all of the files
2019-08-03 02:00:45 -04:00

51 lines
1.1 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);
}