From fe414d8566f647e65dc20bc7505630ce798e5445 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 27 Mar 2013 23:33:45 -0700 Subject: [PATCH] turn docs navbar into left navbar --- docs/_includes/navbar.html | 20 ++++++++++---------- docs/assets/css/bootstrap.css | 20 ++++++++++++++++++++ docs/assets/css/docs.css | 35 ++++++++++++++++++++++++++++++----- docs/assets/js/application.js | 5 +++++ less/navbar.less | 21 +++++++++++++++++++++ 5 files changed, 86 insertions(+), 15 deletions(-) diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html index dcbb235567..5e6c5ae635 100644 --- a/docs/_includes/navbar.html +++ b/docs/_includes/navbar.html @@ -1,32 +1,32 @@ -
+
- Bootstrap + B
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 50d2070015..ac0ea34e58 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3255,6 +3255,7 @@ button.close { } .navbar-fixed-top, +.navbar-fixed-left, .navbar-fixed-bottom { position: fixed; right: 0; @@ -3271,6 +3272,16 @@ button.close { bottom: 0; } +.navbar-fixed-left { + top: 0; + right: auto; + bottom: 0; +} + +.navbar-fixed-left .container { + max-width: none; +} + .navbar-brand { display: block; max-width: 200px; @@ -3496,6 +3507,15 @@ 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 76a45b45e6..6b71176f89 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -49,9 +49,9 @@ section > ul li { /* Navbar -------------------------------------------------- */ -.bs-docs-navbar { +/*.bs-docs-navbar { background-color: #fff; - border-bottom: 1px solid #ccc; /* IE8 */ + border-bottom: 1px solid #ccc; border-bottom: 1px solid rgba(0,0,0,.1); } .bs-docs-navbar .nav > .active > a, @@ -59,7 +59,30 @@ section > ul li { font-weight: 500; background-color: transparent; } +*/ +.bs-docs-navbar .navbar-brand { + padding: 15px; + font-size: 32px; + margin-left: 0; +} +.bs-docs-navbar .nav { + border-top: 1px solid #111; + border-bottom: 1px solid #333; +} +.bs-docs-navbar .nav > li > a { + width: 60px; + text-align: center; + border-top: 1px solid #333; + border-bottom: 1px solid #111; +} +.bs-docs-navbar .glyphicon { + display: block; + font-size: 20px; +} +.bs-docs-navbar .nav .tooltip { + white-space: nowrap; +} /* Jumbotrons @@ -181,7 +204,7 @@ section > ul li { /* Base styles are not affixable given mobile-first */ .bs-docs-sidenav { - margin: 20px 0 0; + margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -613,7 +636,9 @@ input.focused { /* Account for fixed navbar (which is static to start) */ body { - padding-top: 50px; /* Default height of navbar */ + /*padding-top: 50px;*/ /* Default height of navbar */ + padding-top: 0; + padding-left: 60px; } /* Undo custom padding */ @@ -644,7 +669,7 @@ input.focused { /* From here, start to affix the nav because we keep columns here */ .bs-docs-sidenav.affix { position: fixed; - top: 54px; + top: 20px; } .bs-docs-sidenav { width: 170px; diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 4b0b59618e..18e9e84cd7 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -49,6 +49,11 @@ $('.tooltip-test').tooltip() $('.popover-test').popover() + $('.bs-docs-navbar').tooltip({ + selector: "a[data-toggle=tooltip]", + container: ".bs-docs-navbar .nav" + }) + // popover demo $("a[data-toggle=popover]") .popover() diff --git a/less/navbar.less b/less/navbar.less index 15f8a2503f..75ad2cb99b 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -58,6 +58,7 @@ // Fix the top/bottom navbars when screen real estate supports it .navbar-fixed-top, +.navbar-fixed-left, .navbar-fixed-bottom { position: fixed; right: 0; @@ -68,6 +69,16 @@ .navbar-fixed-top { top: 0; } .navbar-fixed-bottom { bottom: 0; } +// Fixed left +.navbar-fixed-left { + top: 0; + right: auto; + bottom: 0; +} +.navbar-fixed-left .container { + max-width: none; +} + // @@ -307,6 +318,16 @@ 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;