commons/admin/src/components/molecules/AccountStatus/Indicator.module.scss

35 lines
712 B
SCSS

@import '../../../styles/variables';
.status {
display: inline-block;
position: relative;
cursor: help;
padding: .5rem;
}
// default: red square
.statusIndicator {
width: $font-size-small;
height: $font-size-small;
display: block;
background: $red;
}
// yellow triangle
.statusIndicatorCloseEnough {
composes: statusIndicator;
background: none;
width: 0;
height: 0;
border-left: $font-size-small / 1.7 solid transparent;
border-right: $font-size-small / 1.7 solid transparent;
border-bottom: $font-size-small solid $yellow;
}
// green circle
.statusIndicatorActive {
composes: statusIndicator;
border-radius: 50%;
background: $green;
}