open-nomad/ui/app/styles/components/badge.scss
Michael Lange a5a659a98a Preemptions count and filtering on client detail page
Show the count in the allocations table next to the existing total alloc
count badge. Clicking either will filter by all or by preemptions.
2019-04-22 16:40:04 -07:00

51 lines
849 B
SCSS

.badge {
font-size: $size-7;
height: 1.5em;
line-height: 1;
border-radius: $radius;
padding: 0.25em 0.75em;
border: none;
@each $name, $pair in $colors {
$color: nth($pair, 1);
$color-invert: nth($pair, 2);
&.is-#{$name} {
background-color: $color;
color: $color-invert;
&.is-faded {
color: rgba($color-invert, 0.8);
}
&.is-hollow {
box-shadow: 0 0 0 1px $color;
background: $white;
color: darken($color, 10%);
}
&.is-subtle {
background: rgba($color, 0.3);
color: $white;
}
}
}
&.is-faded {
color: rgba($text, 0.8);
}
&.is-small {
padding: 0.15em 0.5em;
}
&.is-secondary {
color: darken($grey-blue, 30%);
background: lighten($grey-blue, 10%);
}
}
button.badge {
cursor: pointer;
}