0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00

Add bs- prefixes to custom properties (#30591)

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

View File

@ -283,7 +283,7 @@ pre,
code, code,
kbd, kbd,
samp { 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. @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
} }

View File

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

View File

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

View File

@ -376,7 +376,7 @@ $embed-responsive-aspect-ratios: (
// stylelint-disable value-keyword-case // 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-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-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 // stylelint-enable value-keyword-case
// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins

View File

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

View File

@ -399,7 +399,7 @@ Should you need to modify your `$grid-breakpoints`, your changes will apply to a
## CSS variables ## 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 ### Available variables
@ -425,9 +425,9 @@ CSS variables offer similar flexibility to Sass's variables, but without the nee
{{< highlight css >}} {{< highlight css >}}
body { body {
font: 1rem/1.5 var(--font-family-sans-serif); font: 1rem/1.5 var(--bs-font-sans-serif);
} }
a { a {
color: var(--blue); color: var(--bs-blue);
} }
{{< /highlight >}} {{< /highlight >}}