diff options
author | Julien Déramond <juderamond@gmail.com> | 2022-08-26 16:27:23 +0300 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2022-09-01 04:15:11 +0300 |
commit | a138bc3fb9ff3495a8d63d776e0ad21ed2aaa1ca (patch) | |
tree | 412ae0619e3fa231f00a5bce45b49d27ccd8a93b | |
parent | bc2ec7c7583bed6f51571501739c9e7d57e3ba2f (diff) |
More consistency for CSS/Sass vars doc for components with dark variants
-rw-r--r-- | scss/_navbar.scss | 2 | ||||
-rw-r--r-- | scss/_variables.scss | 31 | ||||
-rw-r--r-- | site/content/docs/5.2/components/carousel.md | 6 | ||||
-rw-r--r-- | site/content/docs/5.2/components/navbar.md | 10 |
4 files changed, 33 insertions, 16 deletions
diff --git a/scss/_navbar.scss b/scss/_navbar.scss index fd6603d427..599b055ebc 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -265,6 +265,7 @@ } .navbar-dark { + // scss-docs-start navbar-dark-css-vars --#{$prefix}navbar-color: #{$navbar-dark-color}; --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color}; --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color}; @@ -273,4 +274,5 @@ --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color}; --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; + // scss-docs-end navbar-dark-css-vars } diff --git a/scss/_variables.scss b/scss/_variables.scss index 82d33b0baf..07ce922f33 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1100,15 +1100,6 @@ $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-focus-width: $btn-focus-width !default; $navbar-toggler-transition: box-shadow .15s ease-in-out !default; -// scss-docs-end navbar-variables - -// scss-docs-start navbar-theme-variables -$navbar-dark-color: rgba($white, .55) !default; -$navbar-dark-hover-color: rgba($white, .75) !default; -$navbar-dark-active-color: $white !default; -$navbar-dark-disabled-color: rgba($white, .25) !default; -$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; -$navbar-dark-toggler-border-color: rgba($white, .1) !default; $navbar-light-color: rgba($black, .55) !default; $navbar-light-hover-color: rgba($black, .7) !default; @@ -1116,12 +1107,20 @@ $navbar-light-active-color: rgba($black, .9) !default; $navbar-light-disabled-color: rgba($black, .3) !default; $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; $navbar-light-toggler-border-color: rgba($black, .1) !default; +$navbar-light-brand-color: $navbar-light-active-color !default; +$navbar-light-brand-hover-color: $navbar-light-active-color !default; +// scss-docs-end navbar-variables -$navbar-light-brand-color: $navbar-light-active-color !default; -$navbar-light-brand-hover-color: $navbar-light-active-color !default; -$navbar-dark-brand-color: $navbar-dark-active-color !default; -$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; -// scss-docs-end navbar-theme-variables +// scss-docs-start navbar-dark-variables +$navbar-dark-color: rgba($white, .55) !default; +$navbar-dark-hover-color: rgba($white, .75) !default; +$navbar-dark-active-color: $white !default; +$navbar-dark-disabled-color: rgba($white, .25) !default; +$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; +$navbar-dark-toggler-border-color: rgba($white, .1) !default; +$navbar-dark-brand-color: $navbar-dark-active-color !default; +$navbar-dark-brand-hover-color: $navbar-dark-active-color !default; +// scss-docs-end navbar-dark-variables // Dropdowns @@ -1560,11 +1559,13 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http:// $carousel-transition-duration: .6s !default; $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) +// scss-docs-end carousel-variables +// scss-docs-start carousel-dark-variables $carousel-dark-indicator-active-bg: $black !default; $carousel-dark-caption-color: $black !default; $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; -// scss-docs-end carousel-variables +// scss-docs-end carousel-dark-variables // Spinners diff --git a/site/content/docs/5.2/components/carousel.md b/site/content/docs/5.2/components/carousel.md index ec9aa466c5..327916b2c0 100644 --- a/site/content/docs/5.2/components/carousel.md +++ b/site/content/docs/5.2/components/carousel.md @@ -287,8 +287,14 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t ### Variables +Variables for all carousels: + {{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}} +Variables for the [dark carousel](#dark-variant): + +{{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}} + ## Usage ### Via data attributes diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md index bc4792a676..b37db0f923 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.2/components/navbar.md @@ -792,11 +792,19 @@ Some additional CSS variables are also present on `.navbar-nav`: {{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}} +Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors. + +{{< scss-docs name="navbar-dark-css-vars" file="scss/_navbar.scss" >}} + ### Sass variables +Variables for all navbars: + {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}} -{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}} +Variables for the [dark navbar](#color-schemes): + +{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}} ### Sass loop |