bootstrap/scss/_badge.scss at 4c8237cb0081733972dc9ef4ad8ce652ab9bf0bd · twbs/bootstrap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/tokens" as *;

$badge-tokens: () !default;

// scss-docs-start badge-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$badge-tokens: defaults(
  (
    --badge-padding-x: .625em,
    --badge-padding-y: .25em,
    --badge-font-size: clamp(12px, .75em, .75em),
    --badge-font-weight: var(--font-weight-semibold),
    --badge-color: inherit,
    --badge-bg: var(--bg-2),
    --badge-border-width: var(--border-width),
    --badge-border-color: transparent,
    --badge-border-radius: var(--radius-7),
  ),
  $badge-tokens
);
// scss-docs-end badge-tokens

// scss-docs-start badge-variants
$badge-variants: (
  "subtle": (
    "color": "text",
    "bg": "bg-subtle",
    "border-color": "transparent"
  ),
  "outline": (
    "color": "text",
    "bg": "transparent",
    "border-color": "border"
  )
) !default;
// scss-docs-end badge-variants

@layer components {
  .badge {
    @include tokens($badge-tokens);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.375rem;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1;
    color: var(--theme-contrast, var(--badge-color));
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: var(--theme-bg, var(--badge-bg));
    border: var(--badge-border-width) solid var(--badge-border-color);
    @include border-radius(var(--badge-border-radius));
    // @include gradient-bg();

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }
  }

  // Quick fix for badges in buttons
  .btn .badge {
    position: relative;
    top: -1px;
  }

  // scss-docs-start badge-variant-loop
  @each $variant, $properties in $badge-variants {
    .badge-#{$variant} {
      @each $property, $value in $properties {
        @if $value == "transparent" {
          --badge-#{$property}: transparent;
        } @else {
          --badge-#{$property}: var(--theme-#{$value});
        }
      }

      color: var(--badge-color);
      background-color: var(--badge-bg);
      border-color: var(--badge-border-color);
    }
  }
  // scss-docs-end badge-variant-loop
}