amis2/scss/components/_status.scss

128 lines
2.1 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}StatusField {
2019-12-06 09:58:08 +08:00
white-space: nowrap;
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-label {
font-size: $fontSizeSm;
margin-left: $gap-sm;
}
2019-12-06 09:58:08 +08:00
@keyframes animation-rolling_red {
0% {
left: 0;
}
2019-12-06 09:58:08 +08:00
50% {
left: px2rem(13px);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
100% {
left: 0;
}
}
2019-12-06 09:58:08 +08:00
@keyframes animation-rolling_blue {
0% {
left: $gap-sm + $gap-base;
}
2019-12-06 09:58:08 +08:00
50% {
left: px2rem(12px);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
100% {
left: $gap-sm + $gap-base;
}
}
.#{$ns}Status-icon {
&--danger,
&--primary,
&--rolling,
&--success,
&--warning {
&::before {
font-family: 'iconfont';
content: '\e632';
font-style: normal;
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&--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;
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&--success {
&::before {
2019-04-30 11:11:25 +08:00
color: $success;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&--danger {
&::before {
2019-04-30 11:11:25 +08:00
color: $danger;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&--warning {
&::before {
2019-04-30 11:11:25 +08:00
color: $warning;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
&--primary {
&::before {
2019-04-30 11:11:25 +08:00
color: $primary;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
.#{$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;
}
2019-04-30 11:11:25 +08:00
}