Skip to content

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

mo betta navbar dropdowns

parent 597a248d
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 307 deletions
docs/assets/css/bootstrap.css
View file @ 32ebe2ef
...@@ -3068,6 +3068,47 @@ button.close { ...@@ -3068,6 +3068,47 @@ button.close {
margin-bottom: 9px; margin-bottom: 9px;
} }
.navbar .nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.navbar-fixed-bottom .nav > li > .dropdown-menu {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar .nav li.dropdown > a:hover .caret {
border-top-color: #333333;
border-bottom-color: #333333;
}
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
color: #555555;
background-color: #d5d5d5;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #555555;
border-bottom-color: #555555;
}
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar-inverse { .navbar-inverse {
background-color: #222222; background-color: #222222;
} }
...@@ -3111,6 +3152,30 @@ button.close { ...@@ -3111,6 +3152,30 @@ button.close {
border-left-color: #151515; border-left-color: #151515;
} }
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
color: #ffffff;
background-color: #222222;
}
.navbar-inverse .nav li.dropdown > a:hover .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #999999;
border-bottom-color: #999999;
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.navbar { .navbar {
padding-top: 0; padding-top: 0;
...@@ -3160,15 +3225,6 @@ button.close { ...@@ -3160,15 +3225,6 @@ button.close {
} }
} }
// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
height: @navbar-height;
margin: 0 9px;
border-left: 1px solid @navbar-background;
border-right: 1px solid @navbar-background-highlight;
}
// Buttons in navbar // Buttons in navbar
// ------------------------- // -------------------------
.navbar .btn, .navbar .btn,
...@@ -3228,150 +3284,6 @@ button.close { ...@@ -3228,150 +3284,6 @@ button.close {
} }
} }
// Dropdown menus
// --------------
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
&:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: @dropdown-border;
position: absolute;
top: -7px;
left: 9px;
}
&:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @dropdown-background;
position: absolute;
top: -6px;
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: @dropdown-border;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid @dropdown-background;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Caret should match text color on hover
.navbar .nav li.dropdown > a:hover .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
}
// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-background-active;
color: @navbar-link-color-active;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
left: auto;
right: 12px;
}
&:after {
left: auto;
right: 13px;
}
.dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
border-radius: 6px 0 6px 6px;
}
}
// Inverted navbar
// -------------------------
.navbar-inverse {
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-background-active;
color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
// Navbar search
.navbar-search {
.search-query {
color: #fff;
background-color: @navbar-inverse-search-background;
border-color: @navbar-inverse-search-border;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
.placeholder(@navbar-inverse-search-placeholder-color);
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 15px;
color: @grayDark;
text-shadow: 0 1px 0 #fff;
background-color: @navbar-inverse-search-background-focus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
}
}
}
}
*/ */
.caret { .caret {
......
less/navbar.less
View file @ 32ebe2ef
...@@ -116,13 +116,61 @@ ...@@ -116,13 +116,61 @@
.navbar-vertical-align(32px); // Vertically center in navbar .navbar-vertical-align(32px); // Vertically center in navbar
} }
// Dropdown menus
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
// Dropdown menu items and carets
.navbar .nav {
// Caret should match text color on hover
li.dropdown > a:hover .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
}
// Remove background color from open dropdown
li.dropdown.open > .dropdown-toggle,
li.dropdown.active > .dropdown-toggle,
li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-bg-active;
color: @navbar-link-color-active;
}
li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
li.dropdown.open > .dropdown-toggle .caret,
li.dropdown.active > .dropdown-toggle .caret,
li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
}
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
}
// Inverse navbar // Inverse navbar
// -------------------------------------------------- // --------------------------------------------------
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-bg; background-color: @navbar-inverse-bg;
.brand { .brand {
color: @navbar-inverse-brand-color; color: @navbar-inverse-brand-color;
...@@ -151,14 +199,38 @@ ...@@ -151,14 +199,38 @@
background-color: @navbar-inverse-link-bg-active; background-color: @navbar-inverse-link-bg-active;
} }
// Darken the responsive nav toggle
.btn-navbar { .btn-navbar {
background-color: #444; background-color: #444;
} }
// Darken divider borders
.divider-vertical { .divider-vertical {
border-left-color: darken(@navbar-inverse-bg, 5%); border-left-color: darken(@navbar-inverse-bg, 5%);
border-right-color: lighten(@navbar-inverse-bg, 5%); border-right-color: lighten(@navbar-inverse-bg, 5%);
} }
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-bg-active;
color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-hover;
border-bottom-color: @navbar-inverse-link-color-hover;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
} }
...@@ -198,6 +270,7 @@ ...@@ -198,6 +270,7 @@
height: auto !important; height: auto !important;
overflow: visible !important; overflow: visible !important;
} }
} }
/* /*
...@@ -211,15 +284,6 @@ ...@@ -211,15 +284,6 @@
} }
} }
// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
height: @navbar-height;
margin: 0 9px;
border-left: 1px solid @navbar-background;
border-right: 1px solid @navbar-background-highlight;
}
// Buttons in navbar // Buttons in navbar
// ------------------------- // -------------------------
.navbar .btn, .navbar .btn,
...@@ -279,148 +343,4 @@ ...@@ -279,148 +343,4 @@
} }
} }
// Dropdown menus
// --------------
// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
&:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: @dropdown-border;
position: absolute;
top: -7px;
left: 9px;
}
&:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @dropdown-background;
position: absolute;
top: -6px;
left: 10px;
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: @dropdown-border;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid @dropdown-background;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Caret should match text color on hover
.navbar .nav li.dropdown > a:hover .caret {
border-top-color: @navbar-link-color-hover;
border-bottom-color: @navbar-link-color-hover;
}
// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-link-background-active;
color: @navbar-link-color-active;
}
.navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-link-color;
border-bottom-color: @navbar-link-color;
}
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-link-color-active;
border-bottom-color: @navbar-link-color-active;
}
// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {
left: auto;
right: 12px;
}
&:after {
left: auto;
right: 13px;
}
.dropdown-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
border-radius: 6px 0 6px 6px;
}
}
// Inverted navbar
// -------------------------
.navbar-inverse {
// Dropdowns
.nav li.dropdown.open > .dropdown-toggle,
.nav li.dropdown.active > .dropdown-toggle,
.nav li.dropdown.open.active > .dropdown-toggle {
background-color: @navbar-inverse-link-background-active;
color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > a:hover .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
.nav li.dropdown > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color;
border-bottom-color: @navbar-inverse-link-color;
}
.nav li.dropdown.open > .dropdown-toggle .caret,
.nav li.dropdown.active > .dropdown-toggle .caret,
.nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: @navbar-inverse-link-color-active;
border-bottom-color: @navbar-inverse-link-color-active;
}
// Navbar search
.navbar-search {
.search-query {
color: #fff;
background-color: @navbar-inverse-search-background;
border-color: @navbar-inverse-search-border;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
.placeholder(@navbar-inverse-search-placeholder-color);
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 15px;
color: @grayDark;
text-shadow: 0 1px 0 #fff;
background-color: @navbar-inverse-search-background-focus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
}
}
}
}
*/ */
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