128 lines
2.1 KiB
SCSS
128 lines
2.1 KiB
SCSS
.#{$ns}StatusField {
|
|
white-space: nowrap;
|
|
|
|
&-label {
|
|
font-size: $fontSizeSm;
|
|
margin-left: $gap-sm;
|
|
}
|
|
|
|
@keyframes animation-rolling_red {
|
|
0% {
|
|
left: 0;
|
|
}
|
|
|
|
50% {
|
|
left: px2rem(13px);
|
|
}
|
|
|
|
100% {
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes animation-rolling_blue {
|
|
0% {
|
|
left: $gap-sm + $gap-base;
|
|
}
|
|
|
|
50% {
|
|
left: px2rem(12px);
|
|
}
|
|
|
|
100% {
|
|
left: $gap-sm + $gap-base;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Status-icon {
|
|
&--danger,
|
|
&--primary,
|
|
&--rolling,
|
|
&--success,
|
|
&--warning {
|
|
&::before {
|
|
font-family: 'iconfont';
|
|
content: '\e632';
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
&--rolling {
|
|
color: $warning;
|
|
position: relative;
|
|
left: $gap-md;
|
|
|
|
&::before {
|
|
font-size: inherit;
|
|
color: $danger;
|
|
position: absolute;
|
|
left: 0;
|
|
top: px2rem(1px);
|
|
margin-left: px2rem(-27px);
|
|
animation: animation-rolling_red 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
&::after {
|
|
font-family: 'iconfont';
|
|
content: '\e632';
|
|
font-style: normal;
|
|
font-size: inherit;
|
|
color: $primary;
|
|
position: absolute;
|
|
left: $gap-sm + $gap-base;
|
|
top: px2rem(1px);
|
|
margin-left: px2rem(-39px);
|
|
animation: animation-rolling_blue 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
|
|
&--success {
|
|
&::before {
|
|
color: $success;
|
|
}
|
|
}
|
|
|
|
&--danger {
|
|
&::before {
|
|
color: $danger;
|
|
}
|
|
}
|
|
|
|
&--warning {
|
|
&::before {
|
|
color: $warning;
|
|
}
|
|
}
|
|
|
|
&--primary {
|
|
&::before {
|
|
color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Status-icon--rolling + &-label {
|
|
color: $warning;
|
|
position: relative;
|
|
left: $gap-md;
|
|
}
|
|
|
|
.#{$ns}Status-icon--success + &-label {
|
|
color: $success;
|
|
}
|
|
|
|
.#{$ns}Status-icon--danger + &-label {
|
|
color: $danger;
|
|
}
|
|
|
|
.#{$ns}Status-icon--warning + &-label {
|
|
color: $warning;
|
|
}
|
|
|
|
.#{$ns}Status-icon--primary + &-label {
|
|
color: $primary;
|
|
}
|
|
}
|