2023-01-23 11:03:31 +01:00

137 lines
2.4 KiB
SCSS

/** Labels & Badges
*************************************************** **/
.badge {
line-height: 1 !important;
&.badge-square {
font-size: 13px;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
margin-right: 10px;
padding: 0;
&.float-left {
margin-left: 10px;
}
&.float-right {
margin-right: 10px;
}
}
}
h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
padding: 3px 10px;
}
section {
.nav-pills > li {
> a {
color: #111;
}
&.active > a {
&:hover {
color: #111;
}
color: #111;
}
}
&.dark {
.nav-pills > li {
> a {
color: #fff;
}
&.active > a {
&:hover {
color: #fff;
}
color: #fff;
background-color: rgba(255, 255, 255, 0.3) !important;
}
}
a.badge, .badge {
color: #fff;
}
}
}
/* corner */
.badge.badge-corner {
top: -8px !important;
right: -8px !important;
position: absolute !important;
color: #fff !important;
}
/* colors */
span.badge-default, .list-group-item.active > .badge.badge-default {
background-color: #333 !important;
}
span.badge-blue, .list-group-item.active > .badge {
background: #3498db !important;
}
span.badge-red, .list-group-item.active > .badge {
background: #e74c3c !important;
}
span.badge-green, .list-group-item.active > .badge.badge-green {
background: #2ecc71 !important;
}
span.badge-sea, .list-group-item.active > .badge.badge-sea {
background: #1abc9c !important;
}
span.badge-orange, .list-group-item.active > .badge.badge-orange {
background: #e67e22 !important;
}
span.badge-purple, .list-group-item.active > .badge.badge-purple {
background: #9b6bcc !important;
}
span.badge-aqua, .list-group-item.active > .badge.badge-aqua {
background: #27d7e7 !important;
}
[class*="u-badge"] {
position: absolute;
display: inline-block;
text-align: center;
@include px-to-rem("font-size", 13px);
color: $m-color-main;
z-index: 3;
}
[class*="u-badge"]:not([class*="--top-left"], [class*="--bottom-left"], [class*="--bottom-right"]) {
top: 0;
right: 0;
transform: translate(50%, -50%);
}
.u-badge {
&--top-left {
top: 0;
left: 0;
transform: translate(-50%, -50%);
}
&--bottom-left {
bottom: 0;
left: 0;
transform: translate(-50%, 50%);
}
&--bottom-right {
bottom: 0;
right: 0;
transform: translate(50%, 50%);
}
}