@c8y/style
Version:
Styles for Cumulocity IoT applications
85 lines (74 loc) • 2.08 kB
text/less
/**
* Badges - Small count and labeling component
*
* Note: Uses @badge-* variables and CSS custom properties (--c8y-unit-base) for sizing.
*
* Intentionally hardcoded values:
* - Box-shadow widths (1px, 2px): Border simulation via inset shadow
* - Padding (0.4em): Relative padding for scalability
* - Margin-left (3px): Fine-tuning for nav pills spacing
*/
// Shared mixin for badge variants
.badge-variant(@bg-color; @text-color; @include-shadow: true) {
background-color: @bg-color;
color: @text-color;
& when (@include-shadow = true) {
box-shadow: inset 0 0 0 1px @text-color;
}
}
.badge {
display: inline-flex ;
min-width: calc(var(--c8y-unit-base) * 2.25);
min-height: calc(var(--c8y-unit-base) * 2.25);
justify-content: center;
align-items: center;
border-radius: @badge-border-radius;
background-color: @badge-background-default;
color: @badge-color-default;
text-align: center;
white-space: nowrap;
font-weight: @badge-font-weight;
font-size: @badge-font-size;
line-height: @badge-line-height;
box-shadow: inset 0 0 0 1px @gray-50;
padding: 0 0.4em;
&.badge-success {
.badge-variant(@badge-background-success; @badge-color-success);
}
&.badge-danger {
.badge-variant(@badge-background-danger; @badge-color-danger);
}
&.badge-warning {
.badge-variant(@badge-background-warning; @badge-color-warning);
}
&.badge-system {
.badge-variant(@badge-background-system; @badge-color-system; @include-shadow: false);
}
&.badge-info {
.badge-variant(@badge-background-info; @badge-color-info);
}
// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}
a & {
&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
}
}
.list-group-item.active > &,
.nav-pills > .active > a > & {
box-shadow: 0 0 0 2px @badge-color-focus;
}
.list-group-item > & {
float: right;
}
.list-group-item > & + & {
margin-right: @size-5;
}
.nav-pills > li > a > & {
margin-left: 3px;
}
}