mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 00:39:54 +00:00
Code Issues Projects Releases Wiki Activity

Add bs- prefixes to custom properties (#30591)

Browse Source
This commit is contained in:
Martijn Cuppens 2020-04-15 18:52:16 +02:00 committed by GitHub
parent f0abe26b98
commit 8cdb057111
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scss/_reboot.scss
View File

@ -283,7 +283,7 @@ pre,
code,
kbd,
samp {
font-family: var(--font-family-monospace);
font-family: var(--bs-font-monospace);
@include font-size(1em); // Correct the odd `em` font sizing in all browsers.
}

8
scss/_root.scss
View File

@ -1,15 +1,15 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
@each $color, $value in $colors {
--#{$color}: #{$value};
--bs-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$color}: #{$value};
--bs-#{$color}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
--bs-font-sans-serif: #{inspect($font-family-sans-serif)};
--bs-font-monospace: #{inspect($font-family-monospace)};
}

2
scss/_utilities.scss
View File

@ -441,7 +441,7 @@ $utilities: map-merge(
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--font-family-monospace))
values: (monospace: var(--bs-font-monospace))
),
"user-select": (
property: user-select,

2
scss/_variables.scss
View File

@ -376,7 +376,7 @@ $embed-responsive-aspect-ratios: (
// stylelint-disable value-keyword-case
$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;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: var(--font-family-sans-serif) !default;
$font-family-base: var(--bs-font-sans-serif) !default;
// stylelint-enable value-keyword-case
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins

20
scss/mixins/_grid.scss
View File

@ -3,13 +3,13 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--grid-gutter-x: #{$gutter};
--grid-gutter-y: 0;
--bs-gutter-x: #{$gutter};
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--grid-gutter-y) * -1); // stylelint-disable-line function-blacklist
margin-right: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
margin-left: calc(var(--grid-gutter-x) / -2); // stylelint-disable-line function-blacklist
margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
}
@mixin make-col-ready($gutter: $grid-gutter-width) {
@ -21,9 +21,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
padding-left: calc(var(--grid-gutter-x) / 2); // stylelint-disable-line function-blacklist
margin-top: var(--grid-gutter-y);
padding-right: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-blacklist
margin-top: var(--bs-gutter-y);
}
@mixin make-col($size, $columns: $grid-columns) {
@ -104,12 +104,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--grid-gutter-x: #{$value};
--bs-gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--grid-gutter-y: #{$value};
--bs-gutter-y: #{$value};
}
}
}

6
site/content/docs/4.3/getting-started/theming.md
View File

@ -399,7 +399,7 @@ Should you need to modify your `$grid-breakpoints`, your changes will apply to a
## CSS variables
Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping.
Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS. These provide easy access to commonly used values like our theme colors and primary font stacks when working in your browser's Inspector, a code sandbox, or general prototyping. All our custom properties are prefixed with `bs-` to avoid conflicts with third party CSS.
### Available variables
@ -425,9 +425,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee
{{< highlight css >}}
body {
font: 1rem/1.5 var(--font-family-sans-serif);
font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
color: var(--blue);
color: var(--bs-blue);
}
{{< /highlight >}}