From f1e10c37fd304865f8036dce5001276011461e10 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Aug 2015 23:43:59 -0700 Subject: [PATCH] rewrite navbar bits some more --- docs/components/navbar.md | 236 +++++++++++--------------------------- scss/_navbar.scss | 165 ++++++++------------------ scss/_variables.scss | 10 +- 3 files changed, 118 insertions(+), 293 deletions(-) diff --git a/docs/components/navbar.md b/docs/components/navbar.md index dd3a620f1e..5cdf15803c 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -4,41 +4,37 @@ title: Navbar group: components --- -The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content. +The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Basics +## Basics Here's what you need to know before getting started with the navbar: -- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles. +- Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`). - When using multiple components in a navbar, some [alignment classes](#alignment) are required. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. +- Use `.pull-left` and `.pull-right` to quickly align sub-components. - Ensure accessibility by using a ` {% endexample %} diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 965454f7f4..b1cdb0ea5d 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -5,8 +5,6 @@ .navbar { position: relative; - padding: $spacer; - margin-bottom: $navbar-margin-bottom; @include clearfix; @include media-breakpoint-up(sm) { @@ -15,7 +13,6 @@ } -// // Navbar alignment options // // Display the navbar across the entirety of the page or fixed it to the top or @@ -66,20 +63,20 @@ } +// // Brand/project name +// .navbar-brand { float: left; - padding: .625rem .75rem; - margin-right: $spacer; - margin-bottom: 0; // For headings + padding: .95rem 1rem; font-size: $font-size-lg; line-height: 1; + color: $navbar-default-brand-color; - > a { - @include hover-focus { - text-decoration: none; - } + @include hover-focus { + color: $navbar-default-brand-hover-color; + text-decoration: none; } > img { @@ -94,13 +91,15 @@ // Bootstrap JavaScript plugin. .navbar-toggler { - padding: .55rem .75rem; - margin-right: $spacer; - margin-bottom: 0; // For headings + padding: .5rem .75rem; + margin-top: .375rem; + margin-bottom: .375rem; font-size: $font-size-lg; line-height: 1; + color: $navbar-default-link-color; background: none; - border: 0; + border: $border-width solid transparent; + @include border-radius($btn-border-radius); @include hover-focus { text-decoration: none; @@ -122,37 +121,9 @@ } -// Dropdown menus - -// Menu position and menu carets -.navbar-nav > li > .dropdown-menu { - margin-top: 0; - @include border-top-radius(0); -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { - @include border-top-radius($navbar-border-radius); - @include border-bottom-radius(0); -} - - -// Small navbar +// Navigation // -// Condensed dimensions for an aesthetic closer to v3's navbar. - -.navbar-sm { - padding-top: 0; - padding-bottom: 0; - - .navbar-brand { - padding-top: .95rem; - padding-bottom: .95rem; - } - - .form-inline { - margin-top: .6rem; - } -} +// Custom navbar navigation built on the base `.nav` styles. .navbar-nav { .nav-item { @@ -161,9 +132,14 @@ .nav-link { display: block; - padding-top: .95rem; - padding-bottom: .95rem; + padding: .95rem .75rem; line-height: 1.25; // Match the `.navbar-brand` + color: $navbar-default-link-color; + + @include hover-focus { + color: $navbar-default-link-hover-color; + background-color: $navbar-default-link-hover-bg; + } } .open > .nav-link, @@ -179,8 +155,20 @@ } +// Forms +// +// Additional modifier class to add to `.form-inline` to vertically center forms. + +.navbar-form { + margin-top: .375rem; + margin-bottom: .375rem; + margin-right: 1rem; +} + + +// // Alternate navbars -// -------------------------------------------------- +// // todo: audit these styles @@ -205,29 +193,9 @@ background-color: $navbar-inverse-bg; border-color: $navbar-inverse-border; - .navbar-toggler, - .navbar-brand > a, - .nav-pills > .nav-item > .nav-link { - color: $navbar-inverse-link-color; - - @include hover-focus { - color: $navbar-inverse-link-hover-color; - } - } - .nav-pills > .nav-item > .nav-link { - @include hover-focus { - color: $navbar-inverse-link-active-color; - background-color: $navbar-inverse-link-active-bg; - } - } - .nav-pills > .active > .nav-link, - .nav-pills > .nav-link.active { - color: $navbar-inverse-link-active-color; - background-color: $navbar-inverse-link-active-bg; - } - .navbar-brand { color: $navbar-inverse-brand-color; + @include hover-focus { color: $navbar-inverse-brand-hover-color; background-color: $navbar-inverse-brand-hover-bg; @@ -235,64 +203,27 @@ } .navbar-nav { - .navbar-link { + .nav-link { color: $navbar-inverse-link-color; @include hover-focus { color: $navbar-inverse-link-hover-color; background-color: $navbar-inverse-link-hover-bg; } + } - &.active > a { - @include plain-hover-focus { - color: $navbar-inverse-link-active-color; - background-color: $navbar-inverse-link-active-bg; - } - } - - &.disabled > a { - @include plain-hover-focus { - color: $navbar-inverse-link-disabled-color; - background-color: $navbar-inverse-link-disabled-bg; - } + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + @include plain-hover-focus { + color: $navbar-inverse-link-active-color; + background-color: $navbar-inverse-link-active-bg; } } } - // .navbar-collapse, - // .navbar-form { - // border-color: darken($navbar-inverse-bg, 7%); - // } - // - // // Dropdowns - // .navbar-nav { - // > .open > a { - // @include plain-hover-focus { - // color: $navbar-inverse-link-active-color; - // background-color: $navbar-inverse-link-active-bg; - // } - // } - // } - - // .navbar-link { - // color: $navbar-inverse-link-color; - // @include hover { - // color: $navbar-inverse-link-hover-color; - // } - // } - // - // .btn-link { - // color: $navbar-inverse-link-color; - // - // @include hover-focus { - // color: $navbar-inverse-link-hover-color; - // } - // - // &:disabled, - // fieldset[disabled] & { - // @include hover-focus { - // color: $navbar-inverse-link-disabled-color; - // } - // } - // } + .navbar-toggler { + color: $navbar-inverse-link-color; + } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 1fabda4890..7c8b337218 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -350,15 +350,15 @@ $navbar-default-bg: #f8f8f8 !default; $navbar-default-border: darken($navbar-default-bg, 6.5%) !default; $navbar-default-link-color: #777 !default; -$navbar-default-link-hover-color: #333 !default; +$navbar-default-link-hover-color: #555 !default; $navbar-default-link-hover-bg: transparent !default; -$navbar-default-link-active-color: #555 !default; -$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; +$navbar-default-link-active-color: #333 !default; +$navbar-default-link-active-bg: darken($navbar-default-bg, 5%) !default; $navbar-default-link-disabled-color: #ccc !default; $navbar-default-link-disabled-bg: transparent !default; $navbar-default-brand-color: $navbar-default-link-color !default; -$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; +$navbar-default-brand-hover-color: $navbar-default-link-hover-color !default; $navbar-default-brand-hover-bg: transparent !default; $navbar-default-toggle-hover-bg: #ddd !default; @@ -390,7 +390,7 @@ $navbar-inverse-toggle-border-color: #333 !default; // Navs -$nav-link-padding: .75em 1em !default; +$nav-link-padding: .5em 1em !default; $nav-link-hover-bg: $gray-lighter !default; $nav-disabled-link-color: $gray-light !default;