0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-10 22:24:19 +01:00
Bootstrap/scss/_badge.scss

77 lines
1.5 KiB
SCSS
Raw Normal View History

// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
2015-04-18 20:38:47 +02:00
.badge {
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
font-size: $badge-font-size;
font-weight: $badge-font-weight;
line-height: 1;
color: $badge-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
2014-12-02 23:02:35 +01:00
@include border-radius();
2016-12-26 18:56:22 +01:00
// Empty badges collapse automatically
&:empty {
display: none;
}
}
2016-12-26 18:56:22 +01:00
// Quick fix for badges in buttons
.btn .badge {
position: relative;
top: -1px;
2013-04-19 21:31:55 +02:00
}
2016-02-06 21:28:18 +01:00
// scss-lint:disable QualifyingElement
2014-12-02 23:02:35 +01:00
// Add hover effects, but only for links
a.badge {
@include hover-focus {
color: $badge-link-hover-color;
2014-12-02 23:02:35 +01:00
text-decoration: none;
}
}
2016-02-06 21:28:18 +01:00
// scss-lint:enable QualifyingElement
2014-12-02 23:02:35 +01:00
2016-12-26 18:56:22 +01:00
// Pill badges
//
// Make them extra rounded with a modifier to replace v3's badges.
.badge-pill {
padding-right: $badge-pill-padding-x;
padding-left: $badge-pill-padding-x;
@include border-radius($badge-pill-border-radius);
}
// Colors
2015-04-18 20:38:47 +02:00
//
2016-12-26 18:56:22 +01:00
// Contextual variations (linked badges get darker on :hover).
.badge-default {
@include badge-variant($badge-default-bg);
}
.badge-primary {
@include badge-variant($badge-primary-bg);
2013-04-19 21:31:55 +02:00
}
.badge-success {
@include badge-variant($badge-success-bg);
2013-04-19 21:31:55 +02:00
}
.badge-info {
@include badge-variant($badge-info-bg);
}
.badge-warning {
@include badge-variant($badge-warning-bg);
}
.badge-danger {
@include badge-variant($badge-danger-bg);
2013-07-02 02:32:07 +02:00
}