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

Add and document additional :root CSS variables

Browse Source 
- Adds grayscale colors
- Adds root and body variables

Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
This commit is contained in:
Mark Otto
2021-07-18 20:38:30 -07:00
committed by Mark Otto
parent e72916e5b7
commit 4d7911a27b
4 changed files with 68 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
scss/_root.scss
View File

@@ -1,9 +1,18 @@
:root {
// Custom variable values only support SassScript inside `#{}`.
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
//
// Generate palettes for full colors, grays, and theme colors.
@each $color, $value in $colors {
--#{$variable-prefix}#{$color}: #{$value};
}
@each $color, $value in $grays {
--#{$variable-prefix}gray-#{$color}: #{$value};
}
@each $color, $value in $theme-colors {
--#{$variable-prefix}#{$color}: #{$value};
}
@@ -16,9 +25,29 @@
--#{$variable-prefix}black-rgb: #{to-rgb($black)};
--#{$variable-prefix}body-rgb: #{to-rgb($body-color)};
// Use `inspect` for lists so that quoted items keep the quotes.
// Fonts
// Note: Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
--#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
--#{$variable-prefix}gradient: #{$gradient};
// Root and body
// stylelint-disable custom-property-empty-line-before
// scss-docs-start root-body-variables
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
// scss-docs-end root-body-variables
// stylelint-enable custom-property-empty-line-before
}