mixins
6 years ago
utilities
6 years ago
vendor
6 years ago
_alert.scss
6 years ago
_badge.scss
6 years ago
_breadcrumb.scss
6 years ago
_button-group.scss
6 years ago
_buttons.scss
6 years ago
_card.scss
6 years ago
_carousel.scss
6 years ago
_close.scss
6 years ago
_code.scss
6 years ago
_custom-forms.scss
6 years ago
_dropdown.scss
6 years ago
_forms.scss
6 years ago
_functions.scss
6 years ago
_grid.scss
6 years ago
_images.scss
6 years ago
_input-group.scss
6 years ago
_jumbotron.scss
6 years ago
_list-group.scss
6 years ago
_media.scss
6 years ago
_mixins.scss
6 years ago
_modal.scss
6 years ago
_nav.scss
6 years ago
_navbar.scss
6 years ago
_pagination.scss
6 years ago
_popover.scss
6 years ago
_print.scss
6 years ago
_progress.scss
6 years ago
_reboot.scss
6 years ago
_root.scss
6 years ago
_spinners.scss
6 years ago
_tables.scss
6 years ago
_toasts.scss
6 years ago
_tooltip.scss
6 years ago
_transitions.scss
6 years ago
_type.scss
6 years ago
_utilities.scss
6 years ago
_variables.scss
6 years ago
bootstrap-grid.scss
6 years ago
bootstrap-reboot.scss
6 years ago
bootstrap.scss
6 years ago
_badge.scss
55 lines
| 1 | // Base class |
| 2 | // |
| 3 | // Requires one of the contextual, color modifier classes for `color` and |
| 4 | // `background-color`. |
| 5 | |
| 6 | .badge { |
| 7 | display: inline-block; |
| 8 | padding: $badge-padding-y $badge-padding-x; |
| 9 | @include font-size($badge-font-size); |
| 10 | font-weight: $badge-font-weight; |
| 11 | line-height: 1; |
| 12 | text-align: center; |
| 13 | white-space: nowrap; |
| 14 | vertical-align: baseline; |
| 15 | @include border-radius($badge-border-radius); |
| 16 | @include transition($badge-transition); |
| 17 | |
| 18 | @at-root a#{&} { |
| 19 | @include hover-focus { |
| 20 | text-decoration: none; |
| 21 | } |
| 22 | } |
| 23 | |
| 24 | // Empty badges collapse automatically |
| 25 | &:empty { |
| 26 | display: none; |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | // Quick fix for badges in buttons |
| 31 | .btn .badge { |
| 32 | position: relative; |
| 33 | top: -1px; |
| 34 | } |
| 35 | |
| 36 | // Pill badges |
| 37 | // |
| 38 | // Make them extra rounded with a modifier to replace v3's badges. |
| 39 | |
| 40 | .badge-pill { |
| 41 | padding-right: $badge-pill-padding-x; |
| 42 | padding-left: $badge-pill-padding-x; |
| 43 | @include border-radius($badge-pill-border-radius); |
| 44 | } |
| 45 | |
| 46 | // Colors |
| 47 | // |
| 48 | // Contextual variations (linked badges get darker on :hover). |
| 49 | |
| 50 | @each $color, $value in $theme-colors { |
| 51 | .badge-#{$color} { |
| 52 | @include badge-variant($value); |
| 53 | } |
| 54 | } |
| 55 |