projects / ipfire.org.git / blame
| Commit | Line | Data |
|---|---|---|
| 91e44d91 S |
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 | font-size: $badge-font-size; | |
| 10 | font-weight: $badge-font-weight; | |
| 11 | line-height: 1; | |
| 12 | color: $badge-color; | |
| 13 | text-align: center; | |
| 14 | white-space: nowrap; | |
| 15 | vertical-align: baseline; | |
| 16 | @include border-radius(); | |
| 17 | ||
| 18 | // Empty badges collapse automatically | |
| 19 | &:empty { | |
| 20 | display: none; | |
| 21 | } | |
| 22 | } | |
| 23 | ||
| 24 | // Quick fix for badges in buttons | |
| 25 | .btn .badge { | |
| 26 | position: relative; | |
| 27 | top: -1px; | |
| 28 | } | |
| 29 | ||
| 30 | // scss-lint:disable QualifyingElement | |
| 31 | // Add hover effects, but only for links | |
| 32 | a.badge { | |
| 33 | @include hover-focus { | |
| 34 | color: $badge-link-hover-color; | |
| 35 | text-decoration: none; | |
| 36 | cursor: pointer; | |
| 37 | } | |
| 38 | } | |
| 39 | // scss-lint:enable QualifyingElement | |
| 40 | ||
| 41 | // Pill badges | |
| 42 | // | |
| 43 | // Make them extra rounded with a modifier to replace v3's badges. | |
| 44 | ||
| 45 | .badge-pill { | |
| 46 | padding-right: $badge-pill-padding-x; | |
| 47 | padding-left: $badge-pill-padding-x; | |
| 48 | @include border-radius($badge-pill-border-radius); | |
| 49 | } | |
| 50 | ||
| 51 | // Colors | |
| 52 | // | |
| 53 | // Contextual variations (linked badges get darker on :hover). | |
| 54 | ||
| 55 | .badge-default { | |
| 56 | @include badge-variant($badge-default-bg); | |
| 57 | } | |
| 58 | ||
| 59 | .badge-primary { | |
| 60 | @include badge-variant($badge-primary-bg); | |
| 61 | } | |
| 62 | ||
| 63 | .badge-success { | |
| 64 | @include badge-variant($badge-success-bg); | |
| 65 | } | |
| 66 | ||
| 67 | .badge-info { | |
| 68 | @include badge-variant($badge-info-bg); | |
| 69 | } | |
| 70 | ||
| 71 | .badge-warning { | |
| 72 | @include badge-variant($badge-warning-bg); | |
| 73 | } | |
| 74 | ||
| 75 | .badge-danger { | |
| 76 | @include badge-variant($badge-danger-bg); | |
| 77 | } |