зеркало из https://github.com/twbs/bootstrap.git
More consistency for CSS/Sass vars doc for components with dark variants
This commit is contained in:
Родитель
bc2ec7c758
Коммит
a138bc3fb9
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче