KNACSS/sass/components/_badges.scss

51 lines
880 B
SCSS
Raw Permalink Normal View History

2017-07-31 13:24:04 +02:00
/* ----------------------------- */
/* ==Badges */
/* ----------------------------- */
2017-07-31 15:49:38 +02:00
/* use .badge-- classes for variants */
.badge {
display: inline-block;
padding: $spacer-tiny;
border-radius: 50%;
2017-07-31 15:49:38 +02:00
color: $color-base;
background-color: $color-muted;
2017-07-31 18:18:45 +02:00
line-height: 1;
2017-10-03 11:12:59 +02:00
&::before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
2017-07-31 15:49:38 +02:00
}
.badge {
@each $name, $background-color, $color, $border in $variants-list {
&--#{$name} {
@extend .badge;
background-color: $background-color;
color: $color;
}
}
}
// badge state variants
.badge {
&--small {
font-size: $font-size-base - 0.4rem;
2017-07-31 15:49:38 +02:00
}
&--big {
font-size: $font-size-base + 0.4rem;
2017-07-31 15:49:38 +02:00
}
&.disabled,
&--disabled {
opacity: 0.5;
cursor: not-allowed;
}
2017-07-31 16:01:20 +02:00
&:empty {
display: none;
}
2017-07-31 15:49:38 +02:00
}