1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00

Add and document additional :root CSS variables

- 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

View File

@@ -26,7 +26,9 @@
// null by default, thus nothing is generated.
:root {
font-size: $font-size-root;
@if $font-size-root != null {
font-size: var(--#{$variable-prefix}-root-font-size);
}
@if $enable-smooth-scroll {
@media (prefers-reduced-motion: no-preference) {
@@ -43,18 +45,20 @@
// 3. Prevent adjustments of font size after orientation changes in iOS.
// 4. Change the default tap highlight to be completely transparent in iOS.
// scss-docs-start reboot-body-rules
body {
margin: 0; // 1
font-family: $font-family-base;
@include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: $body-text-align;
background-color: $body-bg; // 2
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
// scss-docs-end reboot-body-rules
// Content grouping