From 88a7fe84cf61df0356a3ec37c4024807532213ae Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 11 Apr 2018 11:53:11 -0700 Subject: [PATCH] Update: (Fixes #785) Atlas Application Bar, Navigation Bar, and Management Bar variant links and buttons should have `font-weight: 600` Update: (#785) Mixin `clay-navbar-variant` should accept `link-font-weight`, `btn-font-weight`, `toggler-font-weight` and it should style `.nav-link`, `.nav-btn`, `.navbar-toggler` --- .../src/scss/atlas/variables/_application-bar.scss | 1 + .../src/scss/atlas/variables/_management-bar.scss | 12 ++++++++---- .../src/scss/atlas/variables/_navigation-bar.scss | 13 +++++++++---- packages/clay/src/scss/mixins/_navbar.scss | 10 ++++++++++ 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/clay/src/scss/atlas/variables/_application-bar.scss b/packages/clay/src/scss/atlas/variables/_application-bar.scss index 5f89060cbb..4292394534 100644 --- a/packages/clay/src/scss/atlas/variables/_application-bar.scss +++ b/packages/clay/src/scss/atlas/variables/_application-bar.scss @@ -7,6 +7,7 @@ $application-bar-dark: () !default; $application-bar-dark: map-merge(( bg: lighten(desaturate(adjust-hue($dark, 1), 0.77), 3.92), link-border-radius: $border-radius, + link-font-weight: $font-weight-semi-bold, link-hover-bg: rgba(255, 255, 255, 0.04), link-active-bg: rgba(255, 255, 255, 0.08) ), $application-bar-dark); \ No newline at end of file diff --git a/packages/clay/src/scss/atlas/variables/_management-bar.scss b/packages/clay/src/scss/atlas/variables/_management-bar.scss index 57c4c2cf92..9aa4fab473 100644 --- a/packages/clay/src/scss/atlas/variables/_management-bar.scss +++ b/packages/clay/src/scss/atlas/variables/_management-bar.scss @@ -1,14 +1,18 @@ -$management-bar-light: ( +$management-bar-light: () !default; +$management-bar-light: map-merge(( bg: #FFF, link-border-radius: $border-radius, + link-font-weight: $font-weight-semi-bold, link-hover-color: $body-color, link-hover-bg: rgba(0, 0, 0, 0.02), link-active-bg: rgba(0, 0, 0, 0.04) -) !default; +), $management-bar-light); -$management-bar-primary: ( +$management-bar-primary: () !default; +$management-bar-primary: map-merge(( link-border-radius: $border-radius, + link-font-weight: $font-weight-semi-bold, link-hover-color: $body-color, link-hover-bg: rgba(0, 0, 0, 0.02), link-active-bg: rgba(0, 0, 0, 0.04) -) !default; \ No newline at end of file +), $management-bar-primary); \ No newline at end of file diff --git a/packages/clay/src/scss/atlas/variables/_navigation-bar.scss b/packages/clay/src/scss/atlas/variables/_navigation-bar.scss index 5697f12177..ee65821fc7 100644 --- a/packages/clay/src/scss/atlas/variables/_navigation-bar.scss +++ b/packages/clay/src/scss/atlas/variables/_navigation-bar.scss @@ -3,15 +3,20 @@ $navigation-bar-size: map-merge(( collapse-dropdown-item-padding-y-mobile: 0.8125rem ), $navigation-bar-size); -$navigation-bar-light: ( +$navigation-bar-light: () !default; +$navigation-bar-light: map-merge(( bg: #FFF, + link-font-weight: $font-weight-semi-bold, link-hover-color: $body-color -) !default; +), $navigation-bar-light); -$navigation-bar-secondary: ( + +$navigation-bar-secondary: () !default; +$navigation-bar-secondary: map-merge(( bg: darken(saturate($secondary, 4.82), 20.00), link-color: lighten(saturate(adjust-hue($secondary, -2), 5.48), 37.06), + link-font-weight: $font-weight-semi-bold, link-hover-color: #FFF, link-active-color: #FFF, link-disabled-color: $nav-link-disabled-color -) !default; \ No newline at end of file +), $navigation-bar-secondary); \ No newline at end of file diff --git a/packages/clay/src/scss/mixins/_navbar.scss b/packages/clay/src/scss/mixins/_navbar.scss index 9bb737db5d..1f912b9a0b 100644 --- a/packages/clay/src/scss/mixins/_navbar.scss +++ b/packages/clay/src/scss/mixins/_navbar.scss @@ -406,6 +406,7 @@ $color: map-get($map, color); $link-border-radius: map-get($map, link-border-radius); $link-color: map-get($map, link-color); + $link-font-weight: map-get($map, link-font-weight); $link-hover-color: map-get($map, link-hover-color); $link-active-color: map-get($map, link-active-color); $link-disabled-color: map-get($map, link-disabled-color); @@ -413,11 +414,13 @@ $link-hover-bg: map-get($map, link-hover-bg); $link-active-bg: map-get($map, link-active-bg); $link-disabled-bg: map-get($map, link-disabled-bg); + $btn-font-weight: setter(map-get($map, btn-font-weight), $link-font-weight); $brand-color: map-get($map, brand-color); $brand-hover-color: map-get($map, brand-hover-color); $brand-bg: map-get($map, brand-bg); $brand-hover-bg: map-get($map, brand-hover-bg); $toggler-color: setter(map-get($map, toggler-color), $link-color); + $toggler-font-weight: setter(map-get($map, toggler-font-weight), $link-font-weight); $underline-active-bg: map-get($map, underline-active-bg); @if ($enabled) { @@ -433,6 +436,7 @@ @include border-radius($link-border-radius); color: $link-color; + font-weight: $link-font-weight; @include hover { background-color: $link-hover-bg; @@ -451,6 +455,10 @@ } } + .nav-btn { + font-weight: $btn-font-weight; + } + .navbar-brand { background-color: $brand-bg; color: $brand-color; @@ -463,6 +471,7 @@ .navbar-toggler { color: $toggler-color; + font-weight: $toggler-font-weight; } .navbar-toggler-link { @@ -492,6 +501,7 @@ .dropdown-header, .dropdown-item { color: $link-color; + font-weight: $link-font-weight; } .dropdown-divider {