117 lines
1.9 KiB
CSS
117 lines
1.9 KiB
CSS
/*
|
|
Labels and badges
|
|
========================================
|
|
*/
|
|
|
|
/* Base classes */
|
|
.label,
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 4px;
|
|
font-size: calc(var(--base-font-size) * 0.846);
|
|
font-weight: bold;
|
|
line-height: 14px; /* ensure proper line-height if floated */
|
|
color: var(--white);
|
|
vertical-align: baseline;
|
|
white-space: nowrap;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
background-color: var(--gray-light);
|
|
}
|
|
|
|
/* Set unique padding and border-radii */
|
|
.label {
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.badge {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
/* Empty labels/badges collapse */
|
|
.label:empty,
|
|
.badge:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* Hover/focus state, but only for links */
|
|
a.label:hover,
|
|
a.label:focus,
|
|
a.badge:hover,
|
|
a.badge:focus {
|
|
color: var(--white);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Colors
|
|
Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) */
|
|
|
|
/* Important (red) */
|
|
.label-important,
|
|
.badge-important {
|
|
background-color: var(--error-text);
|
|
}
|
|
|
|
.label-important[href],
|
|
.badge-important[href] {
|
|
background-color: #953b39;
|
|
}
|
|
|
|
/* Warnings (orange) */
|
|
.label-warning,
|
|
.badge-warning {
|
|
background-color: var(--orange);
|
|
}
|
|
|
|
.label-warning[href],
|
|
.badge-warning[href] {
|
|
background-color: #c67605;
|
|
}
|
|
|
|
/* Success (green) */
|
|
.label-success,
|
|
.badge-success {
|
|
background-color: var(--success-text);
|
|
}
|
|
|
|
.label-success[href],
|
|
.badge-success[href] {
|
|
background-color: #356635;
|
|
}
|
|
|
|
/* Info (turquoise) */
|
|
.label-info,
|
|
.badge-info {
|
|
background-color: var(--info-text);
|
|
}
|
|
|
|
.label-info[href],
|
|
.badge-info[href] {
|
|
background-color: #2d6987;
|
|
}
|
|
|
|
/* Inverse (black) */
|
|
.label-inverse,
|
|
.badge-inverse {
|
|
background-color: var(--gray-dark);
|
|
}
|
|
|
|
.label-inverse[href],
|
|
.badge-inverse[href] {
|
|
background-color: #1a1a1a;
|
|
}
|
|
|
|
/* Quick fix for labels/badges in buttons */
|
|
.btn .label,
|
|
.btn .badge {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.btn-mini .label,
|
|
.btn-mini .badge {
|
|
top: 0;
|
|
}
|