diff --git a/docs/examples/fluid.html b/docs/examples/fluid.html index 651b6f2f9f..f235d76149 100644 --- a/docs/examples/fluid.html +++ b/docs/examples/fluid.html @@ -44,13 +44,23 @@ Project name +
+ + Username + + + +
diff --git a/less/navbar.less b/less/navbar.less index 6816a6ab9b..a5122e75c8 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -30,27 +30,6 @@ width: auto; } -// Navbar button for toggling navbar items in responsive layouts -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); -} -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} // Override the default collapsed state .nav-collapse.collapse { height: auto; @@ -233,6 +212,21 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } +// Buttons +.navbar .btn { + display: inline-block; + padding: 4px 10px 4px; + // Vertically center the button given @navbarHeight + @elementHeight: 28px; + margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); + line-height: @baseLineHeight; +} +.navbar .btn-group { + margin: 0; + // Vertically center the button given @navbarHeight + @elementHeight: 28px; + padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); +} // Hover .navbar .nav > li > a:hover { background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active @@ -264,6 +258,28 @@ margin-right: 0; } +// Navbar button for toggling navbar items in responsive layouts +// These definitions need to come after '.navbar .btn' +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-left: 5px; + margin-right: 5px; + .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); +} +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + .border-radius(1px); + .box-shadow(0 1px 0 rgba(0,0,0,.25)); +} +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} // Dropdown menus @@ -310,31 +326,31 @@ } } // Dropdown toggle caret -.navbar .nav .dropdown-toggle .caret, -.navbar .nav .open .caret { +.navbar .nav li.dropdown .dropdown-toggle .caret, +.navbar .nav li.dropdown.open .caret { border-top-color: @white; border-bottom-color: @white; } -.navbar .nav .active .caret { +.navbar .nav li.dropdown.active .caret { .opacity(100); } // Remove background color from open dropdown -.navbar .nav .open > .dropdown-toggle, -.navbar .nav .active > .dropdown-toggle, -.navbar .nav .open.active > .dropdown-toggle { +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: transparent; } // Dropdown link on hover -.navbar .nav .active > .dropdown-toggle:hover { +.navbar .nav li.dropdown.active > .dropdown-toggle:hover { color: @white; } // Right aligned menus need alt position // TODO: rejigger this at some point to simplify the selectors -.navbar .nav.pull-right .dropdown-menu, -.navbar .nav .dropdown-menu.pull-right { +.navbar .pull-right .dropdown-menu, +.navbar .dropdown-menu.pull-right { left: auto; right: 0; &:before { diff --git a/less/navs.less b/less/navs.less index 4f4b6c3273..e06795c2be 100644 --- a/less/navs.less +++ b/less/navs.less @@ -234,14 +234,14 @@ // ------------------------- .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, -.nav > .open.active > a:hover { +.nav > li.dropdown.open.active > a:hover { color: @white; background-color: @grayLight; border-color: @grayLight; } -.nav .open .caret, -.nav .open.active .caret, -.nav .open a:hover .caret { +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { border-top-color: @white; border-bottom-color: @white; .opacity(100); diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 2f1c4925a7..39b164ac53 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -31,40 +31,51 @@ clear: left; } // Block-level the nav - .navbar .nav { + .navbar .nav-collapse .nav { float: none; margin: 0 0 (@baseLineHeight / 2); } - .navbar .nav > li { + .navbar .nav-collapse .nav > li { float: none; } - .navbar .nav > li > a { + .navbar .nav-collapse .nav > li > a { margin-bottom: 2px; } - .navbar .nav > .divider-vertical { + .navbar .nav-collapse .nav > .divider-vertical { display: none; } - .navbar .nav .nav-header { + .navbar .nav-collapse .nav .nav-header { color: @navbarText; text-shadow: none; } // Nav and dropdown links in navbar - .navbar .nav > li > a, - .navbar .dropdown-menu a { + .navbar .nav-collapse .nav > li > a, + .navbar .nav-collapse .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: @navbarLinkColor; .border-radius(3px); } - .navbar .dropdown-menu li + li a { + // Buttons + .navbar .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + .border-radius(4px); + } + .navbar .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } - .navbar .nav > li > a:hover, - .navbar .dropdown-menu a:hover { + .navbar .nav-collapse .nav > li > a:hover, + .navbar .nav-collapse .dropdown-menu a:hover { background-color: @navbarBackground; } + // Buttons in the navbar + .navbar .nav-collapse.in .btn-group { + margin-top: 5px; + padding: 0; + } // Dropdowns in the navbar - .navbar .dropdown-menu { + .navbar .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; @@ -78,16 +89,16 @@ .border-radius(0); .box-shadow(none); } - .navbar .dropdown-menu:before, - .navbar .dropdown-menu:after { + .navbar .nav-collapse .dropdown-menu:before, + .navbar .nav-collapse .dropdown-menu:after { display: none; } - .navbar .dropdown-menu .divider { + .navbar .nav-collapse .dropdown-menu .divider { display: none; } // Forms in navbar - .navbar-form, - .navbar-search { + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { float: none; padding: (@baseLineHeight / 2) 15px; margin: (@baseLineHeight / 2) 0; @@ -96,7 +107,7 @@ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); } // Pull right (secondary) nav content - .navbar .nav.pull-right { + .navbar .nav-collapse .nav.pull-right { float: none; margin-left: 0; } @@ -106,7 +117,7 @@ padding-right: 10px; } // Navbar button - .btn-navbar { + .navbar .btn-navbar { display: block; }