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

CSS: new $navbar-* aliases for $navbar-light-* Sass vars

Browse Source
This commit is contained in:
Julien Déramond 2023-11-27 13:09:41 +01:00
parent 32147914d4
commit e70c2aa4cf
No known key found for this signature in database
GPG Key ID: DCD226672FC08F31
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_navbar.scss
View File

@ -7,21 +7,21 @@
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
--#{$prefix}navbar-color: #{$navbar-light-color};
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
--#{$prefix}navbar-color: #{$navbar-color};
--#{$prefix}navbar-hover-color: #{$navbar-hover-color};
--#{$prefix}navbar-disabled-color: #{$navbar-disabled-color};
--#{$prefix}navbar-active-color: #{$navbar-active-color};
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
--#{$prefix}navbar-brand-color: #{$navbar-brand-color};
--#{$prefix}navbar-brand-hover-color: #{$navbar-brand-hover-color};
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-toggler-icon-bg)};
--#{$prefix}navbar-toggler-border-color: #{$navbar-toggler-border-color};
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

31
scss/_variables.scss
View File

@ -1186,9 +1186,26 @@ $nav-underline-link-active-color: var(--#{$prefix}emphasis-color) !default;
// Navbar
// scss-docs-start navbar-deprecated-variables
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default; // Deprecated in v5.3
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default; // Deprecated in v5.3
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default; // Deprecated in v5.3
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default; // Deprecated in v5.3
$navbar-light-icon-color: rgba($body-color, .75) !default; // Deprecated in v5.3
$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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default; // Deprecated in v5.3
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default; // Deprecated in v5.3
$navbar-light-brand-color: $navbar-light-active-color !default; // Deprecated in v5.3
$navbar-light-brand-hover-color: $navbar-light-active-color !default; // Deprecated in v5.3
// scss-docs-end navbar-deprecated-variables
// scss-docs-start navbar-variables
$navbar-padding-y: $spacer * .5 !default;
$navbar-padding-x: null !default;
$navbar-color: $navbar-light-color !default;
$navbar-hover-color: $navbar-light-hover-color !default;
$navbar-active-color: $navbar-light-active-color !default;
$navbar-disabled-color: $navbar-light-disabled-color !default;
$navbar-icon-color: $navbar-light-icon-color !default;
$navbar-nav-link-padding-x: .5rem !default;
@ -1198,6 +1215,8 @@ $nav-link-height: $font-size-base * $line-height-base + $nav-l
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * .5 !default;
$navbar-brand-margin-end: 1rem !default;
$navbar-brand-color: if($navbar-light-active-color == $navbar-light-brand-color, $navbar-active-color, $navbar-light-brand-color) !default;
$navbar-brand-hover-color: if($navbar-light-brand-hover-color == $navbar-light-active-color, $navbar-active-color, $navbar-light-brand-hover-color) !default;
$navbar-toggler-padding-y: .25rem !default;
$navbar-toggler-padding-x: .75rem !default;
@ -1205,16 +1224,8 @@ $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;
$navbar-light-color: rgba(var(--#{$prefix}emphasis-color-rgb), .65) !default;
$navbar-light-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
$navbar-light-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
$navbar-light-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
$navbar-light-icon-color: rgba($body-color, .75) !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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15) !default;
$navbar-light-brand-color: $navbar-light-active-color !default;
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
$navbar-toggler-icon-bg: if($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-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{if($navbar-light-icon-color == rgba($body-color, .75), $navbar-icon-color, $navbar-light-icon-color)}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"), $navbar-light-toggler-icon-bg) !default; // Deprecated in v5.3
$navbar-toggler-border-color: $navbar-light-toggler-border-color !default;
// scss-docs-end navbar-variables
// scss-docs-start navbar-dark-variables

4
site/content/docs/5.3/components/navbar.md
View File

@ -806,6 +806,10 @@ Variables for all navbars:
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
Deprecated variables for the [light navbar](#color-schemes):
{{< scss-docs name="navbar-deprecated-variables" file="scss/_variables.scss" >}}
Variables for the [dark navbar](#color-schemes):
{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}