kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Convert .badge to CSS variables

Browse source
This commit is contained in:
Mark Otto 2021-11-16 19:01:30 -08:00 committed by Mark Otto
parent d3babf7d7f
commit 7e71fe7bae
2 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
scss/_badge.scss
View file

@ -1,19 +1,29 @@
// stylelint-disable custom-property-empty-line-before
// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
.badge {
// scss-docs-start badge-css-vars
--#{$variable-prefix}badge-padding: #{$badge-padding-y $badge-padding-x};
@include rfs($badge-font-size, --#{$variable-prefix}badge-font-size);
--#{$variable-prefix}badge-font-weight: #{$badge-font-weight};
--#{$variable-prefix}badge-color: #{$badge-color};
--#{$variable-prefix}badge-border-radius: #{$badge-border-radius};
// scss-docs-end badge-css-vars
display: inline-block;
padding: $badge-padding-y $badge-padding-x;
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
padding: var(--#{$variable-prefix}badge-padding);
font-size: var(--#{$variable-prefix}badge-font-size);
font-weight: var(--#{$variable-prefix}badge-font-weight);
line-height: 1;
color: $badge-color;
color: var(--#{$variable-prefix}badge-color);
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
border-radius: var(--#{$variable-prefix}badge-border-radius, 0); // stylelint-disable-line property-disallowed-list
@include gradient-bg();
// Empty badges collapse automatically

10
site/content/docs/5.1/components/badge.md
View file

@ -86,8 +86,16 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
{{< /badge.inline >}}
{{< /example >}}
## Sass
## CSS
### Variables
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.3.0</small>
As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}}
### Sass variables
{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}}