diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 6886105cb9..8b1d98b5c6 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -3,60 +3,6 @@ visibility: hidden; } @media (max-width: 480px) { - .navbar .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .navbar .nav, .navbar .nav > li:last-child a { - -webkit-border-radius: 0 0 4px 0; - -moz-border-radius: 0 0 4px 0; - border-radius: 0 0 4px 0; - } - .navbar .nav > li { - float: none; - display: none; - } - .navbar .nav > li > a { - float: none; - background-color: #222; - } - .navbar .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .navbar .nav > .active > a { - background-color: transparent; - } - .navbar .nav > .active > a:hover { - background-color: #333; - } - .navbar .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - opacity: 1; - filter: alpha(opacity=100); - content: "↓"; - } - .navbar .nav:hover > li { - display: block; - } - .navbar .nav:hover > li > a:hover { - background-color: #333; - } .form-horizontal .control-group > label { float: none; width: auto; @@ -88,12 +34,6 @@ } } @media (max-width: 768px) { - .navbar-fixed { - position: absolute; - } - .navbar-fixed .nav { - float: none; - } .container { width: auto; padding: 0 20px; @@ -187,6 +127,96 @@ margin-left: 788px; } } +@media (max-width: 940px) { + body { + padding-top: 0; + } + .navbar-fixed-top { + position: static; + margin-bottom: 36px; + } + .navbar-inner { + padding: 10px; + background-image: none; + } + .navbar .container { + padding: 0; + } + .navbar .brand { + float: none; + display: block; + padding-left: 15px; + padding-right: 15px; + margin: 0; + } + .navbar .nav { + float: none; + margin: 9px 0; + } + .navbar .nav > li { + float: none; + } + .navbar .nav > li > a { + margin-bottom: 2px; + } + .navbar .nav > .vertical-divider { + display: none; + } + .navbar .nav > li > a, .navbar .dropdown-menu a { + padding: 6px 15px; + font-weight: bold; + color: #999999; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + } + .navbar .dropdown-menu li + li a { + margin-bottom: 2px; + } + .navbar .nav > li > a:hover, .navbar .dropdown-menu a:hover { + background-color: #222222; + } + .navbar .dropdown-menu { + position: static; + display: block; + float: none; + max-width: none; + margin: 0 15px; + padding: 0; + background-color: transparent; + border: none; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .navbar .dropdown-menu:before, .navbar .dropdown-menu:after { + display: none; + } + .navbar .dropdown-menu .divider { + display: none; + } + .navbar-form, .navbar-search { + float: none; + padding: 9px 15px; + margin: 9px 0; + border-top: 1px solid #222222; + border-bottom: 1px solid #222222; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar .nav.pull-right { + float: none; + margin-left: 0; + } + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; + } +} /* @media (min-width: 1210px) { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 2ae5325b23..fb95729d90 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Fri Jan 27 15:27:51 PST 2012 + * Date: Fri Jan 27 16:25:59 PST 2012 */ article, aside, @@ -2004,7 +2004,7 @@ table .span12 { color: #ffffff; text-decoration: none; } -.navbar .nav .active > a { +.navbar .nav .active > a, .navbar .nav .active > a:hover { color: #ffffff; text-decoration: none; background-color: #222222; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index bc3c971064..cf4b1962f1 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -723,6 +723,11 @@ form.well { @media (max-width: 768px) { + /* Remove any padding from the body */ + body { + padding-top: 0; + } + /* Subnav */ .subnav { position: static; @@ -745,13 +750,6 @@ form.well { border-top: 1px solid #e5e5e5; } - /* Adjust the jumbotron */ - .jumbotron .benefits { - position: relative; - width: auto; - margin: 36px 0; - } - /* Popovers */ .large-bird { display: none; @@ -787,9 +785,14 @@ form.well { .jumbotron h1 { font-size: 54px; } + .masthead p { + font-size: 25px; + line-height: 36px; + } .jumbotron h1, .jumbotron p { margin-right: 0; + margin-left: 0; } } @@ -797,15 +800,27 @@ form.well { @media (min-width: 768px) and (max-width: 940px) { + /* Remove any padding from the body */ + body { + padding-top: 0; + } + /* Scale down the jumbotron content */ .jumbotron h1 { font-size: 72px; } - /* Provide enough space on right-hand side for benefits list */ - .jumbotron h1, - .jumbotron p { - margin-right: 40%; - } +} + +@media (max-width: 940px) { + + /* Unfloat brand */ + .navbar-fixed-top .brand { + float: none; + margin-left: 0; + padding-left: 15px; + padding-right: 15px; + } + } diff --git a/less/navbar.less b/less/navbar.less index 602e26ae86..07e2bed8bd 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -165,7 +165,8 @@ } // Active nav items -.navbar .nav .active > a { +.navbar .nav .active > a, +.navbar .nav .active > a:hover { color: @navbarLinkColorHover; text-decoration: none; background-color: @navbarBackground; diff --git a/less/responsive.less b/less/responsive.less index 917fdc3e2f..8bfe705b4d 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -15,7 +15,7 @@ // ------------------ // Hide from screenreaders and browsers -// Credit: HTML5BP +// Credit: HTML5 Boilerplate .hidden { display: none; visibility: hidden; @@ -27,62 +27,6 @@ @media (max-width: 480px) { - // Make the nav work for small devices - .navbar { - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - .nav:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - // Remove the horizontal form styles .form-horizontal .control-group > label { float: none; @@ -124,15 +68,9 @@ // -------------------------------------------------- @media (max-width: 768px) { - - // Unfix the navbar - .navbar-fixed { - position: absolute; - } - .navbar-fixed .nav { - float: none; - } + // GRID & CONTAINERS + // ----------------- // Remove width from containers .container { width: auto; @@ -209,6 +147,111 @@ } + +// TABLETS AND BELOW +// ----------------- +@media (max-width: 940px) { + + // UNFIX THE TOPBAR + // ---------------- + // Remove any padding from the body + body { + padding-top: 0; + } + // Unfix the navbar + .navbar-fixed-top { + position: static; + margin-bottom: @baseLineHeight * 2; + } + .navbar-inner { + padding: 10px; + background-image: none; + } + .navbar .container { + padding: 0; + } + // Account for brand name + .navbar .brand { + float: none; + display: block; + padding-left: 15px; + padding-right: 15px; + margin: 0; + } + // Block-level the nav + .navbar .nav { + float: none; + margin: (@baseLineHeight / 2) 0; + } + .navbar .nav > li { + float: none; + } + .navbar .nav > li > a { + margin-bottom: 2px; + } + .navbar .nav > .vertical-divider { + display: none; + } + // Nav and dropdown links in navbar + .navbar .nav > li > a, + .navbar .dropdown-menu a { + padding: 6px 15px; + font-weight: bold; + color: @navbarLinkColor; + .border-radius(3px); + } + .navbar .dropdown-menu li + li a { + margin-bottom: 2px; + } + .navbar .nav > li > a:hover, + .navbar .dropdown-menu a:hover { + background-color: @navbarBackground; + } + // Dropdowns in the navbar + .navbar .dropdown-menu { + position: static; + display: block; + float: none; + max-width: none; + margin: 0 15px; + padding: 0; + background-color: transparent; + border: none; + .border-radius(0); + .box-shadow(none); + } + .navbar .dropdown-menu:before, + .navbar .dropdown-menu:after { + display: none; + } + .navbar .dropdown-menu .divider { + display: none; + } + // Forms in navbar + .navbar-form, + .navbar-search { + float: none; + padding: (@baseLineHeight / 2) 15px; + margin: (@baseLineHeight / 2) 0; + border-top: 1px solid @navbarBackground; + border-bottom: 1px solid @navbarBackground; + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); + } + // Pull right (secondary) nav content + .navbar .nav.pull-right { + float: none; + margin-left: 0; + } + // Static navbar + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; + } + +} + + // LARGE DESKTOP & UP // ------------------ /*