Skip to content

B
bootstrap
Commit ff02043b authored by Mark Otto's avatar Mark Otto
Browse files
Options

Flatten navbar

parent a33d45f3
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 55 deletions
docs/assets/css/bootstrap.css
View file @ ff02043b
...@@ -3058,10 +3058,7 @@ fieldset[disabled] .btn-link:hover { ...@@ -3058,10 +3058,7 @@ fieldset[disabled] .btn-link:hover {
margin-bottom: 20px; margin-bottom: 20px;
overflow: visible; overflow: visible;
background-color: #f2f2f2; background-color: #f2f2f2;
border: 1px solid #d4d4d4;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
} }
.navbar:before, .navbar:before,
...@@ -3225,16 +3222,8 @@ fieldset[disabled] .btn-link:hover { ...@@ -3225,16 +3222,8 @@ fieldset[disabled] .btn-link:hover {
top: 0; top: 0;
} }
.navbar-fixed-top,
.navbar-static-top {
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
-webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
} }
.navbar .nav { .navbar .nav {
...@@ -3424,8 +3413,7 @@ fieldset[disabled] .navbar .btn-navbar { ...@@ -3424,8 +3413,7 @@ fieldset[disabled] .navbar .btn-navbar {
} }
.navbar-inverse { .navbar-inverse {
background-color: #111111; background-color: #222222;
border-color: #111111;
} }
.navbar-inverse .brand, .navbar-inverse .brand,
...@@ -3457,7 +3445,7 @@ fieldset[disabled] .navbar .btn-navbar { ...@@ -3457,7 +3445,7 @@ fieldset[disabled] .navbar .btn-navbar {
.navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus { .navbar-inverse .nav .active > a:focus {
color: #ffffff; color: #ffffff;
background-color: #111111; background-color: #222222;
} }
.navbar-inverse .navbar-link { .navbar-inverse .navbar-link {
...@@ -3470,14 +3458,14 @@ fieldset[disabled] .navbar .btn-navbar { ...@@ -3470,14 +3458,14 @@ fieldset[disabled] .navbar .btn-navbar {
.navbar-inverse .divider-vertical { .navbar-inverse .divider-vertical {
border-right-color: #222222; border-right-color: #222222;
border-left-color: #111111; border-left-color: #222222;
} }
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle { .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
color: #ffffff; color: #ffffff;
background-color: #111111; background-color: #222222;
} }
.navbar-inverse .nav li.dropdown > a:hover .caret { .navbar-inverse .nav li.dropdown > a:hover .caret {
...@@ -3499,8 +3487,8 @@ fieldset[disabled] .navbar .btn-navbar { ...@@ -3499,8 +3487,8 @@ fieldset[disabled] .navbar .btn-navbar {
.navbar-inverse .navbar-search .search-query { .navbar-inverse .navbar-search .search-query {
color: #fff; color: #fff;
background-color: #515151; background-color: #626262;
border-color: #111111; border-color: #222222;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
-webkit-transition: none; -webkit-transition: none;
...@@ -3536,22 +3524,22 @@ fieldset[disabled] .navbar .btn-navbar { ...@@ -3536,22 +3524,22 @@ fieldset[disabled] .navbar .btn-navbar {
.navbar-inverse .btn-navbar { .navbar-inverse .btn-navbar {
color: #ffffff; color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #040404; background-color: #151515;
background-image: -moz-linear-gradient(top, #151515, #040404); background-image: -moz-linear-gradient(top, #151515, #151515);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#151515));
background-image: -webkit-linear-gradient(top, #151515, #040404); background-image: -webkit-linear-gradient(top, #151515, #151515);
background-image: -o-linear-gradient(top, #151515, #040404); background-image: -o-linear-gradient(top, #151515, #151515);
background-image: linear-gradient(to bottom, #151515, #040404); background-image: linear-gradient(to bottom, #151515, #151515);
background-repeat: repeat-x; background-repeat: repeat-x;
border-color: #000000; border-color: #020202;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff151515', GradientType=0);
} }
.navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:hover,
.navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar:active,
.navbar-inverse .btn-navbar.active { .navbar-inverse .btn-navbar.active {
color: #ffffff; color: #ffffff;
background-color: #040404; background-color: #151515;
background-position: 0 -15px; background-position: 0 -15px;
} }
...@@ -5097,7 +5085,7 @@ a.badge:hover { ...@@ -5097,7 +5085,7 @@ a.badge:hover {
} }
.navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover { .navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111; background-color: #222222;
} }
.nav-collapse.in .btn-group { .nav-collapse.in .btn-group {
padding: 0; padding: 0;
...@@ -5144,8 +5132,8 @@ a.badge:hover { ...@@ -5144,8 +5132,8 @@ a.badge:hover {
} }
.navbar-inverse .nav-collapse .navbar-form, .navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search { .navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111; border-top-color: #222222;
border-bottom-color: #111111; border-bottom-color: #222222;
} }
.navbar .nav-collapse .nav.pull-right { .navbar .nav-collapse .nav.pull-right {
float: none; float: none;
......
docs/assets/css/docs.css
View file @ ff02043b
...@@ -34,14 +34,12 @@ body > .navbar .brand { ...@@ -34,14 +34,12 @@ body > .navbar .brand {
float: right; float: right;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
-webkit-transition: all .2s linear; -webkit-transition: all .2s linear;
-moz-transition: all .2s linear; -moz-transition: all .2s linear;
transition: all .2s linear; transition: all .2s linear;
} }
body > .navbar .brand:hover { body > .navbar .brand:hover {
text-decoration: none; text-decoration: none;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
} }
...@@ -88,18 +86,7 @@ hr.soften { ...@@ -88,18 +86,7 @@ hr.soften {
padding: 40px 0; padding: 40px 0;
color: #fff; color: #fff;
text-align: center; text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075); background-color: #222;
background: #020031; /* Old browsers */
background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%); /* IE10+ */
background: linear-gradient(45deg, #020031 0%,#6d3353 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
} }
.bs-docs-jumbotron h1 { .bs-docs-jumbotron h1 {
font-size: 80px; font-size: 80px;
......
less/navbar.less
View file @ ff02043b
...@@ -12,10 +12,7 @@ ...@@ -12,10 +12,7 @@
padding: 0 20px; padding: 0 20px;
margin-bottom: @line-height-base; margin-bottom: @line-height-base;
background-color: @navbar-background; background-color: @navbar-background;
//#gradient > .vertical(@navbar-background-highlight, @navbar-background);
border: 1px solid @navbar-border;
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 1px 4px rgba(0,0,0,.065));
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
.clearfix(); .clearfix();
...@@ -181,15 +178,10 @@ ...@@ -181,15 +178,10 @@
.navbar-fixed-top { .navbar-fixed-top {
top: 0; top: 0;
} }
.navbar-fixed-top,
.navbar-static-top {
.box-shadow(0 1px 10px rgba(0,0,0,.1));
}
// Fixed to bottom // Fixed to bottom
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
.box-shadow(0 -1px 10px rgba(0,0,0,.1));
} }
...@@ -364,8 +356,6 @@ ...@@ -364,8 +356,6 @@
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-background; background-color: @navbar-inverse-background;
//#gradient > .vertical(@navbar-inverse-background-highlight, @navbar-inverse-background);
border-color: @navbar-inverse-border;
.brand, .brand,
.nav > li > a { .nav > li > a {
......
less/variables.less
View file @ ff02043b
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
@navbar-brand-color: @navbar-link-color; @navbar-brand-color: @navbar-link-color;
// Inverted navbar // Inverted navbar
@navbar-inverse-background: #111111; @navbar-inverse-background: #222;
@navbar-inverse-background-highlight: #222222; @navbar-inverse-background-highlight: #222222;
@navbar-inverse-border: #111111; @navbar-inverse-border: #111111;
......
Markdown is supported
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