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

Add Sass variable for CSS variable prefix (#31684)

Browse source 
* Add Sass variable for CSS variable prefix

* Update other --bs-* var instances
This commit is contained in:
Mark Otto 2020-09-29 22:32:58 -07:00 • committed by GitHub
parent 7e195a8d22
commit 3cf51c6ac9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 56 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
scss/_root.scss
View file

@ -1,16 +1,16 @@
: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 {
--bs-#{$color}: #{$value}; --#{$variable-prefix}#{$color}: #{$value};
} }
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
--bs-#{$color}: #{$value}; --#{$variable-prefix}#{$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
--bs-font-sans-serif: #{inspect($font-family-sans-serif)}; --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--bs-font-monospace: #{inspect($font-family-monospace)}; --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
--bs-gradient: #{$gradient}; --#{$variable-prefix}gradient: #{$gradient};
} }

32
scss/_tables.scss
View file

@ -3,14 +3,14 @@
// //
.table { .table {
--bs-table-bg: #{$table-bg}; --#{$variable-prefix}table-bg: #{$table-bg};
--bs-table-accent-bg: transparent; --#{$variable-prefix}table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color}; --#{$variable-prefix}table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg}; --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color}; --#{$variable-prefix}table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg}; --#{$variable-prefix}table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color}; --#{$variable-prefix}table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg}; --#{$variable-prefix}table-hover-bg: #{$table-hover-bg};
width: 100%; width: 100%;
margin-bottom: $spacer; margin-bottom: $spacer;
@ -25,8 +25,8 @@
// stylelint-disable-next-line selector-max-universal // stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * { > :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x; padding: $table-cell-padding-y $table-cell-padding-x;
background-color: var(--bs-table-bg); background-color: var(--#{$variable-prefix}table-bg);
background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg)); background-image: linear-gradient(var(--#{$variable-prefix}table-accent-bg), var(--#{$variable-prefix}table-accent-bg));
border-bottom-width: $table-border-width; border-bottom-width: $table-border-width;
} }
@ -99,8 +99,8 @@
.table-striped { .table-striped {
> tbody > tr:nth-of-type(#{$table-striped-order}) { > tbody > tr:nth-of-type(#{$table-striped-order}) {
--bs-table-accent-bg: var(--bs-table-striped-bg); --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
color: var(--bs-table-striped-color); color: var(--#{$variable-prefix}table-striped-color);
} }
} }
@ -109,8 +109,8 @@
// The `.table-active` class can be added to highlight rows or cells // The `.table-active` class can be added to highlight rows or cells
.table-active { .table-active {
--bs-table-accent-bg: var(--bs-table-active-bg); --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-active-bg);
color: var(--bs-table-active-color); color: var(--#{$variable-prefix}table-active-color);
} }
// Hover effect // Hover effect
@ -119,8 +119,8 @@
.table-hover { .table-hover {
> tbody > tr:hover { > tbody > tr:hover {
--bs-table-accent-bg: var(--bs-table-hover-bg); --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
color: var(--bs-table-hover-color); color: var(--#{$variable-prefix}table-hover-color);
} }
} }

4
scss/_utilities.scss
View file

@ -448,7 +448,7 @@ $utilities: map-merge(
"gradient": ( "gradient": (
property: background-image, property: background-image,
class: bg, class: bg,
values: (gradient: var(--bs-gradient)) values: (gradient: var(--#{$variable-prefix}gradient))
), ),
"white-space": ( "white-space": (
property: white-space, property: white-space,
@ -475,7 +475,7 @@ $utilities: map-merge(
"font-family": ( "font-family": (
property: font-family, property: font-family,
class: font, class: font,
values: (monospace: var(--bs-font-monospace)) values: (monospace: var(--#{$variable-prefix}font-monospace))
), ),
"user-select": ( "user-select": (
property: user-select, property: user-select,

8
scss/_variables.scss
View file

@ -222,6 +222,10 @@ $enable-negative-margins: false !default;
$enable-deprecation-messages: true !default; $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default; $enable-important-utilities: true !default;
// Prefix for :root CSS variables
$variable-prefix: bs- !default;
// Gradient // Gradient
// //
// The gradient which is added to components if `$enable-gradients` is `true` // The gradient which is added to components if `$enable-gradients` is `true`
@ -395,8 +399,8 @@ $aspect-ratios: (
$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;
// stylelint-enable value-keyword-case // stylelint-enable value-keyword-case
$font-family-base: var(--bs-font-sans-serif) !default; $font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--bs-font-monospace) !default; $font-family-code: var(--#{$variable-prefix}font-monospace) !default;
// $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
// $font-size-base effects the font size of the body text // $font-size-base effects the font size of the body text

8
scss/forms/_form-check.scss
View file

@ -53,7 +53,7 @@
&[type="checkbox"] { &[type="checkbox"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-checked-bg-image), var(--bs-gradient); background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-checked-bg-image); background-image: escape-svg($form-check-input-checked-bg-image);
} }
@ -61,7 +61,7 @@
&[type="radio"] { &[type="radio"] {
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-radio-checked-bg-image), var(--bs-gradient); background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-radio-checked-bg-image); background-image: escape-svg($form-check-radio-checked-bg-image);
} }
@ -73,7 +73,7 @@
border-color: $form-check-input-indeterminate-border-color; border-color: $form-check-input-indeterminate-border-color;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--bs-gradient); background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-check-input-indeterminate-bg-image); background-image: escape-svg($form-check-input-indeterminate-bg-image);
} }
@ -122,7 +122,7 @@
background-position: $form-switch-checked-bg-position; background-position: $form-switch-checked-bg-position;
@if $enable-gradients { @if $enable-gradients {
background-image: escape-svg($form-switch-checked-bg-image), var(--bs-gradient); background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
} @else { } @else {
background-image: escape-svg($form-switch-checked-bg-image); background-image: escape-svg($form-switch-checked-bg-image);
} }

10
scss/forms/_form-file.scss
View file

@ -1,5 +1,5 @@
.form-file { .form-file {
--bs-form-file-height: #{$form-file-height}; --#{$variable-prefix}form-file-height: #{$form-file-height};
position: relative; position: relative;
} }
@ -7,7 +7,7 @@
position: relative; position: relative;
z-index: 2; z-index: 2;
width: 100%; width: 100%;
height: var(--bs-form-file-height); height: var(--#{$variable-prefix}form-file-height);
margin: 0; margin: 0;
opacity: 0; opacity: 0;
@ -32,7 +32,7 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
display: flex; display: flex;
height: var(--bs-form-file-height); height: var(--#{$variable-prefix}form-file-height);
border-color: $form-file-border-color; border-color: $form-file-border-color;
@include border-radius($form-file-border-radius); @include border-radius($form-file-border-radius);
@include box-shadow($form-file-box-shadow); @include box-shadow($form-file-box-shadow);
@ -71,7 +71,7 @@
} }
.form-file-sm { .form-file-sm {
--bs-form-file-height: #{$form-file-height-sm}; --#{$variable-prefix}form-file-height: #{$form-file-height-sm};
@include font-size($form-file-font-size-sm); @include font-size($form-file-font-size-sm);
.form-file-text, .form-file-text,
@ -81,7 +81,7 @@
} }
.form-file-lg { .form-file-lg {
--bs-form-file-height: #{$form-file-height-lg}; --#{$variable-prefix}form-file-height: #{$form-file-height-lg};
@include font-size($form-file-font-size-lg); @include font-size($form-file-font-size-lg);
.form-file-text, .form-file-text,

2
scss/mixins/_gradients.scss
View file

@ -4,7 +4,7 @@
background-color: $color; background-color: $color;
@if $enable-gradients { @if $enable-gradients {
background-image: var(--bs-gradient); background-image: var(--#{$variable-prefix}gradient);
} }
} }

20
scss/mixins/_grid.scss
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) {
--bs-gutter-x: #{$gutter}; --#{$variable-prefix}gutter-x: #{$gutter};
--bs-gutter-y: 0; --#{$variable-prefix}gutter-y: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-disallowed-list margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-disallowed-list margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
} }
@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(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--bs-gutter-x) / 2); // stylelint-disable-line function-disallowed-list padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
margin-top: var(--bs-gutter-y); margin-top: var(--#{$variable-prefix}gutter-y);
} }
@mixin make-col($size, $columns: $grid-columns) { @mixin make-col($size, $columns: $grid-columns) {
@ -107,12 +107,12 @@
@each $key, $value in $gutters { @each $key, $value in $gutters {
.g#{$infix}-#{$key}, .g#{$infix}-#{$key},
.gx#{$infix}-#{$key} { .gx#{$infix}-#{$key} {
--bs-gutter-x: #{$value}; --#{$variable-prefix}gutter-x: #{$value};
} }
.g#{$infix}-#{$key}, .g#{$infix}-#{$key},
.gy#{$infix}-#{$key} { .gy#{$infix}-#{$key} {
--bs-gutter-y: #{$value}; --#{$variable-prefix}gutter-y: #{$value};
} }
} }
} }

14
scss/mixins/_table-variants.scss
View file

@ -6,13 +6,13 @@
$striped-bg: mix($color, $background, percentage($table-striped-bg-factor)); $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
$active-bg: mix($color, $background, percentage($table-active-bg-factor)); $active-bg: mix($color, $background, percentage($table-active-bg-factor));
--bs-table-bg: #{$background}; --#{$variable-prefix}table-bg: #{$background};
--bs-table-striped-bg: #{$striped-bg}; --#{$variable-prefix}table-striped-bg: #{$striped-bg};
--bs-table-striped-color: #{color-contrast($striped-bg)}; --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--bs-table-active-bg: #{$active-bg}; --#{$variable-prefix}table-active-bg: #{$active-bg};
--bs-table-active-color: #{color-contrast($active-bg)}; --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--bs-table-hover-bg: #{$hover-bg}; --#{$variable-prefix}table-hover-bg: #{$hover-bg};
--bs-table-hover-color: #{color-contrast($hover-bg)}; --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
color: $color; color: $color;
border-color: mix($color, $background, percentage($table-border-factor)); border-color: mix($color, $background, percentage($table-border-factor));