From 8b3a1702d443c4a451d02d3482ed2cb4aeff0d44 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 27 Apr 2013 18:28:39 -0700 Subject: [PATCH] Overhaul navbar navs * Switch from to to eliminate an element in selectors * Drop .navbar-divider entirely --- docs/assets/css/bootstrap.css | 129 ++++++++++------------------ docs/assets/css/docs.css | 2 +- docs/docs.html | 44 +++------- less/navbar.less | 155 +++++++++++++++------------------- 4 files changed, 126 insertions(+), 204 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index be8236ea37..b4a3b5854f 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3515,33 +3515,33 @@ button.close { clear: both; } -.navbar .nav { +.navbar-nav { margin-top: 15px; } -.navbar .nav > li > a { +.navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; line-height: 20px; color: #777777; } -.navbar .nav > li > a:hover, -.navbar .nav > li > a:focus { +.navbar-nav > li > a:hover, +.navbar-nav > li > a:focus { color: #333333; background-color: transparent; } -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { +.navbar-nav > .active > a, +.navbar-nav > .active > a:hover, +.navbar-nav > .active > a:focus { color: #555555; background-color: #d5d5d5; } -.navbar .nav > .disabled > a, -.navbar .nav > .disabled > a:hover, -.navbar .nav > .disabled > a:focus { +.navbar-nav > .disabled > a, +.navbar-nav > .disabled > a:hover, +.navbar-nav > .disabled > a:focus { color: #cccccc; background-color: transparent; } @@ -3570,7 +3570,7 @@ button.close { .navbar-brand { display: block; max-width: 200px; - padding: 7px 15px; + padding: 15px; margin-right: auto; margin-left: auto; font-size: 18px; @@ -3614,57 +3614,49 @@ button.close { margin-top: 4px; } -.navbar .nav > .divider { - height: 2px; - margin: 9px 0; - overflow: hidden; - background-color: #e1e1e1; - border-bottom: 1px solid #fbfbfb; -} - .navbar-form { margin-top: 8px; margin-bottom: 8px; } -.navbar .nav > li > .dropdown-menu { +.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 { +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.navbar .nav li.dropdown > a:hover .caret, -.navbar .nav li.dropdown > a:focus .caret { +.navbar-nav li.dropdown > a:hover .caret, +.navbar-nav li.dropdown > a:focus .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 { +.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 { +.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 { +.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 { +.navbar-nav.pull-right > li > .dropdown-menu, +.navbar-nav > li > .dropdown-menu.pull-right { right: 0; left: auto; } @@ -3687,26 +3679,26 @@ button.close { color: #999999; } -.navbar-inverse .nav > li > a { +.navbar-inverse .navbar-nav > li > a { color: #999999; } -.navbar-inverse .nav > li > a:hover, -.navbar-inverse .nav > li > a:focus { +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { color: #ffffff; background-color: transparent; } -.navbar-inverse .nav > .active > a, -.navbar-inverse .nav > .active > a:hover, -.navbar-inverse .nav > .active > a:focus { +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { color: #ffffff; background-color: #080808; } -.navbar-inverse .nav > .disabled > a, -.navbar-inverse .nav > .disabled > a:hover, -.navbar-inverse .nav > .disabled > a:focus { +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { color: #444444; background-color: transparent; } @@ -3724,31 +3716,26 @@ button.close { background-color: #fff; } -.navbar-inverse .nav > .divider { - background-color: #151515; - border-bottom-color: #2f2f2f; -} - -.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 { +.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle, +.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle, +.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle { color: #ffffff; background-color: #080808; } -.navbar-inverse .nav li.dropdown > a:hover .caret { +.navbar-inverse .navbar-nav li.dropdown > a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } -.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret { +.navbar-inverse .navbar-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 { +.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret, +.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret, +.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } @@ -3760,36 +3747,19 @@ button.close { } .navbar-brand { float: left; - padding-top: 15px; - padding-bottom: 15px; - margin-left: -10px; + margin-right: 5px; + margin-left: -5px; } .navbar .nav { float: left; margin-top: 0; } - .navbar .nav:before, - .navbar .nav:after { - display: table; - content: " "; - } - .navbar .nav:after { - clear: both; - } - .navbar .nav:before, - .navbar .nav:after { - display: table; - content: " "; - } - .navbar .nav:after { - clear: both; + .navbar .nav > li { + float: left; } .navbar .nav.pull-right { float: right; } - .navbar .nav > li { - float: left; - } .navbar .nav > .divider { width: 1px; height: 30px; @@ -3800,15 +3770,6 @@ button.close { .navbar-inverse .nav > .divider { border-right-color: #2f2f2f; } - .navbar-fixed-left { - padding-right: 0; - padding-left: 0; - } - .navbar-fixed-left .navbar-brand, - .navbar-fixed-left .nav, - .navbar-fixed-left .nav > li { - float: none; - } .navbar-toggle { position: relative; top: auto; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 3f3a253c84..0e92924959 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -308,7 +308,7 @@ section > ul li { .bs-navbar-bottom-example { z-index: 1; padding: 0; - height: 90px; + height: 110px; overflow: hidden; /* cut the drop shadows off */ } .bs-navbar-top-example .navbar-fixed-top, diff --git a/docs/docs.html b/docs/docs.html index e62e44661f..48e2aae0be 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -3423,7 +3423,7 @@ For example, <section> should be wrapped as inline.
Title -
    +
    • Home
    • Link
    • Link
      • @@ -3433,7 +3433,7 @@ For example, <section> should be wrapped as inline. {% highlight html linenos %}
      Title -
        +
        • Home
        • Link
        • Link
          • @@ -3458,7 +3458,7 @@ For example, <section> should be wrapped as inline.

          Nav items are simple to add via unordered lists.

          -
            +
            • Home
            • Link
            • Disabled
              • @@ -3466,31 +3466,11 @@ For example, <section> should be wrapped as inline.
          {% highlight html linenos %} -
            + -{% endhighlight %} -

            You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <li> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.

            -
            -
            - -
            -
            -{% highlight html linenos %} -
              - ... -
            • - ... -
            {% endhighlight %} @@ -3529,7 +3509,7 @@ For example, <section> should be wrapped as inline.
            Title -
              +
              • Home
              • Link
              • Link
                • @@ -3565,7 +3545,7 @@ body {
                Title -
                  +
                  • Home
                  • Link
                  • Link
                    • @@ -3601,7 +3581,7 @@ body {
                    Title -
                      +
                      • Home
                      • Link
                      • Link
                        • @@ -3628,7 +3608,7 @@ body { Title
                        -
                          +
                          • Home
                          • Link
                          • Link
                            • @@ -3648,9 +3628,8 @@ body {
                            -
                              +
                              • Link
                                • -
                              • Dropdown
                                  @@ -3706,7 +3685,7 @@ body { Title
                                  -
                                    +
                                    • Home
                                    • Link
                                    • Link
                                      • @@ -3726,9 +3705,8 @@ body {
                                      -
                                        +
                                        • Link
                                          • -
                                        • Dropdown
                                            diff --git a/less/navbar.less b/less/navbar.less index 78b837bdf4..587b69ca4e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -15,31 +15,30 @@ // Navbar nav links // ------------------------- -.navbar { - .nav { - // space out from .navbar .brand and .btn-navbar - margin-top: 15px; - } - .nav > li > a { +.navbar-nav { + // Space out from .navbar .brand and .btn-navbar + margin-top: 15px; + + > li > a { padding-top: ((@navbar-height - @line-height-base) / 2); padding-bottom: ((@navbar-height - @line-height-base) / 2); color: @navbar-link-color; line-height: 20px; } - .nav > li > a:hover, - .nav > li > a:focus { + > li > a:hover, + > li > a:focus { color: @navbar-link-hover-color; background-color: @navbar-link-hover-bg; } - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { + > .active > a, + > .active > a:hover, + > .active > a:focus { color: @navbar-link-active-color; background-color: @navbar-link-active-bg; } - .nav > .disabled > a, - .nav > .disabled > a:hover, - .nav > .disabled > a:focus { + > .disabled > a, + > .disabled > a:hover, + > .disabled > a:focus { color: @navbar-link-disabled-color; background-color: @navbar-link-disabled-bg; } @@ -80,7 +79,7 @@ max-width: 200px; margin-left: auto; margin-right: auto; - padding: 7px 15px; + padding: 15px; font-size: 18px; font-weight: 500; line-height: @line-height-base; @@ -122,11 +121,6 @@ } } -// Dividers in navbar -.navbar .nav > .divider { - .nav-divider(darken(@navbar-bg, 5%), lighten(@navbar-bg, 5%)); -} - // Navbar form .navbar-form { .navbar-vertical-align(34px); // Vertically center in navbar @@ -135,19 +129,19 @@ // Dropdown menus // Menu position and menu carets -.navbar .nav > li > .dropdown-menu { +.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 { +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } // Dropdown menu items and carets -.navbar .nav { +.navbar-nav { // Caret should match text color on hover li.dropdown > a:hover .caret, li.dropdown > a:focus .caret { @@ -175,8 +169,8 @@ } // Right aligned menus need alt position -.navbar .pull-right > li > .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right { +.navbar-nav.pull-right > li > .dropdown-menu, +.navbar-nav > li > .dropdown-menu.pull-right { left: auto; right: 0; } @@ -202,25 +196,27 @@ color: @navbar-inverse-text; } - .nav > li > a { - color: @navbar-inverse-link-color; - } - .nav > li > a:hover, - .nav > li > a:focus { - color: @navbar-inverse-link-hover-color; - background-color: @navbar-inverse-link-hover-bg; - } - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { - color: @navbar-inverse-link-active-color; - background-color: @navbar-inverse-link-active-bg; - } - .nav > .disabled > a, - .nav > .disabled > a:hover, - .nav > .disabled > a:focus { - color: @navbar-inverse-link-disabled-color; - background-color: @navbar-inverse-link-disabled-bg; + .navbar-nav { + > li > a { + color: @navbar-inverse-link-color; + } + > li > a:hover, + > li > a:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } + > .disabled > a, + > .disabled > a:hover, + > .disabled > a:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } } // Darken the responsive nav toggle @@ -235,32 +231,29 @@ } } - // Darken dividers - .nav > .divider { - background-color: darken(@navbar-inverse-bg, 5%); - border-bottom-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-active-bg; - color: @navbar-inverse-link-active-color; - } - .nav li.dropdown > a:hover .caret { - border-top-color: @navbar-inverse-link-hover-color; - border-bottom-color: @navbar-inverse-link-hover-color; - } - .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-active-color; - border-bottom-color: @navbar-inverse-link-active-color; + .navbar-nav { + li.dropdown.open > .dropdown-toggle, + li.dropdown.active > .dropdown-toggle, + li.dropdown.open.active > .dropdown-toggle { + background-color: @navbar-inverse-link-active-bg; + color: @navbar-inverse-link-active-color; + } + li.dropdown > a:hover .caret { + border-top-color: @navbar-inverse-link-hover-color; + border-bottom-color: @navbar-inverse-link-hover-color; + } + li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbar-inverse-link-color; + border-bottom-color: @navbar-inverse-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-inverse-link-active-color; + border-bottom-color: @navbar-inverse-link-active-color; + } + } } @@ -270,28 +263,28 @@ // -------------------------------------------------- @media screen and (min-width: @screen-tablet) { + .navbar { padding-top: 0; padding-bottom: 0; } .navbar-brand { float: left; - padding-top: ((@navbar-height - @line-height-base) / 2); - padding-bottom: ((@navbar-height - @line-height-base) / 2); - margin-left: -10px; + margin-left: -5px; + margin-right: 5px; } .navbar .nav { float: left; margin-top: 0; // undo top margin to make nav extend full height of navbar - .clearfix(); + + > li { + float: left; + } &.pull-right { float: right; } } - .navbar .nav > li { - float: left; - } // Dividers go vertical // Change the height and height, disable bottom border, then add right border @@ -307,16 +300,6 @@ border-right-color: lighten(@navbar-inverse-bg, 5%); } - .navbar-fixed-left { - padding-left: 0; - padding-right: 0; - } - .navbar-fixed-left .navbar-brand, - .navbar-fixed-left .nav, - .navbar-fixed-left .nav > li { - float: none; - } - // Required to make the collapsing navbar work on regular desktops .navbar-toggle { position: relative;