]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
fixes #18115: move forward with one naming scheme for inversed color schemes, renamin...
authorMark Otto <markdotto@gmail.com>
Thu, 22 Dec 2016 05:40:26 +0000 (21:40 -0800)
committerMark Otto <markd.otto@gmail.com>
Thu, 22 Dec 2016 21:48:07 +0000 (13:48 -0800)
14 files changed:
docs/components/navbar.md
docs/examples/album/index.html
docs/examples/carousel/index.html
docs/examples/dashboard/index.html
docs/examples/jumbotron/index.html
docs/examples/justified-nav/justified-nav.css
docs/examples/navbar-top-fixed/index.html
docs/examples/navbar-top/index.html
docs/examples/navbars/index.html
docs/examples/offcanvas/index.html
docs/examples/starter-template/index.html
docs/examples/sticky-footer-navbar/index.html
scss/_navbar.scss
scss/_variables.scss

index 2b0b837bede2d83acdefaea2d3d8bc3d1c274ab6..7d0656d4b38d3e9b652f4892ff5ea701f85a0c10 100644 (file)
@@ -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.
 
 <div class="bd-example">
-  <nav class="navbar navbar-dark navbar-toggleable-md bg-inverse">
+  <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse">
     <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button>
     <a class="navbar-brand" href="#">Navbar</a>
 
@@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
     </div>
   </nav>
 
-  <nav class="navbar navbar-dark navbar-toggleable-md bg-primary">
+  <nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
     <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"></button>
     <a class="navbar-brand" href="#">Navbar</a>
 
@@ -348,11 +348,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 </div>
 
 {% highlight html %}
-<nav class="navbar navbar-dark bg-inverse">
+<nav class="navbar navbar-inverse bg-inverse">
   <!-- Navbar content -->
 </nav>
 
-<nav class="navbar navbar-dark bg-primary">
+<nav class="navbar navbar-inverse bg-primary">
   <!-- Navbar content -->
 </nav>
 
@@ -478,7 +478,7 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
       <span class="text-muted">Toggleable via the navbar brand.</span>
     </div>
   </div>
-  <nav class="navbar navbar-dark bg-inverse">
+  <nav class="navbar navbar-inverse bg-inverse">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button>
   </nav>
 </div>
index 237c2e98061e4a20184b59cb676f1bbe6a85afd7..217ee5877c4aff23ac75462572c43b1459298d90 100644 (file)
@@ -38,7 +38,7 @@
         </div>
       </div>
     </div>
-    <div class="navbar navbar-dark bg-inverse navbar-toggleable-sm">
+    <div class="navbar navbar-inverse bg-inverse navbar-toggleable-sm">
       <div class="container flex-items-between">
         <a href="#" class="navbar-brand">Album</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button>
index fbfe0153105222e785f24377262a753bd3d0360b..f591235368b785437ae71f1e176587a6e5b4e5df 100644 (file)
@@ -19,7 +19,7 @@
   </head>
   <body>
 
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Carousel</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
index 9abbcf19d57cce8fe338d935091d07716cf7a60d..96133e61abcd81549aa8494326ef49e5b1814462 100644 (file)
@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
       <div class="collapse navbar-toggleable-sm" id="navbar">
         <a class="navbar-brand" href="#">Project name</a>
index 27572dbfe5f372be8e8cb03dce9cbcea3c2f7aad..f926b71f3af316a33dc6081750de93c9b0896c76 100644 (file)
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">
index fdec2a433458f3269af068e1b33dd2a5dadee01b..2f6de026e8d3efd622a3f680a7b1c5475ea80a17 100644 (file)
@@ -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;
   }
 }
 
index 6f2964720e043273a128391514821f68e27dec89..c38aaef1b12d1cd912524cda7e852b5cc848707f 100644 (file)
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
index e685523856726da3bad38d0aae48f524cd9fe811..04c03ac2181385e7a4633e92c9d5fb136ee1d395 100644 (file)
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark navbar-toggleable-md bg-inverse mb-3">
+    <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
index fcef38de23151dd507845dd7541af8fc71de8eb0..934c2cd0338d8bf1c5a9758b891e9bee0da3c4b2 100644 (file)
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Navbar</a>
 
@@ -51,7 +51,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <div class="container">
         <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
         <a class="navbar-brand" href="#">Container</a>
@@ -84,7 +84,7 @@
       </div>
     </nav>
 
-    <nav class="navbar navbar-dark bg-inverse">
+    <nav class="navbar navbar-inverse bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
 
       <div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">
index f43e0e5d5e500ead6b60a676d5185a4907f2b713..53f2db1602c956b91ca5927ce0dd54dbd67834f5 100644 (file)
@@ -19,7 +19,7 @@
   </head>
 
   <body>
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <div class="container">
         <a class="navbar-brand" href="#">Project name</a>
         <ul class="nav navbar-nav">
index cb45245aabb08c7d13f941ee46f11515aff8fbb9..fe6dfc0691f59d4d499b24102f457c709ed09b91 100644 (file)
@@ -20,7 +20,7 @@
 
   <body>
 
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
+    <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
       <a class="navbar-brand" href="#">Project name</a>
       <ul class="nav navbar-nav">
         <li class="nav-item active">
index a78be094d0e586d49deffb13edd9744dfdc49875..bc2708a5056a77c9ffeb90acf7ebc1f2cb35ce53 100644 (file)
@@ -21,7 +21,7 @@
   <body>
 
     <!-- Fixed navbar -->
-    <nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse">
+    <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
       <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
       <a class="navbar-brand" href="#">Fixed navbar</a>
       <div class="collapse navbar-collapse" id="navbarCollapse">
index 7a18c41f59e46db29f5c5920376146e25b8c7c6c..49ac07178937e82e54893c89036b88509ab42fe8 100644 (file)
 }
 
 // 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;
       }
     }
 
     .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 {
   }
 
   .navbar-text {
-    color: $navbar-dark-color;
+    color: $navbar-inverse-color;
   }
 }
 
index 2889d6d493dbd6fbd97e7b978925d8c03080e63f..8fd381861934850828c6bf392c4e35635f3b770d 100644 (file)
@@ -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;