diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 1a2fa0e0fd..10831d9049 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -872,7 +872,8 @@ padding-top: 0; } .navbar-fixed-top, - .navbar-fixed-bottom { + .navbar-fixed-bottom, + .navbar-subnav-fixed { position: static; } .navbar-fixed-top { @@ -993,6 +994,39 @@ padding-right: 10px; padding-left: 10px; } + .navbar-subnav { + width: auto; + height: auto; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .navbar-subnav .navbar-inner { + background-color: #fff; + background-image: none; + } + .navbar-subnav .nav { + float: none; + margin-right: 0; + } + .navbar-subnav .nav > li { + float: none; + } + .navbar-subnav .nav > li > a { + border: 0; + } + .navbar-subnav .nav > li > a:hover { + background-color: #f5f5f5; + } + .navbar-subnav .nav > li + li > a { + border-top: 1px solid #e5e5e5; + } + .navbar-subnav .nav > li:first-child > a, + .navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + } } @media (min-width: 980px) { @@ -1000,32 +1034,4 @@ height: auto !important; overflow: visible !important; } - .navbar-subnav-fixed { - position: fixed; - top: 40px; - right: 0; - left: 0; - z-index: 1020; - border-color: #d5d5d5; - border-width: 0 0 1px; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - filter: progid:dximagetransform.microsoft.gradient(enabled=false); - -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 1px 5px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 0 #ffffff, 0 1px 5px rgba(0, 0, 0, 0.1); - box-shadow: inset 0 1px 0 #ffffff, 0 1px 5px rgba(0, 0, 0, 0.1); - } - .navbar-subnav-fixed .nav { - float: none; - max-width: 970px; - padding: 0 1px; - margin: 0 auto; - } - .navbar-subnav .nav > li:first-child > a, - .navbar-subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - } } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 715c49baa2..7adb65592c 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3957,10 +3957,16 @@ input[type="submit"].btn.btn-mini { .navbar-fixed-top { top: 0; + -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-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 { bottom: 0; + -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1); } .navbar .nav { @@ -4175,15 +4181,15 @@ input[type="submit"].btn.btn-mini { .navbar-subnav .navbar-inner { min-height: 36px; padding: 0; - background-color: #f5f5f5; - background-image: -moz-linear-gradient(top, #f9f9f9, #eeeeee); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#eeeeee)); - background-image: -webkit-linear-gradient(top, #f9f9f9, #eeeeee); - background-image: -o-linear-gradient(top, #f9f9f9, #eeeeee); - background-image: linear-gradient(top, #f9f9f9, #eeeeee); + background-color: #f6f6f6; + background-image: -moz-linear-gradient(top, #f9f9f9, #f1f1f1); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#f1f1f1)); + background-image: -webkit-linear-gradient(top, #f9f9f9, #f1f1f1); + background-image: -o-linear-gradient(top, #f9f9f9, #f1f1f1); + background-image: linear-gradient(top, #f9f9f9, #f1f1f1); background-repeat: repeat-x; border: 1px solid #e5e5e5; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#ffeeeeee', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff1f1f1', GradientType=0); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; @@ -4208,6 +4214,37 @@ input[type="submit"].btn.btn-mini { color: #005580; } +.navbar-subnav-fixed { + position: fixed; + top: 40px; + right: 0; + left: 0; + z-index: 1020; + border-color: #d5d5d5; + border-width: 0 0 1px; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + filter: progid:dximagetransform.microsoft.gradient(enabled=false); + -webkit-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 0 #ffffff, 0 1px 10px rgba(0, 0, 0, 0.1); +} + +.navbar-subnav-fixed .nav { + float: none; + max-width: 970px; + padding: 0 1px; + margin: 0 auto; +} + +.navbar-subnav .nav > li:first-child > a, +.navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + .breadcrumb { padding: 7px 14px; margin: 0 0 18px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index a0f3546a4c..257d03f7f5 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -48,8 +48,7 @@ h3 code { /* Tweak navbar brand link to be super sleek -------------------------------------------------- */ -.navbar, -.subnav { +.navbar { font-size: 13px; } body > .navbar-fixed-top .brand { @@ -766,42 +765,6 @@ form.bs-docs-example { margin-bottom: 10px; } - /* Subnav */ - .subnav { - position: static; - top: auto; - z-index: auto; - width: auto; - height: auto; - background: #fff; /* whole background property since we use a background-image for gradient */ - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - } - .subnav .nav > li { - float: none; - } - .subnav .nav > li > a { - border: 0; - } - .subnav .nav > li + li > a { - border-top: 1px solid #e5e5e5; - } - .subnav .nav > li:first-child > a, - .subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - } - - /* Popovers */ - .large-bird { - display: none; - } - .popover-well .popover-wrapper { - margin-left: 0; - } - /* Space out the show-grid examples */ .show-grid [class*="span"] { margin-bottom: 5px; diff --git a/less/navbar.less b/less/navbar.less index 3305f722a1..c298e7ce11 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -168,11 +168,17 @@ // Fixed to top .navbar-fixed-top { top: 0; + -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1); + box-shadow: 0 1px 10px rgba(0,0,0,.1); } // Fixed to bottom .navbar-fixed-bottom { bottom: 0; + -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1); + -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1); + box-shadow: 0 -1px 10px rgba(0,0,0,.1); } @@ -378,7 +384,7 @@ .navbar-subnav .navbar-inner { min-height: 36px; padding: 0; - #gradient > .vertical(#f9f9f9, #eeeeee); + #gradient > .vertical(#f9f9f9, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; } @@ -405,3 +411,34 @@ } +// Fixed subnav on scroll, but only for 980px and up (sorry IE!) +.navbar-subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ +} +.navbar-subnav-fixed .nav { + float: none; + max-width: 970px; + margin: 0 auto; + padding: 0 1px; +} +.navbar-subnav .nav > li:first-child > a, +.navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + + diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 480939f7cf..5a66a05592 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -8,9 +8,10 @@ body { padding-top: 0; } - // Unfix the navbar + // Unfix the navbars .navbar-fixed-top, - .navbar-fixed-bottom { + .navbar-fixed-bottom, + .navbar-subnav-fixed { position: static; } .navbar-fixed-top { @@ -138,6 +139,44 @@ padding-left: 10px; padding-right: 10px; } + + // STATIC SUBNAV + // ------------- + .navbar-subnav { + width: auto; + height: auto; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .navbar-subnav .navbar-inner { + background-color: #fff; + background-image: none; // Remove gradient + } + .navbar-subnav .nav { + float: none; + margin-right: 0; + } + .navbar-subnav .nav > li { + float: none; + } + .navbar-subnav .nav > li > a { + border: 0; + } + .navbar-subnav .nav > li > a:hover { + background-color: #f5f5f5; + } + .navbar-subnav .nav > li + li > a { + border-top: 1px solid #e5e5e5; + } + .navbar-subnav .nav > li:first-child > a, + .navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + } + + } @@ -152,34 +191,4 @@ overflow: visible !important; } - // Fixed subnav on scroll, but only for 980px and up (sorry IE!) - .navbar-subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ - } - .navbar-subnav-fixed .nav { - float: none; - max-width: 970px; - margin: 0 auto; - padding: 0 1px; - } - .navbar-subnav .nav > li:first-child > a, - .navbar-subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - } - }