mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Add additional root variables, rename $variable-prefix to $prefix (#35981)

Browse Source 
* Add additional root variables, rename $variable-prefix to $prefix

- Adds new root CSS variables for border-radius, border-width, border-color, and border-style
- Adds new root CSS variables for heading-color, link-colors, code color, and highlight color
- Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss
- Updates $mark-padding to be an even pixel number
- Renames $variable-prefix to $prefix throughout

* Bundlewatch
This commit is contained in:
Mark Otto
2022-03-13 10:13:09 -07:00
committed by GitHub
parent 7c966f5848
commit acf6ea74a7
29 changed files with 581 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scss/mixins/_alert.scss
View File

@@ -1,11 +1,11 @@
// scss-docs-start alert-variant-mixin
@mixin alert-variant($background, $border, $color) {
--#{$variable-prefix}alert-color: #{$color};
--#{$variable-prefix}alert-bg: #{$background};
--#{$variable-prefix}alert-border-color: #{$border};
--#{$prefix}alert-color: #{$color};
--#{$prefix}alert-bg: #{$background};
--#{$prefix}alert-border-color: #{$border};
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
background-image: var(--#{$prefix}gradient);
}
.alert-link {

62
scss/mixins/_buttons.scss
View File

@@ -20,20 +20,20 @@
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
--#{$variable-prefix}btn-color: #{$color};
--#{$variable-prefix}btn-bg: #{$background};
--#{$variable-prefix}btn-border-color: #{$border};
--#{$variable-prefix}btn-hover-color: #{$hover-color};
--#{$variable-prefix}btn-hover-bg: #{$hover-background};
--#{$variable-prefix}btn-hover-border-color: #{$hover-border};
--#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$variable-prefix}btn-active-color: #{$active-color};
--#{$variable-prefix}btn-active-bg: #{$active-background};
--#{$variable-prefix}btn-active-border-color: #{$active-border};
--#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$variable-prefix}btn-disabled-color: #{$disabled-color};
--#{$variable-prefix}btn-disabled-bg: #{$disabled-background};
--#{$variable-prefix}btn-disabled-border-color: #{$disabled-border};
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
--#{$prefix}btn-border-color: #{$border};
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$disabled-color};
--#{$prefix}btn-disabled-bg: #{$disabled-background};
--#{$prefix}btn-disabled-border-color: #{$disabled-border};
}
// scss-docs-end btn-variant-mixin
@@ -45,27 +45,27 @@
$active-border: $color,
$active-color: color-contrast($active-background)
) {
--#{$variable-prefix}btn-color: #{$color};
--#{$variable-prefix}btn-border-color: #{$color};
--#{$variable-prefix}btn-hover-color: #{$color-hover};
--#{$variable-prefix}btn-hover-bg: #{$active-background};
--#{$variable-prefix}btn-hover-border-color: #{$active-border};
--#{$variable-prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$variable-prefix}btn-active-color: #{$active-color};
--#{$variable-prefix}btn-active-bg: #{$active-background};
--#{$variable-prefix}btn-active-border-color: #{$active-border};
--#{$variable-prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$variable-prefix}btn-disabled-color: #{$color};
--#{$variable-prefix}btn-disabled-bg: transparent;
--#{$variable-prefix}gradient: none;
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-border-color: #{$color};
--#{$prefix}btn-hover-color: #{$color-hover};
--#{$prefix}btn-hover-bg: #{$active-background};
--#{$prefix}btn-hover-border-color: #{$active-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
--#{$prefix}btn-disabled-color: #{$color};
--#{$prefix}btn-disabled-bg: transparent;
--#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin
// scss-docs-start btn-size-mixin
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$variable-prefix}btn-padding-y: #{$padding-y};
--#{$variable-prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$variable-prefix}btn-font-size);
--#{$variable-prefix}btn-border-radius: #{$border-radius};
--#{$prefix}btn-padding-y: #{$padding-y};
--#{$prefix}btn-padding-x: #{$padding-x};
@include rfs($font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-border-radius: #{$border-radius};
}
// scss-docs-end btn-size-mixin

8
scss/mixins/_container.scss
View File

@@ -1,11 +1,11 @@
// Container mixins
@mixin make-container($gutter: $container-padding-x) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
width: 100%;
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-right: auto;
margin-left: auto;
}

