From: Mark Otto Date: Thu, 22 Dec 2016 05:40:26 +0000 (-0800) Subject: fixes #18115: move forward with one naming scheme for inversed color schemes, renamin... X-Git-Tag: v4.0.0-alpha.6~257 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=80674b0c58e3fd8ce76ba94d1075d62c2db6af37;p=thirdparty%2Fbootstrap.git fixes #18115: move forward with one naming scheme for inversed color schemes, renaming .navbar-dark to .navbar-inverse (matching .card-inverse in the process and restoring v3's inverted class name) --- diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 2b0b837bed..7d0656d4b3 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -265,10 +265,10 @@ Mix and match with other components and utilities as needed. ## Color schemes -Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities. +Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities.

@@ -348,11 +348,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl {% highlight html %} -

+ -

+ @@ -478,7 +478,7 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher Toggleable via the navbar brand. -

+ diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html index 237c2e9806..217ee5877c 100644 --- a/docs/examples/album/index.html +++ b/docs/examples/album/index.html @@ -38,7 +38,7 @@ -

diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index fbfe015310..f591235368 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -19,7 +19,7 @@ -

diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index 9abbcf19d5..96133e61ab 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -19,7 +19,7 @@ -

diff --git a/docs/examples/jumbotron/index.html b/docs/examples/jumbotron/index.html index 27572dbfe5..f926b71f3a 100644 --- a/docs/examples/jumbotron/index.html +++ b/docs/examples/jumbotron/index.html @@ -20,7 +20,7 @@ -

diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css index fdec2a4334..2f6de026e8 100644 --- a/docs/examples/justified-nav/justified-nav.css +++ b/docs/examples/justified-nav/justified-nav.css @@ -20,17 +20,26 @@ body { } .navbar { + background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee)); + background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%); + background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%); background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%); border: 1px solid #e5e5e5; } @media (min-width: 768px) { .navbar-nav { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .navbar-nav .nav-item { - flex: 1 0 auto; + -webkit-box-flex: 1; + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } } diff --git a/docs/examples/navbar-top-fixed/index.html b/docs/examples/navbar-top-fixed/index.html index 6f2964720e..c38aaef1b1 100644 --- a/docs/examples/navbar-top-fixed/index.html +++ b/docs/examples/navbar-top-fixed/index.html @@ -20,7 +20,7 @@ -
+
Fixed navbar
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html index e685523856..04c03ac218 100644 --- a/docs/examples/navbar-top/index.html +++ b/docs/examples/navbar-top/index.html @@ -20,7 +20,7 @@ -
+
Fixed navbar
diff --git a/docs/examples/navbars/index.html b/docs/examples/navbars/index.html index fcef38de23..934c2cd033 100644 --- a/docs/examples/navbars/index.html +++ b/docs/examples/navbars/index.html @@ -20,7 +20,7 @@ -
+
Navbar @@ -51,7 +51,7 @@

-
+

Container @@ -84,7 +84,7 @@

-
+

diff --git a/docs/examples/offcanvas/index.html b/docs/examples/offcanvas/index.html index f43e0e5d5e..53f2db1602 100644 --- a/docs/examples/offcanvas/index.html +++ b/docs/examples/offcanvas/index.html @@ -19,7 +19,7 @@ -
+

Project name
diff --git a/docs/examples/starter-template/index.html b/docs/examples/starter-template/index.html index cb45245aab..fe6dfc0691 100644 --- a/docs/examples/starter-template/index.html +++ b/docs/examples/starter-template/index.html @@ -20,7 +20,7 @@ -
+
Project name

diff --git a/docs/examples/sticky-footer-navbar/index.html b/docs/examples/sticky-footer-navbar/index.html index a78be094d0..bc2708a505 100644 --- a/docs/examples/sticky-footer-navbar/index.html +++ b/docs/examples/sticky-footer-navbar/index.html @@ -21,7 +21,7 @@ -
+
Fixed navbar
diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 7a18c41f59..49ac071789 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -177,26 +177,26 @@ } // White links against a dark background -.navbar-dark { +.navbar-inverse { .navbar-brand, .navbar-toggler { - color: $navbar-dark-active-color; + color: $navbar-inverse-active-color; @include hover-focus { - color: $navbar-dark-active-color; + color: $navbar-inverse-active-color; } } .navbar-nav { .nav-link { - color: $navbar-dark-color; + color: $navbar-inverse-color; @include hover-focus { - color: $navbar-dark-hover-color; + color: $navbar-inverse-hover-color; } &.disabled { - color: $navbar-dark-disabled-color; + color: $navbar-inverse-disabled-color; } } @@ -205,14 +205,14 @@ .nav-link.open, .nav-link.active { @include plain-hover-focus { - color: $navbar-dark-active-color; + color: $navbar-inverse-active-color; } } } .navbar-toggler { - background-image: $navbar-dark-toggler-bg; - border-color: $navbar-dark-toggler-border; + background-image: $navbar-inverse-toggler-bg; + border-color: $navbar-inverse-toggler-border; } .navbar-divider { @@ -220,7 +220,7 @@ } .navbar-text { - color: $navbar-dark-color; + color: $navbar-inverse-color; } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 2889d6d493..8fd3818619 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -596,12 +596,12 @@ $navbar-toggler-padding-y: .5rem !default; $navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-border-radius: $btn-border-radius !default; -$navbar-dark-color: rgba(255,255,255,.5) !default; -$navbar-dark-hover-color: rgba(255,255,255,.75) !default; -$navbar-dark-active-color: rgba(255,255,255,1) !default; -$navbar-dark-disabled-color: rgba(255,255,255,.25) !default; -$navbar-dark-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; -$navbar-dark-toggler-border: rgba(255,255,255,.1) !default; +$navbar-inverse-color: rgba(255,255,255,.5) !default; +$navbar-inverse-hover-color: rgba(255,255,255,.75) !default; +$navbar-inverse-active-color: rgba(255,255,255,1) !default; +$navbar-inverse-disabled-color: rgba(255,255,255,.25) !default; +$navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; +$navbar-inverse-toggler-border: rgba(255,255,255,.1) !default; $navbar-light-color: rgba(0,0,0,.5) !default; $navbar-light-hover-color: rgba(0,0,0,.7) !default;