PageRenderTime 153ms CodeModel.GetById 34ms app.highlight 1ms RepoModel.GetById 1ms app.codeStats 0ms

/looplab/scss/bootstrap/_badge.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 47 lines | 28 code | 7 blank | 12 comment | 0 complexity | 78ac7b067be83693c822f85b32710e36 MD5 | raw file
 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  text-align: center;
13  white-space: nowrap;
14  vertical-align: baseline;
15  @include border-radius($badge-border-radius);
16
17  // Empty badges collapse automatically
18  &:empty {
19    display: none;
20  }
21}
22
23// Quick fix for badges in buttons
24.btn .badge {
25  position: relative;
26  top: -1px;
27}
28
29// Pill badges
30//
31// Make them extra rounded with a modifier to replace v3's badges.
32
33.badge-pill {
34  padding-right: $badge-pill-padding-x;
35  padding-left: $badge-pill-padding-x;
36  @include border-radius($badge-pill-border-radius);
37}
38
39// Colors
40//
41// Contextual variations (linked badges get darker on :hover).
42
43@each $color, $value in $theme-colors {
44  .badge-#{$color} {
45    @include badge-variant($value);
46  }
47}