Skip to content

Commit 497b975

Browse files
XhmikosRXhmikosR
authored
Merge branch 'main' into v5-fs-utils
2 parents 2dcc8e4 + c5966de commit 497b975

13 files changed

Lines changed: 60 additions & 56 deletions

File tree

‎scss/_root.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
:root {
22
// Custom variable values only support SassScript inside `#{}`.
33
@each $color, $value in $colors {
4-
--bs-#{$color}: #{$value};
4+
--#{$variable-prefix}#{$color}: #{$value};
55
}
66

77
@each $color, $value in $theme-colors {
8-
--bs-#{$color}: #{$value};
8+
--#{$variable-prefix}#{$color}: #{$value};
99
}
1010

1111
// Use `inspect` for lists so that quoted items keep the quotes.
1212
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
13-
--bs-font-sans-serif: #{inspect($font-family-sans-serif)};
14-
--bs-font-monospace: #{inspect($font-family-monospace)};
15-
--bs-gradient: #{$gradient};
13+
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
14+
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
15+
--#{$variable-prefix}gradient: #{$gradient};
1616
}

‎scss/_tables.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
//
44

55
.table {
6-
--bs-table-bg: #{$table-bg};
7-
--bs-table-accent-bg: transparent;
8-
--bs-table-striped-color: #{$table-striped-color};
9-
--bs-table-striped-bg: #{$table-striped-bg};
10-
--bs-table-active-color: #{$table-active-color};
11-
--bs-table-active-bg: #{$table-active-bg};
12-
--bs-table-hover-color: #{$table-hover-color};
13-
--bs-table-hover-bg: #{$table-hover-bg};
6+
--#{$variable-prefix}table-bg: #{$table-bg};
7+
--#{$variable-prefix}table-accent-bg: transparent;
8+
--#{$variable-prefix}table-striped-color: #{$table-striped-color};
9+
--#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
10+
--#{$variable-prefix}table-active-color: #{$table-active-color};
11+
--#{$variable-prefix}table-active-bg: #{$table-active-bg};
12+
--#{$variable-prefix}table-hover-color: #{$table-hover-color};
13+
--#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
1414

1515
width: 100%;
1616
margin-bottom: $spacer;
@@ -25,8 +25,8 @@
2525
// stylelint-disable-next-line selector-max-universal
2626
> :not(caption) > * > * {
2727
padding: $table-cell-padding-y $table-cell-padding-x;
28-
background-color: var(--bs-table-bg);
29-
background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
28+
background-color: var(--#{$variable-prefix}table-bg);
29+
background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
3030
border-bottom-width: $table-border-width;
3131
}
3232

@@ -99,8 +99,8 @@
9999

100100
.table-striped {
101101
> tbody > tr:nth-of-type(#{$table-striped-order}) {
102-
--bs-table-accent-bg: var(--bs-table-striped-bg);
103-
color: var(--bs-table-striped-color);
102+
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
103+
color: var(--#{$variable-prefix}table-striped-color);
104104
}
105105
}
106106

@@ -109,8 +109,8 @@
109109
// The `.table-active` class can be added to highlight rows or cells
110110

111111
.table-active {
112-
--bs-table-accent-bg: var(--bs-table-active-bg);
113-
color: var(--bs-table-active-color);
112+
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
113+
color: var(--#{$variable-prefix}table-active-color);
114114
}
115115

116116
// Hover effect
@@ -119,8 +119,8 @@
119119

120120
.table-hover {
121121
> tbody > tr:hover {
122-
--bs-table-accent-bg: var(--bs-table-hover-bg);
123-
color: var(--bs-table-hover-color);
122+
--#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
123+
color: var(--#{$variable-prefix}table-hover-color);
124124
}
125125
}
126126

‎scss/_utilities.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -459,7 +459,7 @@ $utilities: map-merge(
459459
"gradient": (
460460
property: background-image,
461461
class: bg,
462-
values: (gradient: var(--bs-gradient))
462+
values: (gradient: var(--#{$variable-prefix}gradient))
463463
),
464464
"white-space": (
465465
property: white-space,
@@ -481,7 +481,7 @@ $utilities: map-merge(
481481
"font-family": (
482482
property: font-family,
483483
class: font,
484-
values: (monospace: var(--bs-font-monospace))
484+
values: (monospace: var(--#{$variable-prefix}font-monospace))
485485
),
486486
"user-select": (
487487
property: user-select,

‎scss/_variables.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,10 @@ $enable-negative-margins: false !default;
222222
$enable-deprecation-messages: true !default;
223223
$enable-important-utilities: true !default;
224224

225+
// Prefix for :root CSS variables
226+
227+
$variable-prefix: bs- !default;
228+
225229
// Gradient
226230
//
227231
// The gradient which is added to components if `$enable-gradients` is `true`
@@ -395,8 +399,8 @@ $aspect-ratios: (
395399
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
396400
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
397401
// stylelint-enable value-keyword-case
398-
$font-family-base: var(--bs-font-sans-serif) !default;
399-
$font-family-code: var(--bs-font-monospace) !default;
402+
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
403+
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;
400404

401405
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
402406
// $font-size-base effects the font size of the body text

‎scss/forms/_form-check.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,15 @@
5353

5454
&[type="checkbox"] {
5555
@if $enable-gradients {
56-
background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient);
56+
background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
5757
} @else {
5858
background-image: escape-svg($form-check-input-checked-bg-image);
5959
}
6060
}
6161

6262
&[type="radio"] {
6363
@if $enable-gradients {
64-
background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient);
64+
background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
6565
} @else {
6666
background-image: escape-svg($form-check-radio-checked-bg-image);
6767
}
@@ -73,7 +73,7 @@
7373
border-color: $form-check-input-indeterminate-border-color;
7474

7575
@if $enable-gradients {
76-
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient);
76+
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
7777
} @else {
7878
background-image: escape-svg($form-check-input-indeterminate-bg-image);
7979
}
@@ -122,7 +122,7 @@
122122
background-position: $form-switch-checked-bg-position;
123123

124124
@if $enable-gradients {
125-
background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient);
125+
background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
126126
} @else {
127127
background-image: escape-svg($form-switch-checked-bg-image);
128128
}

‎scss/forms/_form-file.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.form-file {
2-
--bs-form-file-height: #{$form-file-height};
2+
--#{$variable-prefix}form-file-height: #{$form-file-height};
33
position: relative;
44
}
55

66
.form-file-input {
77
position: relative;
88
z-index: 2;
99
width: 100%;
10-
height: var(--bs-form-file-height);
10+
height: var(--#{$variable-prefix}form-file-height);
1111
margin: 0;
1212
opacity: 0;
1313

@@ -32,7 +32,7 @@
3232
left: 0;
3333
z-index: 1;
3434
display: flex;
35-
height: var(--bs-form-file-height);
35+
height: var(--#{$variable-prefix}form-file-height);
3636
border-color: $form-file-border-color;
3737
@include border-radius($form-file-border-radius);
3838
@include box-shadow($form-file-box-shadow);
@@ -71,7 +71,7 @@
7171
}
7272

7373
.form-file-sm {
74-
--bs-form-file-height: #{$form-file-height-sm};
74+
--#{$variable-prefix}form-file-height: #{$form-file-height-sm};
7575
@include font-size($form-file-font-size-sm);
7676

7777
.form-file-text,
@@ -81,7 +81,7 @@
8181
}
8282

8383
.form-file-lg {
84-
--bs-form-file-height: #{$form-file-height-lg};
84+
--#{$variable-prefix}form-file-height: #{$form-file-height-lg};
8585
@include font-size($form-file-font-size-lg);
8686

8787
.form-file-text,

‎scss/mixins/_gradients.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
background-color: $color;
55

66
@if $enable-gradients {
7-
background-image: var(--bs-gradient);
7+
background-image: var(--#{$variable-prefix}gradient);
88
}
99
}
1010

‎scss/mixins/_grid.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
// Generate semantic grid columns with these mixins.
44

55
@mixin make-row($gutter: $grid-gutter-width) {
6-
--bs-gutter-x: #{$gutter};
7-
--bs-gutter-y: 0;
6+
--#{$variable-prefix}gutter-x: #{$gutter};
7+
--#{$variable-prefix}gutter-y: 0;
88
display: flex;
99
flex-wrap: wrap;
10-
margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list
11-
margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
12-
margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list
10+
margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
11+
margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
12+
margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
1313
}
1414

1515
@mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,9 +21,9 @@
2121
flex-shrink: 0;
2222
width: 100%;
2323
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
24-
padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
25-
padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list
26-
margin-top: var(--bs-gutter-y);
24+
padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
25+
padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
26+
margin-top: var(--#{$variable-prefix}gutter-y);
2727
}
2828

2929
@mixin make-col($size, $columns: $grid-columns) {
@@ -107,12 +107,12 @@
107107
@each $key, $value in $gutters {
108108
.g#{$infix}-#{$key},
109109
.gx#{$infix}-#{$key} {
110-
--bs-gutter-x: #{$value};
110+
--#{$variable-prefix}gutter-x: #{$value};
111111
}
112112

113113
.g#{$infix}-#{$key},
114114
.gy#{$infix}-#{$key} {
115-
--bs-gutter-y: #{$value};
115+
--#{$variable-prefix}gutter-y: #{$value};
116116
}
117117
}
118118
}

‎scss/mixins/_table-variants.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
77
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
88

9-
--bs-table-bg: #{$background};
10-
--bs-table-striped-bg: #{$striped-bg};
11-
--bs-table-striped-color: #{color-contrast($striped-bg)};
12-
--bs-table-active-bg: #{$active-bg};
13-
--bs-table-active-color: #{color-contrast($active-bg)};
14-
--bs-table-hover-bg: #{$hover-bg};
15-
--bs-table-hover-color: #{color-contrast($hover-bg)};
9+
--#{$variable-prefix}table-bg: #{$background};
10+
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
11+
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
12+
--#{$variable-prefix}table-active-bg: #{$active-bg};
13+
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
14+
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
15+
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
1616

1717
color: $color;
1818
border-color: mix($color, $background, percentage($table-border-factor));

‎site/content/docs/5.0/components/close-button.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
2424

2525
## White variant
2626

27-
Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `backdrop-filter` property to invert the `background-image`.
27+
Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
2828

2929
{{< example class="bg-dark" >}}
3030
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

0 commit comments

Comments
 (0)