mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki 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
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