rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-28 00:54:30 +01:00
Code Issues Actions Packages Releases Activity

Use scss-docs for color maps

Browse Source
This commit is contained in:
Mark Otto 2020-04-14 11:04:16 -07:00 committed by Mark Otto
parent cab56abd08
commit 88490fe81d
2 changed files with 6 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_variables.scss
View File

@ -42,6 +42,7 @@ $green: #28a745 !default;
$teal: #20c997 !default; $teal: #20c997 !default;
$cyan: #17a2b8 !default; $cyan: #17a2b8 !default;
// scss-docs-start colors-map
$colors: ( $colors: (
"blue": $blue, "blue": $blue,
"indigo": $indigo, "indigo": $indigo,
@ -57,6 +58,7 @@ $colors: (
"gray": $gray-600, "gray": $gray-600,
"gray-dark": $gray-800 "gray-dark": $gray-800
) !default; ) !default;
// scss-docs-end colors-map
$primary: $blue !default; $primary: $blue !default;
$secondary: $gray-600 !default; $secondary: $gray-600 !default;
@ -67,6 +69,7 @@ $danger: $red !default;
$light: $gray-100 !default; $light: $gray-100 !default;
$dark: $gray-800 !default; $dark: $gray-800 !default;
// scss-docs-start theme-colors-map
$theme-colors: ( $theme-colors: (
"primary": $primary, "primary": $primary,
"secondary": $secondary, "secondary": $secondary,
@ -77,6 +80,7 @@ $theme-colors: (
"light": $light, "light": $light,
"dark": $dark "dark": $dark
) !default; ) !default;
// scss-docs-end theme-colors-map
// Set a specific jump point for requesting color jumps // Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default; $theme-color-interval: 8% !default;

31
site/content/docs/4.3/customize/color.md
View File

@ -22,18 +22,7 @@ We use a subset of all colors to create a smaller color palette for generating c
All these colors are available as a Sass map, `$theme-colors`. All these colors are available as a Sass map, `$theme-colors`.
{{< highlight scss >}} {{< scss-docs name="theme-colors-map" file="scss/_variables.scss" >}}
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
{{< /highlight >}}
Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors. Check out [our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) for how to modify these colors.
@ -98,23 +87,7 @@ Bootstrap's source Sass files include three maps to help you quickly and easily
Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map: Within `scss/_variables.scss`, you'll find Bootstrap's color variables and Sass map. Here's an example of the `$colors` Sass map:
{{< highlight scss >}} {{< scss-docs name="colors-map" file="scss/_variables.scss" >}}
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
) !default;
{{< /highlight >}}
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map. Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.