assets/stylesheets/bootstrap/_badges.scss
author ymh <ymh.work@gmail.com>
Wed, 16 Oct 2019 13:18:55 +0200
changeset 118 2c8d73b46563
parent 114 af15590802a4
permissions -rw-r--r--
test commit
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
114
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
//
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
// Badges
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// --------------------------------------------------
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
// Base class
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
.badge {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  display: inline-block;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
  min-width: 10px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  padding: 3px 7px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
  font-size: $font-size-small;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
  font-weight: $badge-font-weight;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
  color: $badge-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
  line-height: $badge-line-height;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
  vertical-align: middle;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
  white-space: nowrap;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
  text-align: center;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  background-color: $badge-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
  border-radius: $badge-border-radius;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
  // Empty badges collapse automatically (not available in IE8)
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
  &:empty {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    display: none;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
  // Quick fix for badges in buttons
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  .btn & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
    position: relative;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
    top: -1px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
  .btn-xs &,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
  .btn-group-xs > .btn & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
    top: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    padding: 1px 5px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
  // [converter] extracted a& to a.badge
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
  // Account for badges in navs
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
  .list-group-item.active > &,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
  .nav-pills > .active > a > & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
    color: $badge-active-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
    background-color: $badge-active-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
  .list-group-item > & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
    float: right;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
  .list-group-item > & + & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
    margin-right: 5px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
  .nav-pills > li > a > & {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
    margin-left: 3px;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
// Hover state, but only for links
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
a.badge {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
  &:hover,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
  &:focus {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
    color: $badge-link-hover-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
    text-decoration: none;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
    cursor: pointer;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
}