Skip to content
GitLab
Commit 80674b0c authored by Mark Otto's avatar Mark Otto Committed by Mark Otto
Browse files

fixes #18115: move forward with one naming scheme for inversed color schemes,... 

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)
parent ecba5682
Hide whitespace changes
Inline Side-by-side
Showing
with 44 additions and 35 deletions
+44 -35
docs/components/navbar.md
+ 6
- 6
View file @ 80674b0c
......@@ -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>
......
docs/examples/album/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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>
......
docs/examples/carousel/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/dashboard/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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>
......
docs/examples/jumbotron/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/justified-nav/justified-nav.css
+ 10
- 1
View file @ 80674b0c
......@@ -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;
}
}
......
docs/examples/navbar-top-fixed/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/navbar-top/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/navbars/index.html
+ 3
- 3
View file @ 80674b0c
......@@ -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">
......
docs/examples/offcanvas/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/starter-template/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
docs/examples/sticky-footer-navbar/index.html
+ 1
- 1
View file @ 80674b0c
......@@ -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">
......
scss/_navbar.scss
+ 10
- 10
View file @ 80674b0c
......@@ -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;
}
}
......
scss/_variables.scss
+ 6
- 6
View file @ 80674b0c
......@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment