diff options
author | Mark Otto <markdotto@gmail.com> | 2017-07-04 23:07:59 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2017-07-04 23:07:59 +0300 |
commit | 4bf6d7cb29073296e68a1e0bb59d122e9e95e17e (patch) | |
tree | efb166f5d7ebd2bb910f08055fde63b563b39eae | |
parent | 8936e8a981c32a72bcef1bafebab3e03fd6b17a1 (diff) |
rewrite docs navbar less to use nesting, then tweak horizontal padding to prevent early navbar breakage in responsive viewports
-rw-r--r-- | docs/assets/less/nav.less | 67 |
1 files changed, 40 insertions, 27 deletions
diff --git a/docs/assets/less/nav.less b/docs/assets/less/nav.less index 1f12538eb8..fd3b3edec8 100644 --- a/docs/assets/less/nav.less +++ b/docs/assets/less/nav.less @@ -2,34 +2,47 @@ margin-bottom: 0; background-color: #fff; border-bottom: 0; -} -.bs-home-nav .bs-nav-b { - display: none; -} -.bs-docs-nav .navbar-brand, -.bs-docs-nav .navbar-nav > li > a { - font-weight: 500; - color: #563d7c; -} -.bs-docs-nav .navbar-nav > li > a:hover, -.bs-docs-nav .navbar-nav > .active > a, -.bs-docs-nav .navbar-nav > .active > a:hover { - color: #463265; - background-color: #f9f9f9; -} -.bs-docs-nav .navbar-toggle .icon-bar { - background-color: #563d7c; -} -.bs-docs-nav .navbar-header .navbar-toggle { - border-color: #fff; -} -.bs-docs-nav .navbar-header .navbar-toggle:hover, -.bs-docs-nav .navbar-header .navbar-toggle:focus { - background-color: #f9f9f9; - border-color: #f9f9f9; -} -.bs-docs-nav { + .bs-nav-b { + display: none; + } + + .navbar-brand, + .navbar-nav > li > a { + font-weight: 500; + color: #563d7c; + } + + .navbar-nav { + > li > a { + padding-right: 10px; + padding-left: 10px; + } + + > li > a:hover, + > .active > a, + > .active > a:hover { + color: #463265; + background-color: #f9f9f9; + } + } + + .navbar-toggle .icon-bar { + background-color: #563d7c; + } + + .navbar-header { + .navbar-toggle { + border-color: #fff; + + &:hover, + &:focus { + background-color: #f9f9f9; + border-color: #f9f9f9; + } + } + } + .navbar-right { @media (min-width: 768px) and (max-width: 992px) { display: none; |