@open-rlb/ng-bootstrap 3.3.40 → 3.3.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
@use
|
|
2
|
-
//
|
|
1
|
+
@use 'sass:color';
|
|
2
|
+
//
|
|
3
3
|
// _badge.scss
|
|
4
|
-
//
|
|
5
|
-
|
|
4
|
+
//
|
|
6
5
|
|
|
7
6
|
.badge {
|
|
8
7
|
&[href] {
|
|
@@ -30,42 +29,58 @@
|
|
|
30
29
|
|
|
31
30
|
@each $color, $value in $theme-colors {
|
|
32
31
|
.badge {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
&.bg-#{$color} {
|
|
33
|
+
&[href] {
|
|
34
|
+
&:hover,
|
|
35
|
+
&:focus {
|
|
36
|
+
background-color: color.adjust($value, $lightness: -4%) !important;
|
|
37
|
+
}
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
}
|
|
42
41
|
|
|
43
|
-
.badge{
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
.badge {
|
|
43
|
+
&.bg-light {
|
|
44
|
+
color: var(--#{$prefix}body-color);
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
46
|
+
&[href] {
|
|
47
|
+
&:hover,
|
|
48
|
+
&:focus {
|
|
49
|
+
color: var(--#{$prefix}body-color);
|
|
50
|
+
}
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
}
|
|
55
54
|
|
|
56
|
-
.badge-soft-#{$color} {
|
|
57
|
-
|
|
55
|
+
.badge-soft-#{$color} {
|
|
56
|
+
@include badge-variant-soft($value);
|
|
58
57
|
}
|
|
59
|
-
|
|
60
58
|
}
|
|
61
59
|
|
|
62
|
-
.rounded-pill{
|
|
63
|
-
|
|
64
|
-
|
|
60
|
+
.rounded-pill {
|
|
61
|
+
padding-right: 0.6em;
|
|
62
|
+
padding-left: 0.6em;
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
// Dark badge
|
|
68
66
|
|
|
69
|
-
.badge.bg-dark{
|
|
67
|
+
.badge.bg-dark {
|
|
70
68
|
color: var(--#{$prefix}light);
|
|
71
|
-
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Bootstrap sizes the badge around the font's em box (line-height: 1 plus symmetric padding) and
|
|
72
|
+
// places text on the baseline, so the box always reserves descender room below the baseline. Digits
|
|
73
|
+
// and capitals never use it, leaving the glyphs visibly high in the pill — by 2.8px at a 10.8px font
|
|
74
|
+
// size. Trimming to cap-height..baseline makes the padding wrap the real glyph box instead, so every
|
|
75
|
+
// badge centres identically regardless of its content or its rendered size.
|
|
76
|
+
//
|
|
77
|
+
// Firefox has not shipped text-box-trim: without the @supports guard it would take the padding bump
|
|
78
|
+
// without the trim, which is worse than the status quo.
|
|
79
|
+
@supports (text-box: trim-both cap alphabetic) {
|
|
80
|
+
.badge {
|
|
81
|
+
text-box: trim-both cap alphabetic;
|
|
82
|
+
// Drive Bootstrap's own custom property rather than padding-top/bottom, so consumer overrides
|
|
83
|
+
// and py-* utilities still compose.
|
|
84
|
+
--#{$prefix}badge-padding-y: #{$badge-padding-y-trimmed};
|
|
85
|
+
}
|
|
86
|
+
}
|