2
scss/mixins/_gradients.scss
View File

@@ -5,7 +5,7 @@
background-color: $color;
@if $enable-gradients {
background-image: var(--#{$variable-prefix}gradient);
background-image: var(--#{$prefix}gradient);
}
}
// scss-docs-end gradient-bg-mixin

20
scss/mixins/_grid.scss
View File

@@ -3,14 +3,14 @@
// Generate semantic grid columns with these mixins.
@mixin make-row($gutter: $grid-gutter-width) {
--#{$variable-prefix}gutter-x: #{$gutter};
--#{$variable-prefix}gutter-y: 0;
--#{$prefix}gutter-x: #{$gutter};
--#{$prefix}gutter-y: 0;
display: flex;
flex-wrap: wrap;
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}
@mixin make-col-ready() {
@@ -22,9 +22,9 @@
flex-shrink: 0;
width: 100%;
max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$variable-prefix}gutter-y);
padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
margin-top: var(--#{$prefix}gutter-y);
}
@mixin make-col($size: false, $columns: $grid-columns) {
@@ -114,12 +114,12 @@
@each $key, $value in $gutters {
.g#{$infix}-#{$key},
.gx#{$infix}-#{$key} {
--#{$variable-prefix}gutter-x: #{$value};
--#{$prefix}gutter-x: #{$value};
}
.g#{$infix}-#{$key},
.gy#{$infix}-#{$key} {
--#{$variable-prefix}gutter-y: #{$value};
--#{$prefix}gutter-y: #{$value};
}
}
}

8
scss/mixins/_pagination.scss
View File

@@ -2,9 +2,9 @@
// scss-docs-start pagination-mixin
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
--#{$variable-prefix}pagination-padding-x: #{$padding-x};
--#{$variable-prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$variable-prefix}pagination-font-size);
--#{$variable-prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
--#{$prefix}pagination-padding-x: #{$padding-x};
--#{$prefix}pagination-padding-y: #{$padding-y};
@include rfs($font-size, --#{$prefix}pagination-font-size);
--#{$prefix}pagination-border-radius: #{$border-radius}; // stylelint-disable-line custom-property-empty-line-before
}
// scss-docs-end pagination-mixin

22
scss/mixins/_table-variants.scss
View File

@@ -7,18 +7,18 @@
$active-bg: mix($color, $background, percentage($table-active-bg-factor));
$border-color: mix($color, $background, percentage($table-border-factor));
--#{$variable-prefix}table-color: #{$color};
--#{$variable-prefix}table-bg: #{$background};
--#{$variable-prefix}table-border-color: #{$border-color};
--#{$variable-prefix}table-striped-bg: #{$striped-bg};
--#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$variable-prefix}table-active-bg: #{$active-bg};
--#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
--#{$variable-prefix}table-hover-bg: #{$hover-bg};
--#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};
--#{$prefix}table-color: #{$color};
--#{$prefix}table-bg: #{$background};
--#{$prefix}table-border-color: #{$border-color};
--#{$prefix}table-striped-bg: #{$striped-bg};
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
--#{$prefix}table-active-bg: #{$active-bg};
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
--#{$prefix}table-hover-bg: #{$hover-bg};
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
color: var(--#{$variable-prefix}table-color);
border-color: var(--#{$variable-prefix}table-border-color);
color: var(--#{$prefix}table-color);
border-color: var(--#{$prefix}table-border-color);
}
}
// scss-docs-end table-variant

6
scss/mixins/_utilities.scss
View File

@@ -55,12 +55,12 @@
@if $is-css-var {
.#{$property-class + $infix + $property-class-modifier} {
--#{$variable-prefix}#{$css-variable-name}: #{$value};
--#{$prefix}#{$css-variable-name}: #{$value};
}
@each $pseudo in $state {
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
--#{$variable-prefix}#{$css-variable-name}: #{$value};
--#{$prefix}#{$css-variable-name}: #{$value};
}
}
} @else {
@@ -68,7 +68,7 @@
@each $property in $properties {
@if $is-local-vars {
@each $local-var, $variable in $is-local-vars {
--#{$variable-prefix}#{$local-var}: #{$variable};
--#{$prefix}#{$local-var}: #{$variable};
}
}
#{$property}: $value if($enable-important-utilities, !important, null);