rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

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)

Browse Source
This commit is contained in:
Mark Otto 2016-12-21 21:40:26 -08:00 committed by Mark Otto
parent ecba56828d
commit 80674b0c58
14 changed files with 44 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/navbar.md
View 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>

2
docs/examples/album/index.html
View 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>

2
docs/examples/carousel/index.html
View 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">

2
docs/examples/dashboard/index.html
View 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>

2
docs/examples/jumbotron/index.html
View 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">

11
docs/examples/justified-nav/justified-nav.css
View 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;
}
}

2
docs/examples/navbar-top-fixed/index.html
View 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">

2
docs/examples/navbar-top/index.html
View 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">

6
docs/examples/navbars/index.html
View 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">

2
docs/examples/offcanvas/index.html
View 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">

2
docs/examples/starter-template/index.html
View 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">

2
docs/examples/sticky-footer-navbar/index.html
View 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">

20
scss/_navbar.scss
View File

@ -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;
}
}

12
scss/_variables.scss
View 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;