Sha256: d351909abd7ef23bb2c56b97fbfc0f81655b4f908b134c0628f5f7f02e69a421
Contents?: true
Size: 1.52 KB
Versions: 23
Compression:
Stored size: 1.52 KB
Contents
//
// badge.scss
// Extended from Bootstrap
//
// Soft variants
@each $color,
$value in $theme-colors {
.badge-#{$color}-soft {
@include badge-variant-soft($value, $badge-soft-bg-opacity);
}
}
.badge-gray-700-soft {
@include badge-variant-soft($gray-700, $badge-soft-bg-opacity);
}
// Color options
.badge-gray-600 {
background-color: $gray-600;
color: $white;
}
// Sizing
.badge-lg {
padding: $badge-padding-y-lg $badge-padding-x-lg;
}
// Rounded circle
.badge-rounded-circle {
height: calc(1em + #{$badge-padding-y * 2});
padding-left: $badge-padding-y;
padding-right: $badge-padding-y;
border-radius: $badge-pill-border-radius;
>* {
display: block;
width: 1em;
}
&.badge-lg {
height: calc(1em + #{$badge-padding-y-lg * 2});
padding-left: $badge-padding-y-lg;
padding-right: $badge-padding-y-lg;
}
}
// Positioning
.badge-float {
position: absolute;
z-index: $zindex-dropdown;
}
.badge-float-outside {
top: -.5rem;
right: -.5rem;
}
.badge-float-inside {
top: 1rem;
right: 1rem;
}
// Active
.badge-white-soft.active {
background-color: $white;
color: $primary;
@include hover-focus {
background-color: darken($white, 5%);
color: $primary;
}
}
.badge-secondary-soft.active {
background-color: $primary;
color: color-yiq($primary);
@include hover-focus {
background-color: darken($primary, 5%);
color: color-yiq(darken($primary, 5%));
}
}
Version data entries
23 entries across 23 versions & 1 rubygems