From c1325a756ef1c19c197566f6889d49410b1dadf5 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Fri, 13 Jan 2017 23:05:33 -0500 Subject: Generate correct breakpoints for navbar-toggleable-* and generate toggleable without media query to never collapse --- scss/_navbar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c31017dc..a0856cb81 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -126,11 +126,11 @@ // where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); + $previous: breakpoint-previous($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($breakpoint) { + @include media-breakpoint-down($previous) { .navbar-nav { .dropdown-menu { position: static; @@ -144,7 +144,7 @@ } } - @include media-breakpoint-up($next) { + @include media-breakpoint-up($breakpoint) { flex-direction: row; flex-wrap: nowrap; align-items: center; -- cgit v1.2.3 From 89b47efc32f2c6575ab16f71c2c8e5db3c581d21 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 00:33:21 -0500 Subject: Simplify generation and get rid of previously added "breakpoint-previous" function --- scss/_navbar.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index a0856cb81..517a8aa92 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -126,11 +126,11 @@ // where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { - $previous: breakpoint-previous($breakpoint, $grid-breakpoints); - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($next, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($previous) { + @include media-breakpoint-down($breakpoint) { .navbar-nav { .dropdown-menu { position: static; @@ -144,7 +144,7 @@ } } - @include media-breakpoint-up($breakpoint) { + @include media-breakpoint-up($next) { flex-direction: row; flex-wrap: nowrap; align-items: center; -- cgit v1.2.3 From 1e424bfcf63c468e8ca1f2451623bd008c5b5e5b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:21:31 -0700 Subject: ditch abs positioned togglers for explicit justify-content: space-between on parent --- scss/_navbar.scss | 11 ----------- 1 file changed, 11 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 517a8aa92..c64be1820 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -111,17 +111,6 @@ background-size: 100% 100%; } -// Use `position` on the toggler to prevent it from being auto placed as a flex -// item and allow easy placement. -.navbar-toggler-left { - position: absolute; - left: $navbar-padding-x; -} -.navbar-toggler-right { - position: absolute; - right: $navbar-padding-x; -} - // Generate series of `.navbar-toggleable-*` responsive classes for configuring // where your navbar collapses. .navbar-toggleable { -- cgit v1.2.3 From 0eb9862514bcab5a0d90bcda5285cead000ff4d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:21:45 -0700 Subject: account for fluid containers --- scss/_navbar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index c64be1820..312ea3717 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -127,7 +127,8 @@ } } - > .container { + > .container, + > .container-fluid { padding-right: 0; padding-left: 0; } @@ -148,8 +149,9 @@ } // For nesting containers, have to redeclare for alignment purposes - > .container { display: flex; + > .container, + > .container-fluid { flex-wrap: nowrap; align-items: center; } -- cgit v1.2.3 From 09ba3de61974cf4e68dc173b6f36696ae1f5bf3d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 20 Mar 2017 21:23:11 -0700 Subject: revamp the collapse behavior instead of flex column, use wrap and an explicit flexbox break with flex-basis 100% on the navbar-collapse. add some additional container styles for enabling flex behavior when content isn't immediate child of .navbar --- scss/_navbar.scss | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 312ea3717..6f9fe2500 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -18,11 +18,20 @@ .navbar { position: relative; display: flex; - flex-direction: column; + flex-wrap: wrap; // allow us to do the line break for collapsing content + justify-content: space-between; // space out brand from logo padding: $navbar-padding-y $navbar-padding-x; - @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { - > .container { + // Because flex properties aren't inherited, we need to redeclare these first + // few properities so that content nested within behave properly. + > .container, + > .container-fluid { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { + width: 100%; // prevent flex parent container(-fluid) from collapsing margin-right: 0; margin-left: 0; } @@ -84,6 +93,13 @@ // Custom styles for responsive collapsing and toggling of navbar contents. // Powered by the collapse Bootstrap JavaScript plugin. +// When collapsed, prevent the toggleable navbar contents from appearing in +// the default flexbox row orienation. Requires the use of `flex-wrap: wrap` +// on the `.navbar` parent. +.navbar-collapse { + flex-basis: 100%; +} + // Button for toggling the navbar when in its collapsed state .navbar-toggler { align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child @@ -138,6 +154,7 @@ flex-direction: row; flex-wrap: nowrap; align-items: center; + justify-content: flex-start; .navbar-nav { flex-direction: row; @@ -149,7 +166,6 @@ } // For nesting containers, have to redeclare for alignment purposes - display: flex; > .container, > .container-fluid { flex-wrap: nowrap; @@ -159,7 +175,6 @@ // scss-lint:disable ImportantRule .navbar-collapse { display: flex !important; - width: 100%; } // scss-lint:enable ImportantRule -- cgit v1.2.3 From a03aaf39df876691e4ba6acb0b40e9790e4c7127 Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 01:52:05 -0500 Subject: Harmonize navbar-brand, navbar-text and nav-link height --- scss/_navbar.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6f9fe2500..9a50b4e9a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -46,8 +46,8 @@ .navbar-brand { display: inline-block; align-self: flex-start; - padding-top: .25rem; - padding-bottom: .25rem; + padding-top: $navbar-brand-padding-y; + padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; font-size: $font-size-lg; line-height: inherit; @@ -83,8 +83,8 @@ .navbar-text { display: inline-block; - padding-top: .425rem; - padding-bottom: .425rem; + padding-top: $nav-link-padding-y; + padding-bottom: $nav-link-padding-y; } -- cgit v1.2.3 From 17cb5bb674fd2f6c47619726aeea29437bcd6a0a Mon Sep 17 00:00:00 2001 From: Pierre-Denis Vanduynslager Date: Sat, 14 Jan 2017 01:59:20 -0500 Subject: Allow to customize navbar-brand font-size --- scss/_navbar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 9a50b4e9a..2c5cbe2ee 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -49,7 +49,7 @@ padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; - font-size: $font-size-lg; + font-size: $navbar-brand-font-size; line-height: inherit; white-space: nowrap; -- cgit v1.2.3 From 90c5f6230b0861d70adeee84040da5ba049a9769 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 21 Mar 2017 22:00:46 -0700 Subject: rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else --- scss/_navbar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 2c5cbe2ee..1ec5d2645 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -127,9 +127,9 @@ background-size: 100% 100%; } -// Generate series of `.navbar-toggleable-*` responsive classes for configuring +// Generate series of `.navbar-expand-*` responsive classes for configuring // where your navbar collapses. -.navbar-toggleable { +.navbar-expand { @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); -- cgit v1.2.3 From e20d744bdf6ea396ef6d29ab5c1976635d861b29 Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Tue, 14 Feb 2017 18:38:08 +0200 Subject: .navbar-toggler color Change the .navbar-toggler to default contextual .navbar-*-color. --- scss/_navbar.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 1ec5d2645..daef7ba7a 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -193,8 +193,7 @@ // Dark links against a light background .navbar-light { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-light-active-color; @include hover-focus { @@ -224,6 +223,7 @@ } .navbar-toggler { + color: $navbar-light-color; border-color: $navbar-light-toggler-border; } @@ -238,8 +238,7 @@ // White links against a dark background .navbar-inverse { - .navbar-brand, - .navbar-toggler { + .navbar-brand { color: $navbar-inverse-active-color; @include hover-focus { @@ -269,6 +268,7 @@ } .navbar-toggler { + color: $navbar-inverse-color; border-color: $navbar-inverse-toggler-border; } -- cgit v1.2.3 From 8423e5c3e6ded8094d22581503812f4d507be24e Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sat, 8 Apr 2017 18:10:20 +0300 Subject: css: .navbar-expand .dropdown position Set/reset `.dropdown` position when `.navbar-expand`. Demo: http://jsbin.com/pojecuh --- scss/_navbar.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index daef7ba7a..1133776aa 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -31,7 +31,7 @@ justify-content: space-between; @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { - width: 100%; // prevent flex parent container(-fluid) from collapsing + width: 100%; // prevent flex parent container from collapsing margin-right: 0; margin-left: 0; } @@ -159,6 +159,10 @@ .navbar-nav { flex-direction: row; + .dropdown-menu { + position: absolute; + } + .nav-link { padding-right: .5rem; padding-left: .5rem; -- cgit v1.2.3 From 758503e9ae1456b7bfb679d3dc2b8498b50458f9 Mon Sep 17 00:00:00 2001 From: Catalin Zalog Date: Sat, 8 Apr 2017 13:57:45 +0300 Subject: css: .navbar child's aligning Vertical centering `.navbar` flex children's Demo: http://jsbin.com/fibini --- scss/_navbar.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'scss/_navbar.scss') diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 1133776aa..854e7df12 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -19,6 +19,7 @@ position: relative; display: flex; flex-wrap: wrap; // allow us to do the line break for collapsing content + align-items: center; justify-content: space-between; // space out brand from logo padding: $navbar-padding-y $navbar-padding-x; @@ -28,6 +29,7 @@ > .container-fluid { display: flex; flex-wrap: wrap; + align-items: center; justify-content: space-between; @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) { @@ -45,7 +47,6 @@ .navbar-brand { display: inline-block; - align-self: flex-start; padding-top: $navbar-brand-padding-y; padding-bottom: $navbar-brand-padding-y; margin-right: $navbar-padding-x; @@ -102,7 +103,6 @@ // Button for toggling the navbar when in its collapsed state .navbar-toggler { - align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; font-size: $navbar-toggler-font-size; line-height: 1; @@ -153,7 +153,6 @@ @include media-breakpoint-up($next) { flex-direction: row; flex-wrap: nowrap; - align-items: center; justify-content: flex-start; .navbar-nav { @@ -173,7 +172,6 @@ > .container, > .container-fluid { flex-wrap: nowrap; - align-items: center; } // scss-lint:disable ImportantRule -- cgit v1.2.3