From 406c15d852b644c0d92c64addc30632ef9b78be4 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 28 May 2019 14:53:40 -0700 Subject: [PATCH 01/42] WIP color maps with function to retrieve color; refactor brand bar and alerts to use color map and function; start refactoring main nav colors --- .../scss/components/alert/_alert--error.scss | 2 +- .../scss/components/alert/_alert--info.scss | 2 +- .../components/alert/_alert--success.scss | 2 +- .../components/alert/_alert--warning.scss | 2 +- .../brand-bar/_brand-bar--bright.scss | 2 +- .../brand-bar/_brand-bar--dark.scss | 2 +- .../brand-bar/_brand-bar--white.scss | 4 +- .../scss/components/brand-bar/_brand-bar.scss | 2 +- .../scss/components/main-nav/_main-nav.scss | 6 +- core/src/scss/utilities/functions/_color.scss | 29 ++++++ core/src/scss/utilities/functions/index.scss | 1 + .../variables/components/_main-nav.scss | 90 +++++++++++++++++++ .../utilities/variables/components/index.scss | 3 +- .../utilities/variables/core/_color-maps.scss | 20 +++++ .../scss/utilities/variables/core/index.scss | 1 + 15 files changed, 155 insertions(+), 13 deletions(-) create mode 100644 core/src/scss/utilities/functions/_color.scss create mode 100644 core/src/scss/utilities/variables/components/_main-nav.scss create mode 100644 core/src/scss/utilities/variables/core/_color-maps.scss diff --git a/core/src/scss/components/alert/_alert--error.scss b/core/src/scss/components/alert/_alert--error.scss index 698ae2cf3..0827d4496 100644 --- a/core/src/scss/components/alert/_alert--error.scss +++ b/core/src/scss/components/alert/_alert--error.scss @@ -2,7 +2,7 @@ // Error alert. .su-alert--error { - background-color: map-get($alert-colors, 'error'); + background-color: color(error, $alert-colors); background-image: url("#{$image-path}/alert-error.png"); background-image: url("#{$image-path}/alert-error.svg"); color: $color-white; diff --git a/core/src/scss/components/alert/_alert--info.scss b/core/src/scss/components/alert/_alert--info.scss index efd27bd13..2e8bc2fe2 100644 --- a/core/src/scss/components/alert/_alert--info.scss +++ b/core/src/scss/components/alert/_alert--info.scss @@ -2,7 +2,7 @@ // Info alert. .su-alert--info { - background-color: map-get($alert-colors, 'info'); + background-color: color(info, $alert-colors); background-image: url("#{$image-path}/alert-info.png"); background-image: url("#{$image-path}/alert-info.svg"); color: $color-white; diff --git a/core/src/scss/components/alert/_alert--success.scss b/core/src/scss/components/alert/_alert--success.scss index c7bd9dca0..4d76f7296 100644 --- a/core/src/scss/components/alert/_alert--success.scss +++ b/core/src/scss/components/alert/_alert--success.scss @@ -2,7 +2,7 @@ // Success alert. .su-alert--success { - background-color: map-get($alert-colors, 'success'); + background-color: color(success, $alert-colors); background-image: url("#{$image-path}/alert-success.png"); background-image: url("#{$image-path}/alert-success.svg"); color: $color-white; diff --git a/core/src/scss/components/alert/_alert--warning.scss b/core/src/scss/components/alert/_alert--warning.scss index aeae5f5cf..0941c803b 100644 --- a/core/src/scss/components/alert/_alert--warning.scss +++ b/core/src/scss/components/alert/_alert--warning.scss @@ -2,7 +2,7 @@ // Warning alert. .su-alert--warning { - background-color: map-get($alert-colors, 'warning'); + background-color: color(warning, $alert-colors); background-image: url("#{$image-path}/alert-warning.png"); background-image: url("#{$image-path}/alert-warning.svg"); diff --git a/core/src/scss/components/brand-bar/_brand-bar--bright.scss b/core/src/scss/components/brand-bar/_brand-bar--bright.scss index c7981d953..c862e3009 100644 --- a/core/src/scss/components/brand-bar/_brand-bar--bright.scss +++ b/core/src/scss/components/brand-bar/_brand-bar--bright.scss @@ -2,5 +2,5 @@ // Brand bar with white wordmark on bright red background. .su-brand-bar--bright { - background-color: $color-bright-red; + background-color: color(brand--bright); } diff --git a/core/src/scss/components/brand-bar/_brand-bar--dark.scss b/core/src/scss/components/brand-bar/_brand-bar--dark.scss index 2b31ee460..baf6670af 100644 --- a/core/src/scss/components/brand-bar/_brand-bar--dark.scss +++ b/core/src/scss/components/brand-bar/_brand-bar--dark.scss @@ -2,5 +2,5 @@ // Brand bar with white wordmark on dark grey background. .su-brand-bar--dark { - background-color: $color-black; + background-color: color(background--reverse); } diff --git a/core/src/scss/components/brand-bar/_brand-bar--white.scss b/core/src/scss/components/brand-bar/_brand-bar--white.scss index 50d569378..db4ad2a08 100644 --- a/core/src/scss/components/brand-bar/_brand-bar--white.scss +++ b/core/src/scss/components/brand-bar/_brand-bar--white.scss @@ -2,10 +2,10 @@ // Brand bar with cardinal red wordmark on white background. .su-brand-bar--white { - background-color: $color-white; + background-color: color(background); .su-brand-bar__logo { @include font-smoothing(auto); - color: $color-cardinal-red; + color: color(brand); } } diff --git a/core/src/scss/components/brand-bar/_brand-bar.scss b/core/src/scss/components/brand-bar/_brand-bar.scss index b0d3c87bc..27f01259d 100644 --- a/core/src/scss/components/brand-bar/_brand-bar.scss +++ b/core/src/scss/components/brand-bar/_brand-bar.scss @@ -16,7 +16,7 @@ .su-brand-bar { width: 100%; height: 30px; - background-color: $color-cardinal-red; + background-color: color(brand); } .su-brand-bar__container { diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 60f334bb8..7832f1269 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -55,7 +55,7 @@ flex-direction: column; width: 100%; list-style: none; - background-color: $color-black; + background-color: color(bg--mobile, $main-nav-colors); } li { @@ -65,10 +65,10 @@ @include fancy-hover($color: $color-white, $active: $color-vivid-red, $position: 'left'); @include padding(1.6rem 4.8rem 1.6rem 2.4rem); display: block; - color: $color-white; + color: color(link--mobile, $main-nav-colors); font-weight: $font-regular; font-size: 1.8rem; - border-bottom: $color-cool-grey solid 1px; + border-bottom: color(divider, $main-nav-colors) solid 1px; outline: 0; &:active { diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss new file mode 100644 index 000000000..a4dabe1f3 --- /dev/null +++ b/core/src/scss/utilities/functions/_color.scss @@ -0,0 +1,29 @@ +@charset "UTF-8"; + +// +// color($color, $palette: $core-colors, $theme: default) +// +// Return a color from a color map +// +// Style guide: Functions.Color +// + +@function color($color, $palette: $core-colors, $theme: default) { + @if $palette == $core-colors { + $color: map-get($core-colors, $color); + @return $color; + } + @else { + + @if $theme == default { + $color: map-get($palette, $color); + @return $color; + } + @else { + $theme: map-get($palette, $theme); + $color: map-get($theme, $color); + @return $color; + } + + } +} \ No newline at end of file diff --git a/core/src/scss/utilities/functions/index.scss b/core/src/scss/utilities/functions/index.scss index 3fe16bd9f..24ff1e95e 100644 --- a/core/src/scss/utilities/functions/index.scss +++ b/core/src/scss/utilities/functions/index.scss @@ -6,6 +6,7 @@ @import 'breakpoint/index', +'color', 'flex/index', 'modular-scale/index', 'string/index', diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss new file mode 100644 index 000000000..81c658a5d --- /dev/null +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -0,0 +1,90 @@ +@charset "UTF-8"; + +// +// $main-nav-colors +// +// Color map for the Main Nav component. Active color is also used to indicate "current" page. The mobile colors apply also to desktop drop down menus. +// +// Markup: $alert-colors: ( +// success: $color-palo-alto, +// warning: $color-sun, +// error: $color-bright-red, +// info: $color-sky, +//) !default; +// +// Styleguide: Variables.Components.main-nav-colors +// + +$main-nav-colors: ( + + // Default Main Nav colors + link: $color-black, + + link--hover: $color-cardinal-red, + link-border--hover: $color-cardinal-red, + + // Active color is also used to indicate "current" page + link--active: $color-black, + link-border--active: $color-black, + + link--active-hover: $color-cardinal-red, + link-border--active-hover: $color-cardinal-red, + + // Mobile and dropdown menu colors + bg--mobile: $color-black, + divider: $color-cool-grey, + link--mobile: $color-white, + + link--mobile-hover: $color-white, + link-border--mobile-hover: $color-white, + + link--mobile-active: $color-white, + link-border--mobile-active: $color-vivid-red, + + light: ( + link: $color-black, + + link--hover: $color-cardinal-red, + link-border--hover: $color-cardinal-red, + + link--active: $color-black, + link-border--active: $color-driftwood, + + link--active-hover: $color-cardinal-red, + link-border--active-hover: $color-cardinal-red, + + bg--mobile: $color-white, + divider: #dcdcdc, + link--mobile: $color-black, + + link--mobile-hover: $color-black, + link-border--mobile-hover: $color-black, + + link--mobile-active: $color-cardinal-red, + link-border--mobile-active: $color-cardinal-red, + + ), + + dark: ( + link: $color-white, + + link--hover: $color-white, + link-border--hover: $color-vivid-red, + + link--active: $color-white, + link-border--active: $color-vivid-red, + + link--active-hover: $color-white, + link-border--active-hover: $color-white, + + bg--mobile: $color-black, + divider: $color-cool-grey, + link--mobile: $color-white, + + link--mobile-hover: $color-white, + link-border--mobile-hover: $color-white, + + link--mobile-active: $color-white, + link-border--mobile-active: $color-vivid-red, + ) +) !default; diff --git a/core/src/scss/utilities/variables/components/index.scss b/core/src/scss/utilities/variables/components/index.scss index d000ed3b4..c8518c2e3 100644 --- a/core/src/scss/utilities/variables/components/index.scss +++ b/core/src/scss/utilities/variables/components/index.scss @@ -10,4 +10,5 @@ @import 'alert', -'button'; +'button', +'main-nav'; diff --git a/core/src/scss/utilities/variables/core/_color-maps.scss b/core/src/scss/utilities/variables/core/_color-maps.scss new file mode 100644 index 000000000..a965ca4d4 --- /dev/null +++ b/core/src/scss/utilities/variables/core/_color-maps.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +// SASS color map for the core Decanter theme. + +$core-colors: ( + brand: $color-cardinal-red, + brand--bright: $color-bright-red, + brand--dark: $color-dark-red, + link: $color-bright-blue, + link--active: $color-blue, + link--alt: $color-bright-red, + link--alt-active: $color-black, + link--reverse: $color-white, + link--reverse-active: $color-vivid-red, + background: $color-white, + background--reverse: $color-black, + text: $color-black, + text--high-contrast: #000, + text--reverse: $color-white, +); diff --git a/core/src/scss/utilities/variables/core/index.scss b/core/src/scss/utilities/variables/core/index.scss index fbce9077c..6aceb9e0b 100644 --- a/core/src/scss/utilities/variables/core/index.scss +++ b/core/src/scss/utilities/variables/core/index.scss @@ -11,6 +11,7 @@ @import 'colors', 'magic-numbers', // Needs to be up at the top. +'color-maps', 'box-shadow', 'breakpoints', 'file-paths', From b7da694aa2b4f7d3cd18c236d58fc6f28bd5311e Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 28 May 2019 16:01:10 -0700 Subject: [PATCH 02/42] WIP refactor main nav colors --- core/dist/css/decanter.css | 2 +- .../components/main-nav/_main-nav--dark.scss | 16 ++++----- .../scss/components/main-nav/_main-nav.scss | 16 ++++----- .../variables/components/_main-nav.scss | 33 +++++++++++-------- 4 files changed, 37 insertions(+), 30 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 02f64e8c2..dffcc2c71 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8540,7 +8540,7 @@ a { .su-main-nav.su-main-nav--dark > ul > li > a:active { color: #ffffff; } .su-main-nav.su-main-nav--dark > ul > li > a:active::before { - background-color: #ffffff; } + background-color: #ec0513; } .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"] { color: #ffffff; } .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"]::before { diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 52e4468e8..2e5533913 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -4,18 +4,18 @@ &.su-main-nav--dark { @include grid-media-max('md') { .su-main-nav__toggle { - color: $color-white; + color: color(link, $main-nav-colors, dark); &:hover, &:focus { &::before { - background-color: $color-white; + background-color: color(link-border--hover, $main-nav-colors, dark); } } &:active { &::before { - background-color: $color-vivid-red; + background-color: color(link-border--active, $main-nav-colors, dark); } } @@ -45,22 +45,22 @@ @include grid-media('lg') { > li { > a { - color: $color-white; + color: color(link, $main-nav-colors, dark); &:hover, &:focus { - color: $color-white; + color: color(link--hover, $main-nav-colors, dark); &::before { - background-color: $color-white; + background-color: color(link-border--hover, $main-nav-colors, dark); } } &:active { - color: $color-white; + color: color(link--active, $main-nav-colors, dark); &::before { - background-color: $color-white; + background-color: color(link-border--active, $main-nav-colors, dark); } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 7832f1269..4b3638127 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -62,7 +62,7 @@ @include margin(null null 0); a { - @include fancy-hover($color: $color-white, $active: $color-vivid-red, $position: 'left'); + @include fancy-hover($color: color(link-border--mobile-hover, $main-nav-colors), $active: color(link-border--mobile-active, $main-nav-colors), $position: 'left'); @include padding(1.6rem 4.8rem 1.6rem 2.4rem); display: block; color: color(link--mobile, $main-nav-colors); @@ -92,7 +92,7 @@ &::before { visibility: visible; transform: scaleY(1); - background-color: $color-vivid-red; + background-color: color(link-border--mobile-active, $main-nav-colors); transition: left 0.1s ease-out; } @@ -257,7 +257,7 @@ .su-main-nav__toggle { @include grid-media-max('md') { - @include fancy-hover; + @include fancy-hover($color: color(link-border--hover, $main-nav-colors), $active: color(link-border--active, $main-nav-colors)); @include padding(0 0 2rem); @include margin(0); display: flex; @@ -265,7 +265,7 @@ align-items: center; width: 40px; background-color: transparent; - color: $color-black; + color: color(link, $main-nav-colors); font-size: 1.6rem; font-weight: $font-regular; line-height: 0.7; @@ -341,21 +341,21 @@ .su-main-nav__menu-lv1 > li { @include grid-media('lg') { > a { - color: $color-black; + color: color(link, $main-nav-colors); transition: color 0.3s ease-out; &:hover, &:focus { - color: $color-dark-red; + color: color(link--hover, $main-nav-colors); } &:active, &[aria-expanded="true"] { - color: $color-black; + color: color(link--active, $main-nav-colors); } &[aria-expanded="true"]:hover { - color: $color-dark-red; + color: color(link--active-hover, $main-nav-colors); } } } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 81c658a5d..0ce928ce5 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -20,17 +20,18 @@ $main-nav-colors: ( // Default Main Nav colors link: $color-black, - link--hover: $color-cardinal-red, - link-border--hover: $color-cardinal-red, + link--hover: $color-dark-red, + link-border--hover: $color-dark-red, - // Active color is also used to indicate "current" page link--active: $color-black, link-border--active: $color-black, - link--active-hover: $color-cardinal-red, - link-border--active-hover: $color-cardinal-red, + link--active-hover: $color-dark-red, + link-border--active-hover: $color-dark-red, + + link--expanded: $color-black, + link-border--expanded: $color-black, - // Mobile and dropdown menu colors bg--mobile: $color-black, divider: $color-cool-grey, link--mobile: $color-white, @@ -44,14 +45,17 @@ $main-nav-colors: ( light: ( link: $color-black, - link--hover: $color-cardinal-red, - link-border--hover: $color-cardinal-red, + link--hover: $color-dark-red, + link-border--hover: $color-dark-red, link--active: $color-black, link-border--active: $color-driftwood, - link--active-hover: $color-cardinal-red, - link-border--active-hover: $color-cardinal-red, + link--active-hover: $color-dark-red, + link-border--active-hover: $color-dark-red, + + link--expanded: $color-black, + link-border--expanded: $color-driftwood, bg--mobile: $color-white, divider: #dcdcdc, @@ -60,8 +64,8 @@ $main-nav-colors: ( link--mobile-hover: $color-black, link-border--mobile-hover: $color-black, - link--mobile-active: $color-cardinal-red, - link-border--mobile-active: $color-cardinal-red, + link--mobile-active: $color-dark-red, + link-border--mobile-active: $color-dark-red, ), @@ -69,7 +73,7 @@ $main-nav-colors: ( link: $color-white, link--hover: $color-white, - link-border--hover: $color-vivid-red, + link-border--hover: $color-white, link--active: $color-white, link-border--active: $color-vivid-red, @@ -77,6 +81,9 @@ $main-nav-colors: ( link--active-hover: $color-white, link-border--active-hover: $color-white, + link--expanded: $color-white, + link-border--expanded: $color-white, + bg--mobile: $color-black, divider: $color-cool-grey, link--mobile: $color-white, From 2d082155a12606bb56b9ae2a8bdf1a46b5bb4bb3 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 28 May 2019 16:23:26 -0700 Subject: [PATCH 03/42] WIP refactor main nav colors --- .../scss/components/main-nav/_main-nav.scss | 12 +++--- .../variables/components/_main-nav.scss | 37 ++++++++++--------- 2 files changed, 26 insertions(+), 23 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 4b3638127..254e9653e 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -143,15 +143,15 @@ @include grid-media-max('md') { &::before { - background-color: transparent; + background-color: color(link-border--mobile-expanded, $main-nav-colors); } &:hover::before { - background-color: $color-white; + background-color: color(link-border--mobile-hover, $main-nav-colors); } &:active::before { - background-color: $color-vivid-red; + background-color: color(link-border--mobile-active, $main-nav-colors); } } } @@ -364,13 +364,13 @@ > a { &::before { transform: scaleY(1); - background-color: $color-vivid-red; + background-color: color(link-border--mobile-active, $main-nav-colors); } &:hover, &:focus { &::before { - background-color: $color-vivid-red; + background-color: color(link-border--mobile-active, $main-nav-colors); } } } @@ -379,7 +379,7 @@ &.su-main-nav__item--expanded { > a:focus::before { left: 0; - background-color: $color-white; + background-color: color(link-border--mobile-active-expanded, $main-nav-colors); } > a[aria-expanded="true"] { diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 0ce928ce5..d18bae069 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -16,31 +16,34 @@ // $main-nav-colors: ( - // Default Main Nav colors - link: $color-black, + link: $color-black, + + link--hover: $color-dark-red, + link-border--hover: $color-dark-red, - link--hover: $color-dark-red, - link-border--hover: $color-dark-red, + link--active: $color-black, + link-border--active: $color-black, - link--active: $color-black, - link-border--active: $color-black, + link--active-hover: $color-dark-red, + link-border--active-hover: $color-dark-red, - link--active-hover: $color-dark-red, - link-border--active-hover: $color-dark-red, + link--expanded: $color-black, + link-border--expanded: $color-black, - link--expanded: $color-black, - link-border--expanded: $color-black, + bg--mobile: $color-black, + divider: $color-cool-grey, + link--mobile: $color-white, - bg--mobile: $color-black, - divider: $color-cool-grey, - link--mobile: $color-white, + link--mobile-hover: $color-white, + link-border--mobile-hover: $color-white, - link--mobile-hover: $color-white, - link-border--mobile-hover: $color-white, + link--mobile-active: $color-white, + link-border--mobile-active: $color-vivid-red, - link--mobile-active: $color-white, - link-border--mobile-active: $color-vivid-red, + link--mobile-expanded: $color-white, + link-border--mobile-expanded: transparent, + link-border--mobile-active-expanded: $color-white, light: ( link: $color-black, From 39d28ebaa79626d047cdf56ea186dbba3039f804 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 28 May 2019 17:57:01 -0700 Subject: [PATCH 04/42] Add warnings to color function --- .../scss/components/main-nav/_main-nav.scss | 8 ++--- core/src/scss/utilities/functions/_color.scss | 36 ++++++++++++++----- 2 files changed, 32 insertions(+), 12 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 254e9653e..edab5ea3e 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -283,7 +283,7 @@ &::before { visibility: visible; transform: scaleX(1); - background-color: $color-black; + background-color: color(link-border--expanded, $main-nav-colors); } &::after { @@ -391,7 +391,7 @@ font-weight: $font-bold; &::before { - background-color: $color-vivid-red; + background-color: color(link-border--mobile-active, $main-nav-colors); } } } @@ -401,14 +401,14 @@ @include grid-media('lg') { > a { &::before { - background-color: $color-black; + background-color: color(link-border--active, $main-nav-colors); } &:hover, &:focus { &::before { left: 0; - background-color: $color-dark-red; + background-color: color(link-border--active-hover, $main-nav-colors); } } } diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index a4dabe1f3..d7aeae9c6 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -10,20 +10,40 @@ @function color($color, $palette: $core-colors, $theme: default) { @if $palette == $core-colors { - $color: map-get($core-colors, $color); - @return $color; + @if map-has-key($core-colors, $color) { + $color: map-get($core-colors, $color); + } + @else { + @warn "Check that `#{$color}` is in color map $core-colors." + } } @else { @if $theme == default { - $color: map-get($palette, $color); - @return $color; + @if map-has-key($palette, $color) { + $color: map-get($palette, $color); + } + @else { + @warn "Check that `#{$color}` is in color map." + } } @else { - $theme: map-get($palette, $theme); - $color: map-get($theme, $color); - @return $color; - } + @if map-has-key($palette, $theme) { + $theme: map-get($palette, $theme); + + @if map-has-key($theme, $color) { + $color: map-get($theme, $color); + } + @else { + @warn "Check that `#{$color}` is in the theme." + } + } + @else { + @warn "Check that theme exists in the color map." + } + } } + + @return $color; } \ No newline at end of file From c2466b80007b38d6054d96418d4703c33864d061 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 31 May 2019 16:29:53 -0700 Subject: [PATCH 05/42] finish up main nav default style color refactor --- .../components/main-nav/_main-nav--dark.scss | 24 +++++++++---------- .../scss/components/main-nav/_main-nav.scss | 16 ++++++------- core/src/scss/utilities/functions/_color.scss | 4 ++-- .../variables/components/_main-nav.scss | 12 ++-------- 4 files changed, 24 insertions(+), 32 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 2e5533913..9ce4c5e7b 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -25,7 +25,7 @@ &[aria-expanded="true"] { &::before { - background-color: $color-white; + background-color: color(link-border--expanded, $main-nav-colors, dark); } &::after { @@ -34,7 +34,7 @@ } &:hover::before { - background-color: $color-vivid-red; + background-color: color(link-border--active, $main-nav-colors, dark); } } } @@ -65,17 +65,17 @@ } &[aria-expanded="true"] { - color: $color-white; + color: color(link--expanded, $main-nav-colors, dark); &::before { - background-color: $color-white; + background-color: color(link-border--expanded, $main-nav-colors, dark); } &:hover { - color: $color-white; + color: color(link--hover, $main-nav-colors, dark); &::before { - background-color: $color-vivid-red; + background-color: color(link-border--expanded-hover, $main-nav-colors, dark); } } } @@ -90,18 +90,18 @@ &.su-main-nav__item--current { > a { - color: $color-white; + color: color(link--active, $main-nav-colors, dark); &::before { - background-color: $color-vivid-red; + background-color: color(link-border--active, $main-nav-colors, dark); } &:hover, &:focus { - color: $color-white; + color: color(link--active-hover, $main-nav-colors, dark); &::before { - background-color: $color-white; + background-color: color(link-border--active-hover, $main-nav-colors, dark); } } } @@ -116,10 +116,10 @@ } > a[aria-expanded="true"]:hover { - color: $color-white; + color: color(link--expanded-hover, $main-nav-colors, dark); &::before { - background-color: $color-vivid-red; + background-color: color(link-border--expanded-hover, $main-nav-colors, dark); } } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index edab5ea3e..40310ee9b 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -164,7 +164,7 @@ font-weight: $font-bold; &::before { - background-color: $color-white; + background-color: color(link-border--mobile-active-expanded, $main-nav-colors); } } } @@ -195,7 +195,7 @@ > li { > a { - @include fancy-hover; + @include fancy-hover($color: color(link-border--hover, $main-nav-colors), $active: color(link-border--active, $main-nav-colors)); @include padding(null 0); @include margin(0 1.2em 0 0); font-size: 2.1rem; @@ -208,7 +208,7 @@ &[aria-expanded="true"]::before { visibility: visible; transform: scaleX(1); - background-color: $color-black; + background-color: color(link-border--expanded, $main-nav-colors); } } @@ -222,11 +222,11 @@ &.su-main-nav__item--expanded > a { &:focus::before { - background-color: $color-black; + background-color: color(link-border--expanded, $main-nav-colors); } &[aria-expanded="true"]:hover::before { - background-color: $color-dark-red; + background-color: color(link-border--hover, $main-nav-colors); } } } @@ -293,11 +293,11 @@ } &:hover::before { - background-color: $color-dark-red; + background-color: color(link-border--hover, $main-nav-colors); } &:active::before { - background-color: $color-black; + background-color: color(link-border--active, $main-nav-colors); } } @@ -305,7 +305,7 @@ &:active, &:focus { background-color: transparent; - color: $color-black; + color: color(link, $main-nav-colors); box-shadow: none; } diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index d7aeae9c6..920f82d57 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -3,7 +3,7 @@ // // color($color, $palette: $core-colors, $theme: default) // -// Return a color from a color map +// Return a color from a color map. If only a color is specified, then it returns a color from $core-colors. // // Style guide: Functions.Color // @@ -46,4 +46,4 @@ } @return $color; -} \ No newline at end of file +} diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index d18bae069..77a957fa7 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -85,16 +85,8 @@ $main-nav-colors: ( link-border--active-hover: $color-white, link--expanded: $color-white, + link--expanded-hover: $color-white, link-border--expanded: $color-white, - - bg--mobile: $color-black, - divider: $color-cool-grey, - link--mobile: $color-white, - - link--mobile-hover: $color-white, - link-border--mobile-hover: $color-white, - - link--mobile-active: $color-white, - link-border--mobile-active: $color-vivid-red, + link-border--expanded-hover: $color-vivid-red, ) ) !default; From d8c7295b133b9492341c0a4ee2d8ff471e8e5379 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 31 May 2019 16:40:03 -0700 Subject: [PATCH 06/42] Finish up refactoring main-nav--dark colors --- core/src/scss/components/main-nav/_main-nav--dark.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 9ce4c5e7b..c20ef7d5f 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -108,10 +108,10 @@ &.su-main-nav__item--expanded { > a:focus { - color: $color-white; + color: color(link--expanded, $main-nav-colors, dark); &::before { - background-color: $color-white; + background-color: color(link-border--expanded, $main-nav-colors, dark); } } From 8b25375fa248adb8524a82f52b6569df2f11db73 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 31 May 2019 17:02:04 -0700 Subject: [PATCH 07/42] Fix main-nav--light variant, when mobile search is present the background color is now white; beginning color map refactoring --- core/dist/css/decanter.css | 8 +++++-- .../components/main-nav/_main-nav--light.scss | 22 +++++++++++++++---- .../main-nav/_main-nav--mobile-search.scss | 4 ++-- .../scss/components/main-nav/_main-nav.scss | 2 +- .../variables/components/_main-nav.scss | 5 ++++- 5 files changed, 31 insertions(+), 10 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index dffcc2c71..b14c96e24 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8253,7 +8253,7 @@ a { font-weight: 700; } .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { background-color: #ffffff; } } - @media only screen and (min-width: 768px) and (max-width: 991px) { + @media (max-width: 991px) { .su-main-nav > ul { border: none; -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2); @@ -8654,12 +8654,16 @@ a { .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #820000; } } +@media (max-width: 991px) { + .su-main-nav--light.su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search { + background-color: #ffffff; } } + .su-main-nav--mobile-search .su-site-search { display: none; } @media (max-width: 991px) { .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 { - padding-top: 8rem; } + padding-top: 8.6rem; } .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search { padding: 2rem; display: block; diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 8b55bf7f0..cec7aeaeb 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -5,22 +5,22 @@ .su-main-nav__toggle { &[aria-expanded="true"] { &::before { - background-color: $color-driftwood; + background-color: color(link-border--expanded, $main-nav-colors, light); } &:hover::before { - background-color: $color-dark-red; + background-color: color(link-border--hover, $main-nav-colors, light); } &:active::before { - background-color: $color-black; + background-color: color(link-border--active, $main-nav-colors, light); } } } // general menu styles ul { - background-color: $color-white; + background-color: color(bg--mobile, $main-nav-colors, light); } li { @@ -187,3 +187,17 @@ } } } + +.su-main-nav--light.su-main-nav--mobile-search { + .su-main-nav__toggle[aria-expanded="true"] { + + @include grid-media-max('md') { + + .su-main-nav__menu-lv1 { + + + .su-site-search { + background-color: color(bg--mobile, $main-nav-colors, light); + } + } + } + } +} diff --git a/core/src/scss/components/main-nav/_main-nav--mobile-search.scss b/core/src/scss/components/main-nav/_main-nav--mobile-search.scss index a595f71fa..d87b33589 100644 --- a/core/src/scss/components/main-nav/_main-nav--mobile-search.scss +++ b/core/src/scss/components/main-nav/_main-nav--mobile-search.scss @@ -8,14 +8,14 @@ .su-main-nav__toggle[aria-expanded="true"] { @include grid-media-max('md') { + .su-main-nav__menu-lv1 { - @include padding(8rem null null null); + @include padding(8.6rem null null null); + .su-site-search { @include padding(2rem); display: block; position: absolute; width: 100%; - background-color: $color-black; + background-color: color(bg--mobile, $main-nav-colors); .su-site-search__submit { top: 3.1rem; diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 40310ee9b..3a6ebc37d 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -174,7 +174,7 @@ //top level menu styles > ul { - @include grid-media-only('md') { + @include grid-media-max('md') { @include box-shadow($depth: 'medium', $stroke: none); } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 77a957fa7..f6793b71d 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -52,7 +52,10 @@ $main-nav-colors: ( link-border--hover: $color-dark-red, link--active: $color-black, - link-border--active: $color-driftwood, + link-border--active: $color-black, + + // In this variant + link-border--current: $color-driftwood, link--active-hover: $color-dark-red, link-border--active-hover: $color-dark-red, From 9d3de5a2d980089365cc33dec9bc085bb4ea432a Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 31 May 2019 17:16:51 -0700 Subject: [PATCH 08/42] WIP main-nav--light color refactor --- .../components/main-nav/_main-nav--light.scss | 28 +++++++++---------- .../variables/components/_main-nav.scss | 6 +++- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index cec7aeaeb..1ad753898 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -25,31 +25,31 @@ li { a { - color: $color-black; - border-bottom-color: #d9d9d9; + color: color(link--mobile, $main-nav-colors, light); + border-bottom-color: color(divider, $main-nav-colors, light); &:hover, &:focus { &::before { - background-color: $color-black; + background-color: color(link-border--mobile-hover, $main-nav-colors, light); } } &:active { - color: $color-dark-red; + color: color(link--mobile-active, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(link-border--mobile-active, $main-nav-colors, light); } } } &.su-main-nav__item--current { > a { - color: $color-dark-red; + color: color(link--mobile-active, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(link-border--mobile-active, $main-nav-colors, light); } } } @@ -68,16 +68,16 @@ } &:focus::before { - background-color: transparent; + background-color: color(link-border--mobile-expanded, $main-nav-colors, light); } &[aria-expanded="true"] { &:hover::before { - background-color: $color-black; + background-color: color(link-border--mobile-hover, $main-nav-colors, light); } &:active::before { - background-color: $color-dark-red; + background-color: color(link-border--mobile-active, $main-nav-colors, light); } } } @@ -86,18 +86,18 @@ &.su-main-nav__item--current { &.su-main-nav__item--expanded { > a { - color: $color-black; + color: color(link--mobile-expanded, $main-nav-colors, light); &::before { - background-color: $color-black; + background-color: color(link-border--mobile-active-expanded, $main-nav-colors, light); } &:focus::before { - background-color: $color-black; + background-color: color(link-border--mobile-active-expanded, $main-nav-colors, light); } &[aria-expanded="true"]:active { - color: $color-dark-red; + color: color(link--mobile-active, $main-nav-colors, light); } } } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index f6793b71d..e37180e51 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -64,7 +64,7 @@ $main-nav-colors: ( link-border--expanded: $color-driftwood, bg--mobile: $color-white, - divider: #dcdcdc, + divider: #d9d9d9, link--mobile: $color-black, link--mobile-hover: $color-black, @@ -73,6 +73,10 @@ $main-nav-colors: ( link--mobile-active: $color-dark-red, link-border--mobile-active: $color-dark-red, + link--mobile-expanded: $color-black, + link-border--mobile-expanded: transparent, + link-border--mobile-active-expanded: $color-black, + ), dark: ( From 4f9cd860a9febdcdd84088fc526cc2984c073dd0 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Fri, 31 May 2019 17:34:25 -0700 Subject: [PATCH 09/42] WIP main-nav--light refactoring; change link-border to border --- .../components/main-nav/_main-nav--dark.scss | 24 +++++----- .../components/main-nav/_main-nav--light.scss | 38 +++++++-------- .../scss/components/main-nav/_main-nav.scss | 40 ++++++++-------- .../variables/components/_main-nav.scss | 46 +++++++++---------- 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index c20ef7d5f..56212706b 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -9,13 +9,13 @@ &:hover, &:focus { &::before { - background-color: color(link-border--hover, $main-nav-colors, dark); + background-color: color(border--hover, $main-nav-colors, dark); } } &:active { &::before { - background-color: color(link-border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-colors, dark); } } @@ -25,7 +25,7 @@ &[aria-expanded="true"] { &::before { - background-color: color(link-border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-colors, dark); } &::after { @@ -34,7 +34,7 @@ } &:hover::before { - background-color: color(link-border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-colors, dark); } } } @@ -52,7 +52,7 @@ color: color(link--hover, $main-nav-colors, dark); &::before { - background-color: color(link-border--hover, $main-nav-colors, dark); + background-color: color(border--hover, $main-nav-colors, dark); } } @@ -60,7 +60,7 @@ color: color(link--active, $main-nav-colors, dark); &::before { - background-color: color(link-border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-colors, dark); } } @@ -68,14 +68,14 @@ color: color(link--expanded, $main-nav-colors, dark); &::before { - background-color: color(link-border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-colors, dark); } &:hover { color: color(link--hover, $main-nav-colors, dark); &::before { - background-color: color(link-border--expanded-hover, $main-nav-colors, dark); + background-color: color(border--expanded-hover, $main-nav-colors, dark); } } } @@ -93,7 +93,7 @@ color: color(link--active, $main-nav-colors, dark); &::before { - background-color: color(link-border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-colors, dark); } &:hover, @@ -101,7 +101,7 @@ color: color(link--active-hover, $main-nav-colors, dark); &::before { - background-color: color(link-border--active-hover, $main-nav-colors, dark); + background-color: color(border--active-hover, $main-nav-colors, dark); } } } @@ -111,7 +111,7 @@ color: color(link--expanded, $main-nav-colors, dark); &::before { - background-color: color(link-border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-colors, dark); } } @@ -119,7 +119,7 @@ color: color(link--expanded-hover, $main-nav-colors, dark); &::before { - background-color: color(link-border--expanded-hover, $main-nav-colors, dark); + background-color: color(border--expanded-hover, $main-nav-colors, dark); } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 1ad753898..24c213082 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -5,15 +5,15 @@ .su-main-nav__toggle { &[aria-expanded="true"] { &::before { - background-color: color(link-border--expanded, $main-nav-colors, light); + background-color: color(border--expanded, $main-nav-colors, light); } &:hover::before { - background-color: color(link-border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-colors, light); } &:active::before { - background-color: color(link-border--active, $main-nav-colors, light); + background-color: color(border--active, $main-nav-colors, light); } } } @@ -31,7 +31,7 @@ &:hover, &:focus { &::before { - background-color: color(link-border--mobile-hover, $main-nav-colors, light); + background-color: color(border--mobile-hover, $main-nav-colors, light); } } @@ -39,7 +39,7 @@ color: color(link--mobile-active, $main-nav-colors, light); &::before { - background-color: color(link-border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-colors, light); } } } @@ -49,7 +49,7 @@ color: color(link--mobile-active, $main-nav-colors, light); &::before { - background-color: color(link-border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-colors, light); } } } @@ -68,16 +68,16 @@ } &:focus::before { - background-color: color(link-border--mobile-expanded, $main-nav-colors, light); + background-color: color(border--mobile-expanded, $main-nav-colors, light); } &[aria-expanded="true"] { &:hover::before { - background-color: color(link-border--mobile-hover, $main-nav-colors, light); + background-color: color(border--mobile-hover, $main-nav-colors, light); } &:active::before { - background-color: color(link-border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-colors, light); } } } @@ -89,11 +89,11 @@ color: color(link--mobile-expanded, $main-nav-colors, light); &::before { - background-color: color(link-border--mobile-active-expanded, $main-nav-colors, light); + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); } &:focus::before { - background-color: color(link-border--mobile-active-expanded, $main-nav-colors, light); + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); } &[aria-expanded="true"]:active { @@ -114,33 +114,33 @@ > a { &:hover, &:focus { - color: $color-dark-red; + color: color(link--hover, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(border--hover, $main-nav-colors, light); } } &:active { - color: $color-black; + color: color(link--active, $main-nav-colors, light); &::before { - background-color: $color-black; + background-color: color(border--active, $main-nav-colors, light); } } &[aria-expanded="true"] { - color: $color-black; + color: color(link--expanded, $main-nav-colors, light); &::before { - background-color: $color-driftwood; + background-color: color(border--expanded, $main-nav-colors, light); } &:hover { - color: $color-dark-red; + color: color(link--hover, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(border--hover, $main-nav-colors, light); } } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 3a6ebc37d..dbf7d054a 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -62,7 +62,7 @@ @include margin(null null 0); a { - @include fancy-hover($color: color(link-border--mobile-hover, $main-nav-colors), $active: color(link-border--mobile-active, $main-nav-colors), $position: 'left'); + @include fancy-hover($color: color(border--mobile-hover, $main-nav-colors), $active: color(border--mobile-active, $main-nav-colors), $position: 'left'); @include padding(1.6rem 4.8rem 1.6rem 2.4rem); display: block; color: color(link--mobile, $main-nav-colors); @@ -92,7 +92,7 @@ &::before { visibility: visible; transform: scaleY(1); - background-color: color(link-border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $main-nav-colors); transition: left 0.1s ease-out; } @@ -143,15 +143,15 @@ @include grid-media-max('md') { &::before { - background-color: color(link-border--mobile-expanded, $main-nav-colors); + background-color: color(border--mobile-expanded, $main-nav-colors); } &:hover::before { - background-color: color(link-border--mobile-hover, $main-nav-colors); + background-color: color(border--mobile-hover, $main-nav-colors); } &:active::before { - background-color: color(link-border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $main-nav-colors); } } } @@ -164,7 +164,7 @@ font-weight: $font-bold; &::before { - background-color: color(link-border--mobile-active-expanded, $main-nav-colors); + background-color: color(border--mobile-active-expanded, $main-nav-colors); } } } @@ -195,7 +195,7 @@ > li { > a { - @include fancy-hover($color: color(link-border--hover, $main-nav-colors), $active: color(link-border--active, $main-nav-colors)); + @include fancy-hover($color: color(border--hover, $main-nav-colors), $active: color(border--active, $main-nav-colors)); @include padding(null 0); @include margin(0 1.2em 0 0); font-size: 2.1rem; @@ -208,7 +208,7 @@ &[aria-expanded="true"]::before { visibility: visible; transform: scaleX(1); - background-color: color(link-border--expanded, $main-nav-colors); + background-color: color(border--expanded, $main-nav-colors); } } @@ -222,11 +222,11 @@ &.su-main-nav__item--expanded > a { &:focus::before { - background-color: color(link-border--expanded, $main-nav-colors); + background-color: color(border--expanded, $main-nav-colors); } &[aria-expanded="true"]:hover::before { - background-color: color(link-border--hover, $main-nav-colors); + background-color: color(border--hover, $main-nav-colors); } } } @@ -257,7 +257,7 @@ .su-main-nav__toggle { @include grid-media-max('md') { - @include fancy-hover($color: color(link-border--hover, $main-nav-colors), $active: color(link-border--active, $main-nav-colors)); + @include fancy-hover($color: color(border--hover, $main-nav-colors), $active: color(border--active, $main-nav-colors)); @include padding(0 0 2rem); @include margin(0); display: flex; @@ -283,7 +283,7 @@ &::before { visibility: visible; transform: scaleX(1); - background-color: color(link-border--expanded, $main-nav-colors); + background-color: color(border--expanded, $main-nav-colors); } &::after { @@ -293,11 +293,11 @@ } &:hover::before { - background-color: color(link-border--hover, $main-nav-colors); + background-color: color(border--hover, $main-nav-colors); } &:active::before { - background-color: color(link-border--active, $main-nav-colors); + background-color: color(border--active, $main-nav-colors); } } @@ -364,13 +364,13 @@ > a { &::before { transform: scaleY(1); - background-color: color(link-border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $main-nav-colors); } &:hover, &:focus { &::before { - background-color: color(link-border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $main-nav-colors); } } } @@ -379,7 +379,7 @@ &.su-main-nav__item--expanded { > a:focus::before { left: 0; - background-color: color(link-border--mobile-active-expanded, $main-nav-colors); + background-color: color(border--mobile-active-expanded, $main-nav-colors); } > a[aria-expanded="true"] { @@ -391,7 +391,7 @@ font-weight: $font-bold; &::before { - background-color: color(link-border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $main-nav-colors); } } } @@ -401,14 +401,14 @@ @include grid-media('lg') { > a { &::before { - background-color: color(link-border--active, $main-nav-colors); + background-color: color(border--active, $main-nav-colors); } &:hover, &:focus { &::before { left: 0; - background-color: color(link-border--active-hover, $main-nav-colors); + background-color: color(border--active-hover, $main-nav-colors); } } } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index e37180e51..b6c5d95b1 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -20,62 +20,62 @@ $main-nav-colors: ( link: $color-black, link--hover: $color-dark-red, - link-border--hover: $color-dark-red, + border--hover: $color-dark-red, link--active: $color-black, - link-border--active: $color-black, + border--active: $color-black, link--active-hover: $color-dark-red, - link-border--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, link--expanded: $color-black, - link-border--expanded: $color-black, + border--expanded: $color-black, bg--mobile: $color-black, divider: $color-cool-grey, link--mobile: $color-white, link--mobile-hover: $color-white, - link-border--mobile-hover: $color-white, + border--mobile-hover: $color-white, link--mobile-active: $color-white, - link-border--mobile-active: $color-vivid-red, + border--mobile-active: $color-vivid-red, link--mobile-expanded: $color-white, - link-border--mobile-expanded: transparent, - link-border--mobile-active-expanded: $color-white, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-white, light: ( link: $color-black, link--hover: $color-dark-red, - link-border--hover: $color-dark-red, + border--hover: $color-dark-red, link--active: $color-black, - link-border--active: $color-black, + border--active: $color-black, - // In this variant - link-border--current: $color-driftwood, + // In this variant current and active state have different border colors + border--current: $color-driftwood, link--active-hover: $color-dark-red, - link-border--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, link--expanded: $color-black, - link-border--expanded: $color-driftwood, + border--expanded: $color-driftwood, bg--mobile: $color-white, divider: #d9d9d9, link--mobile: $color-black, link--mobile-hover: $color-black, - link-border--mobile-hover: $color-black, + border--mobile-hover: $color-black, link--mobile-active: $color-dark-red, - link-border--mobile-active: $color-dark-red, + border--mobile-active: $color-dark-red, link--mobile-expanded: $color-black, - link-border--mobile-expanded: transparent, - link-border--mobile-active-expanded: $color-black, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-black, ), @@ -83,17 +83,17 @@ $main-nav-colors: ( link: $color-white, link--hover: $color-white, - link-border--hover: $color-white, + border--hover: $color-white, link--active: $color-white, - link-border--active: $color-vivid-red, + border--active: $color-vivid-red, link--active-hover: $color-white, - link-border--active-hover: $color-white, + border--active-hover: $color-white, link--expanded: $color-white, link--expanded-hover: $color-white, - link-border--expanded: $color-white, - link-border--expanded-hover: $color-vivid-red, + border--expanded: $color-white, + border--expanded-hover: $color-vivid-red, ) ) !default; From 38f290e764060ba67066ec033231344d322f8b2e Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 3 Jun 2019 11:07:13 -0700 Subject: [PATCH 10/42] Finish refactoring main-nav--light colors to use color map --- .../components/main-nav/_main-nav--light.scss | 16 ++-- .../variables/components/_main-nav.scss | 78 +++++++++---------- 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 24c213082..f65c4aa6b 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -148,36 +148,36 @@ &.su-main-nav__item--current { > a { - color: $color-black; + color: color(link--active, $main-nav-colors, light); &::before { - background-color: $color-driftwood; + background-color: color(border--current, $main-nav-colors, light); } &:hover, &:focus { - color: $color-dark-red; + color: color(link--hover, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(border--hover, $main-nav-colors, light); } } } &.su-main-nav__item--expanded { > a:focus { - color: $color-black; + color: color(link--expanded, $main-nav-colors, light); &::before { - background-color: $color-driftwood; + background-color: color(border--expanded, $main-nav-colors, light); } } > a[aria-expanded="true"]:hover { - color: $color-dark-red; + color: color(link--hover, $main-nav-colors, light); &::before { - background-color: $color-dark-red; + background-color: color(border--hover, $main-nav-colors, light); } } } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index b6c5d95b1..d7f925410 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -20,80 +20,80 @@ $main-nav-colors: ( link: $color-black, link--hover: $color-dark-red, - border--hover: $color-dark-red, + border--hover: $color-dark-red, link--active: $color-black, - border--active: $color-black, + border--active: $color-black, link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, link--expanded: $color-black, - border--expanded: $color-black, + border--expanded: $color-black, bg--mobile: $color-black, divider: $color-cool-grey, link--mobile: $color-white, link--mobile-hover: $color-white, - border--mobile-hover: $color-white, + border--mobile-hover: $color-white, link--mobile-active: $color-white, - border--mobile-active: $color-vivid-red, + border--mobile-active: $color-vivid-red, link--mobile-expanded: $color-white, - border--mobile-expanded: transparent, - border--mobile-active-expanded: $color-white, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-white, light: ( - link: $color-black, + link: $color-black, - link--hover: $color-dark-red, - border--hover: $color-dark-red, + link--hover: $color-dark-red, + border--hover: $color-dark-red, - link--active: $color-black, - border--active: $color-black, + link--active: $color-black, + border--active: $color-black, // In this variant current and active state have different border colors - border--current: $color-driftwood, + border--current: $color-driftwood, - link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + link--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, - link--expanded: $color-black, - border--expanded: $color-driftwood, + link--expanded: $color-black, + border--expanded: $color-driftwood, - bg--mobile: $color-white, - divider: #d9d9d9, - link--mobile: $color-black, + bg--mobile: $color-white, + divider: #d9d9d9, + link--mobile: $color-black, - link--mobile-hover: $color-black, - border--mobile-hover: $color-black, + link--mobile-hover: $color-black, + border--mobile-hover: $color-black, - link--mobile-active: $color-dark-red, - border--mobile-active: $color-dark-red, + link--mobile-active: $color-dark-red, + border--mobile-active: $color-dark-red, - link--mobile-expanded: $color-black, - border--mobile-expanded: transparent, - border--mobile-active-expanded: $color-black, + link--mobile-expanded: $color-black, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-black, ), dark: ( - link: $color-white, + link: $color-white, - link--hover: $color-white, - border--hover: $color-white, + link--hover: $color-white, + border--hover: $color-white, - link--active: $color-white, - border--active: $color-vivid-red, + link--active: $color-white, + border--active: $color-vivid-red, - link--active-hover: $color-white, - border--active-hover: $color-white, + link--active-hover: $color-white, + border--active-hover: $color-white, - link--expanded: $color-white, - link--expanded-hover: $color-white, - border--expanded: $color-white, - border--expanded-hover: $color-vivid-red, + link--expanded: $color-white, + link--expanded-hover: $color-white, + border--expanded: $color-white, + border--expanded-hover: $color-vivid-red, ) ) !default; From 7ea298e5caf3cf1700391f269a5c527e189eee7a Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 3 Jun 2019 13:58:38 -0700 Subject: [PATCH 11/42] Refactor to replace .su-main-nav.su-main-nav--dark selectors with just .su-main-nav--dark --- core/dist/css/decanter.css | 84 ++++----- .../components/main-nav/_main-nav--dark.scss | 176 +++++++++--------- .../scss/components/main-nav/_main-nav.scss | 4 +- .../variables/components/_main-nav.scss | 1 + 4 files changed, 128 insertions(+), 137 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index b14c96e24..f65fa1acc 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8326,7 +8326,7 @@ a { font-weight: 600; } .su-main-nav > ul > li.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav > ul > li.su-main-nav__item--expanded > a:hover::before { background-color: #820000; } } @media (max-width: 991px) { .su-main-nav.no-js .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 { @@ -8443,40 +8443,40 @@ a { display: none; } } @media only screen and (min-width: 992px) { - .su-main-nav__menu-lv1 > li > a { + .su-main-nav > ul > li > a { color: #2e2d29; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } - .su-main-nav__menu-lv1 > li > a:hover, .su-main-nav__menu-lv1 > li > a:focus { + .su-main-nav > ul > li > a:hover, .su-main-nav > ul > li > a:focus { color: #820000; } - .su-main-nav__menu-lv1 > li > a:active, .su-main-nav__menu-lv1 > li > a[aria-expanded="true"] { + .su-main-nav > ul > li > a:active, .su-main-nav > ul > li > a[aria-expanded="true"] { color: #2e2d29; } - .su-main-nav__menu-lv1 > li > a[aria-expanded="true"]:hover { + .su-main-nav > ul > li > a[aria-expanded="true"]:hover { color: #820000; } } -.su-main-nav__menu-lv1 > li.su-main-nav__item--current > a::before { +.su-main-nav > ul > li.su-main-nav__item--current > a::before { -webkit-transform: scaleY(1); transform: scaleY(1); background-color: #ec0513; } -.su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:hover::before, .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:focus::before { +.su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { background-color: #ec0513; } @media (max-width: 991px) { - .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { left: 0; background-color: #ffffff; } - .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { left: 6px; } - .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { font-weight: 700; } - .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #ec0513; } } @media only screen and (min-width: 992px) { - .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a::before { + .su-main-nav > ul > li.su-main-nav__item--current > a::before { background-color: #2e2d29; } - .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:hover::before, .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:focus::before { + .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { left: 0; background-color: #820000; } } @@ -8514,60 +8514,56 @@ a { margin-left: auto; } @media (max-width: 991px) { - .su-main-nav.su-main-nav--dark .su-main-nav__toggle { + .su-main-nav--dark .su-main-nav__toggle { color: #ffffff; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle:hover::before, .su-main-nav.su-main-nav--dark .su-main-nav__toggle:focus::before { + .su-main-nav--dark .su-main-nav__toggle:hover::before, .su-main-nav--dark .su-main-nav__toggle:focus::before { background-color: #ffffff; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle:active::before { + .su-main-nav--dark .su-main-nav__toggle:active::before { background-color: #ec0513; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle::after { + .su-main-nav--dark .su-main-nav__toggle::after { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgNC4xMzU3NUMwIDMuMjMyMDEgMC43MzI2MjUgMi40OTkzOSAxLjYzNjM2IDIuNDk5MzlIMjIuMzYzNkMyMy4yNjc0IDIuNDk5MzkgMjQgMy4yMzIwMSAyNCA0LjEzNTc1QzI0IDUuMDM5NDkgMjMuMjY3NCA1Ljc3MjEyIDIyLjM2MzYgNS43NzIxMkgxLjYzNjM2QzAuNzMyNjI1IDUuNzcyMTIgMCA1LjAzOTQ5IDAgNC4xMzU3NVoiIGZpbGw9IiNmZmZmZmYiLz4KPHBhdGggZD0iTTAgMTkuNDA4NUMwIDE4LjUwNDcgMC43MzI2MjUgMTcuNzcyMSAxLjYzNjM2IDE3Ljc3MjFIMjIuMzYzNkMyMy4yNjc0IDE3Ljc3MjEgMjQgMTguNTA0NyAyNCAxOS40MDg1QzI0IDIwLjMxMjIgMjMuMjY3NCAyMS4wNDQ4IDIyLjM2MzYgMjEuMDQ0OEgxLjYzNjM2QzAuNzMyNjI1IDIxLjA0NDggMCAyMC4zMTIyIDAgMTkuNDA4NVoiIGZpbGw9IiNmZmZmZmYiLz4KPHBhdGggZD0iTTAgMTEuNzcyMUMwIDEwLjg2ODQgMC43MzI2MjUgMTAuMTM1NyAxLjYzNjM2IDEwLjEzNTdIMjIuMzYzNkMyMy4yNjc0IDEwLjEzNTcgMjQgMTAuODY4NCAyNCAxMS43NzIxQzI0IDEyLjY3NTggMjMuMjY3NCAxMy40MDg1IDIyLjM2MzYgMTMuNDA4NUgxLjYzNjM2QzAuNzMyNjI1IDEzLjQwODUgMCAxMi42NzU4IDAgMTEuNzcyMVoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==) no-repeat 3px 0; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::before { + .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::before { background-color: #ffffff; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::after { + .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jbG9zZS1ibGFjazwvdGl0bGU+PHBhdGggZD0iTTEwLjU2LDEyLC4zMiwyMi4yMWExLDEsMCwwLDAsMS40MSwxLjQxTDEyLDEzLjM5LDIyLjIxLDIzLjYyYTEsMSwwLDAsMCwxLjQxLTEuNDFMMTMuMzksMTIsMjMuNjIsMS43NGExLDEsMCwwLDAsMC0xLjQyLDEsMSwwLDAsMC0xLjQxLDBMMTIsMTAuNTYsMS43NC4zMkExLDEsMCwwLDAsLjMyLDEuNzRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMyAtMC4wMykiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+) no-repeat 3px 0; background-size: 16px 16px; } - .su-main-nav.su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:hover::before { + .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:hover::before { background-color: #ec0513; } } @media only screen and (min-width: 992px) { - .su-main-nav.su-main-nav--dark > ul > li > a { + .su-main-nav--dark > ul > li > a { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a:hover, .su-main-nav.su-main-nav--dark > ul > li > a:focus { + .su-main-nav--dark > ul > li > a:hover, .su-main-nav--dark > ul > li > a:focus { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a:hover::before, .su-main-nav.su-main-nav--dark > ul > li > a:focus::before { + .su-main-nav--dark > ul > li > a:hover::before, .su-main-nav--dark > ul > li > a:focus::before { background-color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a:active { + .su-main-nav--dark > ul > li > a:active { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a:active::before { + .su-main-nav--dark > ul > li > a:active::before { background-color: #ec0513; } - .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"] { + .su-main-nav--dark > ul > li > a[aria-expanded="true"] { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"]::before { - background-color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"]:hover { + .su-main-nav--dark > ul > li > a[aria-expanded="true"]:hover { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li > a[aria-expanded="true"]:hover::before { - background-color: #ec0513; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--parent > a::after { + .su-main-nav--dark > ul > li.su-main-nav__item--parent > a::after, .su-main-nav--dark > ul > li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPgo=) no-repeat 0 0; background-size: 100%; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a { + .su-main-nav--dark > ul > li.su-main-nav__item--current > a { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a::before { + .su-main-nav--dark > ul > li.su-main-nav__item--current > a::before { background-color: #ec0513; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover, .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus { + .su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover, .su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus { color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus::before { + .su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus::before { background-color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus { - color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { - background-color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { - color: #ffffff; } - .su-main-nav.su-main-nav--dark > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - background-color: #ec0513; } } + .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a::before, + .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a:focus::before, .su-main-nav--dark > ul > li.su-main-nav__item--expanded.su-main-nav__item--current > a::before, + .su-main-nav--dark > ul > li.su-main-nav__item--expanded.su-main-nav__item--current > a:focus::before { + background-color: #ffffff; } + .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + background-color: #ec0513; } + .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + background-color: #ffffff; } } .su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]::before { background-color: #b6b1a9; } diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 56212706b..c3c414caa 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -1,131 +1,125 @@ @charset "UTF-8"; -.su-main-nav { - &.su-main-nav--dark { - @include grid-media-max('md') { - .su-main-nav__toggle { +.su-main-nav--dark { + @include grid-media-max('md') { + .su-main-nav__toggle { + color: color(link, $main-nav-colors, dark); + + &:hover, + &:focus { + &::before { + background-color: color(border--hover, $main-nav-colors, dark); + } + } + + &:active { + &::before { + background-color: color(border--active, $main-nav-colors, dark); + } + } + + &::after { + background: url("#{$image-path}/hamburger-white.svg") no-repeat 3px 0; + } + + &[aria-expanded="true"] { + &::before { + background-color: color(border--expanded, $main-nav-colors, dark); + } + + &::after { + background: url("#{$image-path}/close-white.svg") no-repeat 3px 0; + background-size: 16px 16px; + } + + &:hover::before { + background-color: color(border--active, $main-nav-colors, dark); + } + } + } + } + + // desktop first level menu style override + @include grid-media('lg') { + > ul > li { + > a { color: color(link, $main-nav-colors, dark); &:hover, &:focus { + color: color(link--hover, $main-nav-colors, dark); + &::before { background-color: color(border--hover, $main-nav-colors, dark); } } &:active { + color: color(link--active, $main-nav-colors, dark); + &::before { background-color: color(border--active, $main-nav-colors, dark); } } - &::after { - background: url("#{$image-path}/hamburger-white.svg") no-repeat 3px 0; - } - &[aria-expanded="true"] { - &::before { - background-color: color(border--expanded, $main-nav-colors, dark); - } + color: color(link--expanded, $main-nav-colors, dark); - &::after { - background: url("#{$image-path}/close-white.svg") no-repeat 3px 0; - background-size: 16px 16px; - } - - &:hover::before { - background-color: color(border--active, $main-nav-colors, dark); + &:hover { + color: color(link--hover, $main-nav-colors, dark); } } } - } - - // desktop first level menu style override - > ul { - @include grid-media('lg') { - > li { - > a { - color: color(link, $main-nav-colors, dark); - - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors, dark); - - &::before { - background-color: color(border--hover, $main-nav-colors, dark); - } - } - - &:active { - color: color(link--active, $main-nav-colors, dark); - &::before { - background-color: color(border--active, $main-nav-colors, dark); - } - } + &.su-main-nav__item--parent, + &.su-main-nav__item--parent.su-main-nav__item--expanded { + > a::after { + background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0; + background-size: 100%; + } + } - &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-colors, dark); + &.su-main-nav__item--current { + > a { + color: color(link--active, $main-nav-colors, dark); - &::before { - background-color: color(border--expanded, $main-nav-colors, dark); - } + &::before { + background-color: color(border--active, $main-nav-colors, dark); + } - &:hover { - color: color(link--hover, $main-nav-colors, dark); + &:hover, + &:focus { + color: color(link--active-hover, $main-nav-colors, dark); - &::before { - background-color: color(border--expanded-hover, $main-nav-colors, dark); - } - } + &::before { + background-color: color(border--active-hover, $main-nav-colors, dark); } } + } + } - &.su-main-nav__item--parent { - > a::after { - background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0; - background-size: 100%; + &.su-main-nav__item--expanded { + &, + &.su-main-nav__item--current { + > a, + > a:focus { + &::before { + background-color: color(border--expanded, $main-nav-colors, dark); } } + } - &.su-main-nav__item--current { - > a { - color: color(link--active, $main-nav-colors, dark); - - &::before { - background-color: color(border--active, $main-nav-colors, dark); - } - - &:hover, - &:focus { - color: color(link--active-hover, $main-nav-colors, dark); - - &::before { - background-color: color(border--active-hover, $main-nav-colors, dark); - } - } - } - - &.su-main-nav__item--expanded { - > a:focus { - color: color(link--expanded, $main-nav-colors, dark); - - &::before { - background-color: color(border--expanded, $main-nav-colors, dark); - } - } - - > a[aria-expanded="true"]:hover { - color: color(link--expanded-hover, $main-nav-colors, dark); + > a[aria-expanded="true"] { + &:hover::before { + background-color: color(border--expanded-hover, $main-nav-colors, dark); + } - &::before { - background-color: color(border--expanded-hover, $main-nav-colors, dark); - } - } - } + &:active::before { + background-color: color(border--expanded-active, $main-nav-colors, dark); } } } + } } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index dbf7d054a..6dea77275 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -225,7 +225,7 @@ background-color: color(border--expanded, $main-nav-colors); } - &[aria-expanded="true"]:hover::before { + &:hover::before { background-color: color(border--hover, $main-nav-colors); } } @@ -338,7 +338,7 @@ } } -.su-main-nav__menu-lv1 > li { +.su-main-nav > ul > li { @include grid-media('lg') { > a { color: color(link, $main-nav-colors); diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index d7f925410..3838b574a 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -95,5 +95,6 @@ $main-nav-colors: ( link--expanded-hover: $color-white, border--expanded: $color-white, border--expanded-hover: $color-vivid-red, + border--expanded-active: $color-white, ) ) !default; From 6f7bc0d11f898a2c1debf2967da66c9e8f56253f Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 3 Jun 2019 14:00:46 -0700 Subject: [PATCH 12/42] fixup su-main-nav--dark --- .../scss/components/main-nav/_main-nav--dark.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index c3c414caa..0f5dc528a 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -71,11 +71,13 @@ } } - &.su-main-nav__item--parent, - &.su-main-nav__item--parent.su-main-nav__item--expanded { - > a::after { - background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0; - background-size: 100%; + &.su-main-nav__item--parent { + &, + &.su-main-nav__item--expanded { + > a::after { + background: url("#{$image-path}/caret-down-white.svg") no-repeat 0 0; + background-size: 100%; + } } } From 6b3c15fbce3eebe717b4ed32c39053d5ec3d8712 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 3 Jun 2019 17:41:39 -0700 Subject: [PATCH 13/42] Continue cleanup of main nav styles --- core/dist/css/decanter.css | 165 +++++++------ .../components/main-nav/_main-nav--light.scss | 228 +++++++++--------- .../scss/components/main-nav/_main-nav.scss | 191 ++++++++------- .../utilities/variables/core/_color-maps.scss | 10 +- 4 files changed, 301 insertions(+), 293 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index f65fa1acc..1d0ef85d2 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8262,6 +8262,22 @@ a { margin-bottom: 0; } .su-main-nav > ul > li > a { font-weight: 600; } + .su-main-nav > ul > li.su-main-nav__item--current > a::before { + -webkit-transform: scaleY(1); + transform: scaleY(1); + background-color: #ec0513; } + .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { + background-color: #ec0513; } + @media (max-width: 991px) { + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + left: 0; + background-color: #ffffff; } + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + left: 6px; } + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + font-weight: 700; } + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + background-color: #ec0513; } } @media only screen and (min-width: 992px) { .su-main-nav > ul { padding-left: 0; @@ -8279,6 +8295,9 @@ a { padding-right: 0; padding-left: 0; margin: 0 1.2em 0 0; + color: #2e2d29; + -webkit-transition: color 0.3s ease-out; + transition: color 0.3s ease-out; font-size: 2.1rem; border-bottom: 0; } .su-main-nav > ul > li > a::before { @@ -8315,6 +8334,14 @@ a { bottom: 0; } .su-main-nav > ul > li > a:active { font-weight: 600; } + .su-main-nav > ul > li > a:hover, .su-main-nav > ul > li > a:focus { + color: #820000; } + .su-main-nav > ul > li > a:active, .su-main-nav > ul > li > a[aria-expanded="true"] { + color: #2e2d29; } + .su-main-nav > ul > li > a[aria-expanded="true"]:hover { + color: #820000; } + .su-main-nav > ul > li > a[aria-expanded="true"]:active { + color: #2e2d29; } .su-main-nav > ul > li > a[aria-expanded="true"]::before { visibility: visible; -webkit-transform: scaleX(1); @@ -8324,10 +8351,19 @@ a { margin-right: 0; } .su-main-nav > ul > li.su-main-nav__item--current > a { font-weight: 600; } + .su-main-nav > ul > li.su-main-nav__item--current > a::before { + background-color: #2e2d29; } + .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { + left: 0; + background-color: #820000; } + .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + background-color: #2e2d29; } .su-main-nav > ul > li.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--expanded > a:hover::before { - background-color: #820000; } } + .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + background-color: #820000; } + .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + background-color: #2e2d29; } } @media (max-width: 991px) { .su-main-nav.no-js .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 { display: -webkit-box; @@ -8442,48 +8478,10 @@ a { .su-main-nav__toggle { display: none; } } -@media only screen and (min-width: 992px) { - .su-main-nav > ul > li > a { - color: #2e2d29; - -webkit-transition: color 0.3s ease-out; - transition: color 0.3s ease-out; } - .su-main-nav > ul > li > a:hover, .su-main-nav > ul > li > a:focus { - color: #820000; } - .su-main-nav > ul > li > a:active, .su-main-nav > ul > li > a[aria-expanded="true"] { - color: #2e2d29; } - .su-main-nav > ul > li > a[aria-expanded="true"]:hover { - color: #820000; } } - -.su-main-nav > ul > li.su-main-nav__item--current > a::before { - -webkit-transform: scaleY(1); - transform: scaleY(1); - background-color: #ec0513; } - -.su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { - background-color: #ec0513; } - -@media (max-width: 991px) { - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { - left: 0; - background-color: #ffffff; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - left: 6px; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { - font-weight: 700; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { - background-color: #ec0513; } } - -@media only screen and (min-width: 992px) { - .su-main-nav > ul > li.su-main-nav__item--current > a::before { - background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { - left: 0; - background-color: #820000; } } - -.su-main-nav__menu-lv2 { +.su-main-nav > ul > li > ul { padding-left: 2rem; } @media only screen and (min-width: 992px) { - .su-main-nav__menu-lv2 { + .su-main-nav > ul > li > ul { padding-top: 1px; padding-left: 1.2rem; margin-left: -1.8rem; @@ -8493,7 +8491,7 @@ a { z-index: 11111; position: absolute; max-width: 30rem; } - .su-main-nav__menu-lv2 li:last-child a { + .su-main-nav > ul > li > ul li:last-child a { border-bottom: 0; } } .su-main-nav--center > ul { @@ -8565,89 +8563,88 @@ a { .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #ffffff; } } -.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]::before { - background-color: #b6b1a9; } - -.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:hover::before { - background-color: #820000; } - -.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:active::before { - background-color: #2e2d29; } +@media (max-width: 991px) { + .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]::before { + background-color: #b6b1a9; } + .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:hover::before { + background-color: #820000; } + .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:active::before { + background-color: #2e2d29; } } -.su-main-nav.su-main-nav--light ul { +.su-main-nav--light ul { background-color: #ffffff; } -.su-main-nav.su-main-nav--light li a { +.su-main-nav--light li a { color: #2e2d29; border-bottom-color: #d9d9d9; } - .su-main-nav.su-main-nav--light li a:hover::before, .su-main-nav.su-main-nav--light li a:focus::before { + .su-main-nav--light li a:hover::before, .su-main-nav--light li a:focus::before { background-color: #2e2d29; } - .su-main-nav.su-main-nav--light li a:active { + .su-main-nav--light li a:active { color: #820000; } - .su-main-nav.su-main-nav--light li a:active::before { + .su-main-nav--light li a:active::before { background-color: #820000; } -.su-main-nav.su-main-nav--light li.su-main-nav__item--current > a { +.su-main-nav--light li.su-main-nav__item--current > a { color: #820000; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--current > a::before { + .su-main-nav--light li.su-main-nav__item--current > a::before { background-color: #820000; } @media (max-width: 991px) { - .su-main-nav.su-main-nav--light li.su-main-nav__item--parent > a::after { + .su-main-nav--light li.su-main-nav__item--parent > a::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPnBsdXMtYmxhY2s8L3RpdGxlPjxwYXRoIGQ9Ik0xMywxYTEsMSwwLDAsMC0yLDBWMTFIMWExLDEsMCwwLDAsMCwySDExVjIzYTEsMSwwLDAsMCwyLDBWMTNIMjNhMSwxLDAsMCwwLDAtMkgxM1oiLz48L3N2Zz4=) no-repeat 0 0; background-size: 100%; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a ::after { + .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a ::after { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzIiB5MT0iMTEuOSIgeDI9IjEiIHkyPSIxMS45Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; background-size: 100%; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before { background-color: transparent; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #2e2d29; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #820000; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a { + .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a { color: #2e2d29; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { + .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { background-color: #2e2d29; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { color: #820000; } } @media only screen and (min-width: 992px) { - .su-main-nav.su-main-nav--light > ul { + .su-main-nav--light > ul { background-color: transparent; } - .su-main-nav.su-main-nav--light > ul > li > a:hover, .su-main-nav.su-main-nav--light > ul > li > a:focus { + .su-main-nav--light > ul > li > a:hover, .su-main-nav--light > ul > li > a:focus { color: #820000; } - .su-main-nav.su-main-nav--light > ul > li > a:hover::before, .su-main-nav.su-main-nav--light > ul > li > a:focus::before { + .su-main-nav--light > ul > li > a:hover::before, .su-main-nav--light > ul > li > a:focus::before { background-color: #820000; } - .su-main-nav.su-main-nav--light > ul > li > a:active { + .su-main-nav--light > ul > li > a:active { color: #2e2d29; } - .su-main-nav.su-main-nav--light > ul > li > a:active::before { + .su-main-nav--light > ul > li > a:active::before { background-color: #2e2d29; } - .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"] { + .su-main-nav--light > ul > li > a[aria-expanded="true"] { color: #2e2d29; } - .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]::before { + .su-main-nav--light > ul > li > a[aria-expanded="true"]::before { background-color: #b6b1a9; } - .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]:hover { + .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover { color: #820000; } - .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before { + .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before { background-color: #820000; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a { + .su-main-nav--light > ul > li.su-main-nav__item--current > a { color: #2e2d29; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a::before { + .su-main-nav--light > ul > li.su-main-nav__item--current > a::before { background-color: #b6b1a9; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:hover, .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:focus { + .su-main-nav--light > ul > li.su-main-nav__item--current > a:hover, .su-main-nav--light > ul > li.su-main-nav__item--current > a:focus { color: #820000; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:focus::before { + .su-main-nav--light > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav--light > ul > li.su-main-nav__item--current > a:focus::before { background-color: #820000; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus { + .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus { color: #2e2d29; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #b6b1a9; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { + .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { color: #820000; } - .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #820000; } } @media (max-width: 991px) { diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index f65c4aa6b..74b691f43 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -1,7 +1,7 @@ @charset "UTF-8"; -.su-main-nav { - &.su-main-nav--light { +.su-main-nav--light { + @include grid-media-max('md') { .su-main-nav__toggle { &[aria-expanded="true"] { &::before { @@ -17,168 +17,169 @@ } } } + } - // general menu styles - ul { - background-color: color(bg--mobile, $main-nav-colors, light); - } + // general menu styles + ul { + background-color: color(bg--mobile, $main-nav-colors, light); + } - li { - a { - color: color(link--mobile, $main-nav-colors, light); - border-bottom-color: color(divider, $main-nav-colors, light); + li { + a { + color: color(link--mobile, $main-nav-colors, light); + border-bottom-color: color(divider, $main-nav-colors, light); - &:hover, - &:focus { - &::before { - background-color: color(border--mobile-hover, $main-nav-colors, light); - } + &:hover, + &:focus { + &::before { + background-color: color(border--mobile-hover, $main-nav-colors, light); } + } - &:active { - color: color(link--mobile-active, $main-nav-colors, light); + &:active { + color: color(link--mobile-active, $main-nav-colors, light); - &::before { - background-color: color(border--mobile-active, $main-nav-colors, light); - } + &::before { + background-color: color(border--mobile-active, $main-nav-colors, light); } } + } - &.su-main-nav__item--current { - > a { - color: color(link--mobile-active, $main-nav-colors, light); + &.su-main-nav__item--current { + > a { + color: color(link--mobile-active, $main-nav-colors, light); - &::before { - background-color: color(border--mobile-active, $main-nav-colors, light); - } + &::before { + background-color: color(border--mobile-active, $main-nav-colors, light); } } + } - @include grid-media-max('md') { - &.su-main-nav__item--parent { - > a::after { - background: url("#{$image-path}/plus-black.svg") no-repeat 0 0; + @include grid-media-max('md') { + &.su-main-nav__item--parent { + > a::after { + background: url("#{$image-path}/plus-black.svg") no-repeat 0 0; + background-size: 100%; + } + + &.su-main-nav__item--expanded > a { + ::after { + background: url("#{$image-path}/minus-black.svg") no-repeat 0 0; background-size: 100%; } - &.su-main-nav__item--expanded > a { - ::after { - background: url("#{$image-path}/minus-black.svg") no-repeat 0 0; - background-size: 100%; - } + &:focus::before { + background-color: color(border--mobile-expanded, $main-nav-colors, light); + } - &:focus::before { - background-color: color(border--mobile-expanded, $main-nav-colors, light); + &[aria-expanded="true"] { + &:hover::before { + background-color: color(border--mobile-hover, $main-nav-colors, light); } - &[aria-expanded="true"] { - &:hover::before { - background-color: color(border--mobile-hover, $main-nav-colors, light); - } - - &:active::before { - background-color: color(border--mobile-active, $main-nav-colors, light); - } + &:active::before { + background-color: color(border--mobile-active, $main-nav-colors, light); } } } + } - &.su-main-nav__item--current { - &.su-main-nav__item--expanded { - > a { - color: color(link--mobile-expanded, $main-nav-colors, light); + &.su-main-nav__item--current { + &.su-main-nav__item--expanded { + > a { + color: color(link--mobile-expanded, $main-nav-colors, light); - &::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); - } + &::before { + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); + } - &:focus::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); - } + &:focus::before { + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); + } - &[aria-expanded="true"]:active { - color: color(link--mobile-active, $main-nav-colors, light); - } + &[aria-expanded="true"]:active { + color: color(link--mobile-active, $main-nav-colors, light); } } } } } + } - // desktop first level menu style override + + // desktop first level menu style override + @include grid-media('lg') { > ul { - @include grid-media('lg') { - background-color: transparent; + background-color: transparent; - > li { - > a { - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors, light); + > li { + > a { + &:hover, + &:focus { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } + } - &:active { - color: color(link--active, $main-nav-colors, light); + &:active { + color: color(link--active, $main-nav-colors, light); - &::before { - background-color: color(border--active, $main-nav-colors, light); - } + &::before { + background-color: color(border--active, $main-nav-colors, light); } + } - &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-colors, light); + &[aria-expanded="true"] { + color: color(link--expanded, $main-nav-colors, light); - &::before { - background-color: color(border--expanded, $main-nav-colors, light); - } + &::before { + background-color: color(border--expanded, $main-nav-colors, light); + } - &:hover { - color: color(link--hover, $main-nav-colors, light); + &:hover { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } } } + } - &.su-main-nav__item--current { - > a { - color: color(link--active, $main-nav-colors, light); + &.su-main-nav__item--current { + > a { + color: color(link--active, $main-nav-colors, light); - &::before { - background-color: color(border--current, $main-nav-colors, light); - } + &::before { + background-color: color(border--current, $main-nav-colors, light); + } - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors, light); + &:hover, + &:focus { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } } + } - &.su-main-nav__item--expanded { - > a:focus { - color: color(link--expanded, $main-nav-colors, light); + &.su-main-nav__item--expanded { + > a:focus { + color: color(link--expanded, $main-nav-colors, light); - &::before { - background-color: color(border--expanded, $main-nav-colors, light); - } + &::before { + background-color: color(border--expanded, $main-nav-colors, light); } + } - > a[aria-expanded="true"]:hover { - color: color(link--hover, $main-nav-colors, light); + > a[aria-expanded="true"]:hover { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } } } @@ -186,18 +187,15 @@ } } } -} -.su-main-nav--light.su-main-nav--mobile-search { - .su-main-nav__toggle[aria-expanded="true"] { - - @include grid-media-max('md') { - + .su-main-nav__menu-lv1 { - - + .su-site-search { + &.su-main-nav--mobile-search { + .su-main-nav__toggle[aria-expanded="true"] { + @include grid-media-max('md') { + + .su-main-nav__menu-lv1 + .su-site-search { background-color: color(bg--mobile, $main-nav-colors, light); } } } } + } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 6dea77275..bf3f1a33b 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -184,6 +184,46 @@ > a { font-weight: $font-semi-bold; } + + &.su-main-nav__item--current { + > a { + &::before { + transform: scaleY(1); + background-color: color(border--mobile-active, $main-nav-colors); + } + + &:hover, + &:focus { + &::before { + background-color: color(border--mobile-active, $main-nav-colors); + } + } + } + + &.su-main-nav__item--expanded { + @include grid-media-max('md') { + > a:focus::before { + left: 0; + background-color: color(border--mobile-active-expanded, $main-nav-colors); + } + + > a[aria-expanded="true"] { + &:hover::before { + left: 6px; + } + + &:active { + font-weight: $font-bold; + + &::before { + background-color: color(border--mobile-active, $main-nav-colors); + } + } + } + } + } + + } } // top level menu desktop styles @@ -198,6 +238,8 @@ @include fancy-hover($color: color(border--hover, $main-nav-colors), $active: color(border--active, $main-nav-colors)); @include padding(null 0); @include margin(0 1.2em 0 0); + color: color(link, $main-nav-colors); + transition: color 0.3s ease-out; font-size: 2.1rem; border-bottom: 0; @@ -205,10 +247,30 @@ font-weight: $font-semi-bold; } - &[aria-expanded="true"]::before { - visibility: visible; - transform: scaleX(1); - background-color: color(border--expanded, $main-nav-colors); + &:hover, + &:focus { + color: color(link--hover, $main-nav-colors); + } + + &:active, + &[aria-expanded="true"] { + color: color(link--active, $main-nav-colors); + } + + &[aria-expanded="true"] { + &:hover { + color: color(link--active-hover, $main-nav-colors); + } + + &:active { + color: color(link--active, $main-nav-colors); + } + + &::before { + visibility: visible; + transform: scaleX(1); + background-color: color(border--expanded, $main-nav-colors); + } } } @@ -216,18 +278,45 @@ @include margin(null 0 null null); } - &.su-main-nav__item--current > a { - font-weight: $font-semi-bold; + &.su-main-nav__item--current { + > a { + font-weight: $font-semi-bold; + + &::before { + background-color: color(border--active, $main-nav-colors); + } + + &:hover, + &:focus { + &::before { + left: 0; + background-color: color(border--active-hover, $main-nav-colors); + } + } + } + + &.su-main-nav__item--expanded > a { + &:focus::before { + background-color: color(border--active, $main-nav-colors); + } + } } - &.su-main-nav__item--expanded > a { - &:focus::before { + &.su-main-nav__item--expanded { + > a:focus::before { background-color: color(border--expanded, $main-nav-colors); } - &:hover::before { - background-color: color(border--hover, $main-nav-colors); + > a[aria-expanded="true"] { + &:hover::before { + background-color: color(border--hover, $main-nav-colors); + } + + &:active::before { + background-color: color(border--expanded, $main-nav-colors); + } } + } } } @@ -338,87 +427,11 @@ } } -.su-main-nav > ul > li { - @include grid-media('lg') { - > a { - color: color(link, $main-nav-colors); - transition: color 0.3s ease-out; - - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors); - } - - &:active, - &[aria-expanded="true"] { - color: color(link--active, $main-nav-colors); - } - - &[aria-expanded="true"]:hover { - color: color(link--active-hover, $main-nav-colors); - } - } - } - - &.su-main-nav__item--current { - > a { - &::before { - transform: scaleY(1); - background-color: color(border--mobile-active, $main-nav-colors); - } - - &:hover, - &:focus { - &::before { - background-color: color(border--mobile-active, $main-nav-colors); - } - } - } - - @include grid-media-max('md') { - &.su-main-nav__item--expanded { - > a:focus::before { - left: 0; - background-color: color(border--mobile-active-expanded, $main-nav-colors); - } - - > a[aria-expanded="true"] { - &:hover::before { - left: 6px; - } - - &:active { - font-weight: $font-bold; - - &::before { - background-color: color(border--mobile-active, $main-nav-colors); - } - } - } - } - } - - @include grid-media('lg') { - > a { - &::before { - background-color: color(border--active, $main-nav-colors); - } - - &:hover, - &:focus { - &::before { - left: 0; - background-color: color(border--active-hover, $main-nav-colors); - } - } - } - } - } -} - -.su-main-nav__menu-lv2 { +// 2nd level menu +.su-main-nav > ul > li > ul { @include padding(null null null 2rem); + // desktop dropdown menu @include grid-media('lg') { @include padding(1px null null 1.2rem); @include margin(null null null -1.8rem); diff --git a/core/src/scss/utilities/variables/core/_color-maps.scss b/core/src/scss/utilities/variables/core/_color-maps.scss index a965ca4d4..f715c48f0 100644 --- a/core/src/scss/utilities/variables/core/_color-maps.scss +++ b/core/src/scss/utilities/variables/core/_color-maps.scss @@ -6,15 +6,15 @@ $core-colors: ( brand: $color-cardinal-red, brand--bright: $color-bright-red, brand--dark: $color-dark-red, + background: $color-white, + background--reverse: $color-black, + text: $color-black, + text--high-contrast: #000, + text--reverse: $color-white, link: $color-bright-blue, link--active: $color-blue, link--alt: $color-bright-red, link--alt-active: $color-black, link--reverse: $color-white, link--reverse-active: $color-vivid-red, - background: $color-white, - background--reverse: $color-black, - text: $color-black, - text--high-contrast: #000, - text--reverse: $color-white, ); From f079dcb219e085ed6698369d816f4f260dca6631 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 14:39:16 -0700 Subject: [PATCH 14/42] Main-nav code cleanup remove redundancy --- core/dist/css/decanter.css | 33 +++------ .../scss/components/main-nav/_main-nav.scss | 73 +++++++------------ .../variables/components/_main-nav.scss | 1 - 3 files changed, 37 insertions(+), 70 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 1d0ef85d2..1033dd30d 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8252,32 +8252,23 @@ a { .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a { font-weight: 700; } .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { - background-color: #ffffff; } } - @media (max-width: 991px) { - .su-main-nav > ul { - border: none; - -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2); - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2); } } - .su-main-nav > ul > li { - margin-bottom: 0; } - .su-main-nav > ul > li > a { - font-weight: 600; } - .su-main-nav > ul > li.su-main-nav__item--current > a::before { - -webkit-transform: scaleY(1); - transform: scaleY(1); - background-color: #ec0513; } - .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { - background-color: #ec0513; } - @media (max-width: 991px) { - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + background-color: #ffffff; } + .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { left: 0; background-color: #ffffff; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { left: 6px; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { font-weight: 700; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #ec0513; } } + @media (max-width: 991px) { + .su-main-nav > ul { + border: none; + -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2); } } + .su-main-nav > ul > li > a { + font-weight: 600; } @media only screen and (min-width: 992px) { .su-main-nav > ul { padding-left: 0; diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index bf3f1a33b..d8e04a63c 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -48,7 +48,7 @@ position: relative; z-index: 9999; - // general menu styles + // General menu styles ul { @include margin(0 null); display: flex; @@ -123,7 +123,7 @@ position: relative; right: 0; top: 0; - height: 11px; //small svg gets chopped off if use em instead of px + height: 11px; // Small svg gets chopped off if use em instead of px width: 11px; transition: transform 0.3s ease-out; } @@ -167,66 +167,43 @@ background-color: color(border--mobile-active-expanded, $main-nav-colors); } } + + > a:focus::before { + left: 0; + background-color: color(border--mobile-active-expanded, $main-nav-colors); + } + + > a[aria-expanded="true"] { + &:hover::before { + left: 6px; + } + + &:active { + font-weight: $font-bold; + + &::before { + background-color: color(border--mobile-active, $main-nav-colors); + } + } + } } } } } - //top level menu styles + // Top level only menu styles > ul { @include grid-media-max('md') { @include box-shadow($depth: 'medium', $stroke: none); } > li { - @include margin(null null 0); - > a { font-weight: $font-semi-bold; } - - &.su-main-nav__item--current { - > a { - &::before { - transform: scaleY(1); - background-color: color(border--mobile-active, $main-nav-colors); - } - - &:hover, - &:focus { - &::before { - background-color: color(border--mobile-active, $main-nav-colors); - } - } - } - - &.su-main-nav__item--expanded { - @include grid-media-max('md') { - > a:focus::before { - left: 0; - background-color: color(border--mobile-active-expanded, $main-nav-colors); - } - - > a[aria-expanded="true"] { - &:hover::before { - left: 6px; - } - - &:active { - font-weight: $font-bold; - - &::before { - background-color: color(border--mobile-active, $main-nav-colors); - } - } - } - } - } - - } } - // top level menu desktop styles + // Top level menu desktop styles @include grid-media('lg') { @include padding(null null null 0); flex-direction: row; @@ -406,7 +383,7 @@ position: absolute; } - //toggle button variants + // Toggle button variants &--center { @include margin(null auto); } @@ -431,7 +408,7 @@ .su-main-nav > ul > li > ul { @include padding(null null null 2rem); - // desktop dropdown menu + // Desktop dropdown menu @include grid-media('lg') { @include padding(1px null null 1.2rem); @include margin(null null null -1.8rem); diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 3838b574a..4db80897b 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -76,7 +76,6 @@ $main-nav-colors: ( link--mobile-expanded: $color-black, border--mobile-expanded: transparent, border--mobile-active-expanded: $color-black, - ), dark: ( From eb04eb260379ebdb97da95804d1adbf4bce8c39f Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 16:28:51 -0700 Subject: [PATCH 15/42] WIP fixup --- core/dist/css/decanter.css | 215 +++++++++--------- .../components/main-nav/_main-nav--dark.scss | 53 ++--- .../components/main-nav/_main-nav--light.scss | 124 +++++----- .../scss/components/main-nav/_main-nav.scss | 201 ++++++++-------- 4 files changed, 303 insertions(+), 290 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 1033dd30d..7ac202471 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8192,76 +8192,77 @@ a { font-weight: 700; } .su-main-nav li > ul { display: none; } - .su-main-nav li.su-main-nav__item--expanded > ul { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .su-main-nav li.su-main-nav__item--current > a { + .su-main-nav .su-main-nav__item--expanded > ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .su-main-nav .su-main-nav__item--current > a { + font-weight: 700; } + .su-main-nav .su-main-nav__item--current > a::before { + visibility: visible; + -webkit-transform: scaleY(1); + transform: scaleY(1); + background-color: #ec0513; } + .su-main-nav .su-main-nav__item--current > a:hover::before, .su-main-nav .su-main-nav__item--current > a:focus::before { + left: 6px; + -webkit-transition: left 0.1s ease-out; + transition: left 0.1s ease-out; + background-color: #ec0513; } + .su-main-nav .su-main-nav__item--parent > a::after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAxQzEzIDAuNDQ3NzE1IDEyLjU1MjMgMCAxMiAwQzExLjQ0NzcgMCAxMSAwLjQ0NzcxNSAxMSAxVjExTDEgMTFDMC40NDc3MTYgMTEgMCAxMS40NDc3IDAgMTJDMCAxMi41NTIzIDAuNDQ3NzE2IDEzIDEgMTNMMTEgMTNWMjNDMTEgMjMuNTUyMyAxMS40NDc3IDI0IDEyIDI0QzEyLjU1MjMgMjQgMTMgMjMuNTUyMyAxMyAyM1YxM0wyMyAxM0MyMy41NTIzIDEzIDI0IDEyLjU1MjMgMjQgMTJDMjQgMTEuNDQ3NyAyMy41NTIzIDExIDIzIDExTDEzIDExVjFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) no-repeat 0 0; + background-size: 100%; + content: ""; + display: inline-block; + position: absolute; + right: 2rem; + top: 2.06rem; + height: 1.8rem; + width: 1.8rem; } + @media only screen and (min-width: 992px) { + .su-main-nav .su-main-nav__item--parent > a::after { + margin-bottom: 1px; + margin-left: 6px; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjMmUyZDI5Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; + background-size: 100%; + position: relative; + right: 0; + top: 0; + height: 11px; + width: 11px; + -webkit-transition: -webkit-transform 0.3s ease-out; + transition: -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out; + transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } } + .su-main-nav .su-main-nav__item--parent.su-main-nav__item--expanded > a::after { + background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzIiB5MT0iMTEuOSIgeDI9IjEiIHkyPSIxMS45Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; + background-size: 100%; } + @media only screen and (min-width: 992px) { + .su-main-nav .su-main-nav__item--parent.su-main-nav__item--expanded > a::after { + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjMmUyZDI5Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; + background-size: 100%; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); } } + @media (max-width: 991px) { + .su-main-nav .su-main-nav__item--parent.su-main-nav__item--expanded > a::before { + background-color: transparent; } + .su-main-nav .su-main-nav__item--parent.su-main-nav__item--expanded > a:hover::before { + background-color: #ffffff; } + .su-main-nav .su-main-nav__item--parent.su-main-nav__item--expanded > a:active::before { + background-color: #ec0513; } } + @media (max-width: 991px) { + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a { font-weight: 700; } - .su-main-nav li.su-main-nav__item--current > a::before { - visibility: visible; - -webkit-transform: scaleY(1); - transform: scaleY(1); - background-color: #ec0513; - -webkit-transition: left 0.1s ease-out; - transition: left 0.1s ease-out; } - .su-main-nav li.su-main-nav__item--current > a:hover::before, .su-main-nav li.su-main-nav__item--current > a:focus::before { - left: 6px; } - .su-main-nav li.su-main-nav__item--parent > a::after { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMyAxQzEzIDAuNDQ3NzE1IDEyLjU1MjMgMCAxMiAwQzExLjQ0NzcgMCAxMSAwLjQ0NzcxNSAxMSAxVjExTDEgMTFDMC40NDc3MTYgMTEgMCAxMS40NDc3IDAgMTJDMCAxMi41NTIzIDAuNDQ3NzE2IDEzIDEgMTNMMTEgMTNWMjNDMTEgMjMuNTUyMyAxMS40NDc3IDI0IDEyIDI0QzEyLjU1MjMgMjQgMTMgMjMuNTUyMyAxMyAyM1YxM0wyMyAxM0MyMy41NTIzIDEzIDI0IDEyLjU1MjMgMjQgMTJDMjQgMTEuNDQ3NyAyMy41NTIzIDExIDIzIDExTDEzIDExVjFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K) no-repeat 0 0; - background-size: 100%; - content: ""; - display: inline-block; - position: absolute; - right: 2rem; - top: 2.06rem; - height: 1.8rem; - width: 1.8rem; } - @media only screen and (min-width: 992px) { - .su-main-nav li.su-main-nav__item--parent > a::after { - margin-bottom: 1px; - margin-left: 6px; - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjMmUyZDI5Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; - background-size: 100%; - position: relative; - right: 0; - top: 0; - height: 11px; - width: 11px; - -webkit-transition: -webkit-transform 0.3s ease-out; - transition: -webkit-transform 0.3s ease-out; - transition: transform 0.3s ease-out; - transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } } - .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after { - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzIiB5MT0iMTEuOSIgeDI9IjEiIHkyPSIxMS45Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; - background-size: 100%; } - @media only screen and (min-width: 992px) { - .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after { - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjMmUyZDI5Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; - background-size: 100%; - -webkit-transform: rotate(180deg); - transform: rotate(180deg); } } - @media (max-width: 991px) { - .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::before { - background-color: transparent; } - .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a:hover::before { + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a::before { background-color: #ffffff; } - .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a:active::before { + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + left: 0; + background-color: #ffffff; } + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + left: 6px; } + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + font-weight: 700; } + .su-main-nav .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #ec0513; } } - @media (max-width: 991px) { - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a { - font-weight: 700; } - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { - background-color: #ffffff; } - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { - left: 0; - background-color: #ffffff; } - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - left: 6px; } - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { - font-weight: 700; } - .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { - background-color: #ec0513; } } @media (max-width: 991px) { .su-main-nav > ul { border: none; @@ -8340,20 +8341,20 @@ a { background-color: #2e2d29; } .su-main-nav > ul > li:last-child > a { margin-right: 0; } - .su-main-nav > ul > li.su-main-nav__item--current > a { + .su-main-nav > ul > .su-main-nav__item--current > a { font-weight: 600; } - .su-main-nav > ul > li.su-main-nav__item--current > a::before { + .su-main-nav > ul > .su-main-nav__item--current > a::before { background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav > ul > li.su-main-nav__item--current > a:focus::before { + .su-main-nav > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav > ul > .su-main-nav__item--current > a:focus::before { left: 0; background-color: #820000; } - .su-main-nav > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--expanded > a:focus::before { + .su-main-nav > ul > .su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #820000; } - .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #2e2d29; } } @media (max-width: 991px) { .su-main-nav.no-js .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 { @@ -8513,11 +8514,11 @@ a { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgNC4xMzU3NUMwIDMuMjMyMDEgMC43MzI2MjUgMi40OTkzOSAxLjYzNjM2IDIuNDk5MzlIMjIuMzYzNkMyMy4yNjc0IDIuNDk5MzkgMjQgMy4yMzIwMSAyNCA0LjEzNTc1QzI0IDUuMDM5NDkgMjMuMjY3NCA1Ljc3MjEyIDIyLjM2MzYgNS43NzIxMkgxLjYzNjM2QzAuNzMyNjI1IDUuNzcyMTIgMCA1LjAzOTQ5IDAgNC4xMzU3NVoiIGZpbGw9IiNmZmZmZmYiLz4KPHBhdGggZD0iTTAgMTkuNDA4NUMwIDE4LjUwNDcgMC43MzI2MjUgMTcuNzcyMSAxLjYzNjM2IDE3Ljc3MjFIMjIuMzYzNkMyMy4yNjc0IDE3Ljc3MjEgMjQgMTguNTA0NyAyNCAxOS40MDg1QzI0IDIwLjMxMjIgMjMuMjY3NCAyMS4wNDQ4IDIyLjM2MzYgMjEuMDQ0OEgxLjYzNjM2QzAuNzMyNjI1IDIxLjA0NDggMCAyMC4zMTIyIDAgMTkuNDA4NVoiIGZpbGw9IiNmZmZmZmYiLz4KPHBhdGggZD0iTTAgMTEuNzcyMUMwIDEwLjg2ODQgMC43MzI2MjUgMTAuMTM1NyAxLjYzNjM2IDEwLjEzNTdIMjIuMzYzNkMyMy4yNjc0IDEwLjEzNTcgMjQgMTAuODY4NCAyNCAxMS43NzIxQzI0IDEyLjY3NTggMjMuMjY3NCAxMy40MDg1IDIyLjM2MzYgMTMuNDA4NUgxLjYzNjM2QzAuNzMyNjI1IDEzLjQwODUgMCAxMi42NzU4IDAgMTEuNzcyMVoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+Cg==) no-repeat 3px 0; } .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::before { background-color: #ffffff; } + .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:hover::before { + background-color: #ec0513; } .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jbG9zZS1ibGFjazwvdGl0bGU+PHBhdGggZD0iTTEwLjU2LDEyLC4zMiwyMi4yMWExLDEsMCwwLDAsMS40MSwxLjQxTDEyLDEzLjM5LDIyLjIxLDIzLjYyYTEsMSwwLDAsMCwxLjQxLTEuNDFMMTMuMzksMTIsMjMuNjIsMS43NGExLDEsMCwwLDAsMC0xLjQyLDEsMSwwLDAsMC0xLjQxLDBMMTIsMTAuNTYsMS43NC4zMkExLDEsMCwwLDAsLjMyLDEuNzRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMyAtMC4wMykiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+) no-repeat 3px 0; - background-size: 16px 16px; } - .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:hover::before { - background-color: #ec0513; } } + background-size: 16px 16px; } } @media only screen and (min-width: 992px) { .su-main-nav--dark > ul > li > a { @@ -8534,24 +8535,24 @@ a { color: #ffffff; } .su-main-nav--dark > ul > li > a[aria-expanded="true"]:hover { color: #ffffff; } - .su-main-nav--dark > ul > li.su-main-nav__item--parent > a::after, .su-main-nav--dark > ul > li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after { + .su-main-nav--dark > ul > .su-main-nav__item--parent > a::after, .su-main-nav--dark > ul > .su-main-nav__item--parent.su-main-nav__item--expanded > a::after { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMy40ODg3IDUuNDE1NjZDMjQuMTM2MyA2LjAwMDI0IDI0LjE3MzcgNi45ODQ0OSAyMy41NzI1IDcuNjE0MDRMMTMuMTcyNSAxOC41MDI5QzEyLjg2OTcgMTguODE5OSAxMi40NDQ5IDE5IDEyIDE5QzExLjU1NTEgMTkgMTEuMTMwMyAxOC44MTk5IDEwLjgyNzUgMTguNTAyOUwwLjQyNzUzOCA3LjYxNDA0Qy0wLjE3Mzc0NiA2Ljk4NDQ5IC0wLjEzNjI1MSA2LjAwMDI0IDAuNTExMjg2IDUuNDE1NjZDMS4xNTg4MiA0LjgzMTA4IDIuMTcxMTkgNC44Njc1MyAyLjc3MjQ4IDUuNDk3MDhMMTIgMTUuMTU4NEwyMS4yMjc1IDUuNDk3MDhDMjEuODI4OCA0Ljg2NzUzIDIyLjg0MTIgNC44MzEwOCAyMy40ODg3IDUuNDE1NjZaIiBmaWxsPSIjZmZmZmZmIi8+Cjwvc3ZnPgo=) no-repeat 0 0; background-size: 100%; } - .su-main-nav--dark > ul > li.su-main-nav__item--current > a { + .su-main-nav--dark > ul > .su-main-nav__item--current > a { color: #ffffff; } - .su-main-nav--dark > ul > li.su-main-nav__item--current > a::before { + .su-main-nav--dark > ul > .su-main-nav__item--current > a::before { background-color: #ec0513; } - .su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover, .su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus { + .su-main-nav--dark > ul > .su-main-nav__item--current > a:hover, .su-main-nav--dark > ul > .su-main-nav__item--current > a:focus { color: #ffffff; } - .su-main-nav--dark > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav--dark > ul > li.su-main-nav__item--current > a:focus::before { + .su-main-nav--dark > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav--dark > ul > .su-main-nav__item--current > a:focus::before { background-color: #ffffff; } - .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a::before, - .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a:focus::before, .su-main-nav--dark > ul > li.su-main-nav__item--expanded.su-main-nav__item--current > a::before, - .su-main-nav--dark > ul > li.su-main-nav__item--expanded.su-main-nav__item--current > a:focus::before { + .su-main-nav--dark > ul > .su-main-nav__item--expanded > a::before, + .su-main-nav--dark > ul > .su-main-nav__item--expanded > a:focus::before, .su-main-nav--dark > ul > .su-main-nav__item--expanded.su-main-nav__item--current > a::before, + .su-main-nav--dark > ul > .su-main-nav__item--expanded.su-main-nav__item--current > a:focus::before { background-color: #ffffff; } - .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav--dark > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #ec0513; } - .su-main-nav--dark > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav--dark > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #ffffff; } } @media (max-width: 991px) { @@ -8575,31 +8576,33 @@ a { .su-main-nav--light li a:active::before { background-color: #820000; } -.su-main-nav--light li.su-main-nav__item--current > a { +.su-main-nav--light .su-main-nav__item--current > a { color: #820000; } - .su-main-nav--light li.su-main-nav__item--current > a::before { + .su-main-nav--light .su-main-nav__item--current > a::before { + background-color: #820000; } + .su-main-nav--light .su-main-nav__item--current > a:hover::before, .su-main-nav--light .su-main-nav__item--current > a:focus::before { background-color: #820000; } @media (max-width: 991px) { - .su-main-nav--light li.su-main-nav__item--parent > a::after { + .su-main-nav--light .su-main-nav__item--parent > a::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPnBsdXMtYmxhY2s8L3RpdGxlPjxwYXRoIGQ9Ik0xMywxYTEsMSwwLDAsMC0yLDBWMTFIMWExLDEsMCwwLDAsMCwySDExVjIzYTEsMSwwLDAsMCwyLDBWMTNIMjNhMSwxLDAsMCwwLDAtMkgxM1oiLz48L3N2Zz4=) no-repeat 0 0; background-size: 100%; } - .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a ::after { + .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a ::after { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzIiB5MT0iMTEuOSIgeDI9IjEiIHkyPSIxMS45Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; background-size: 100%; } - .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before { background-color: transparent; } - .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #2e2d29; } - .su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #820000; } - .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a { + .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a { color: #2e2d29; } - .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a::before { + .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a::before { background-color: #2e2d29; } - .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } - .su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { color: #820000; } } @media only screen and (min-width: 992px) { @@ -8621,21 +8624,21 @@ a { color: #820000; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before { background-color: #820000; } - .su-main-nav--light > ul > li.su-main-nav__item--current > a { + .su-main-nav--light > ul > .su-main-nav__item--current > a { color: #2e2d29; } - .su-main-nav--light > ul > li.su-main-nav__item--current > a::before { + .su-main-nav--light > ul > .su-main-nav__item--current > a::before { background-color: #b6b1a9; } - .su-main-nav--light > ul > li.su-main-nav__item--current > a:hover, .su-main-nav--light > ul > li.su-main-nav__item--current > a:focus { + .su-main-nav--light > ul > .su-main-nav__item--current > a:hover, .su-main-nav--light > ul > .su-main-nav__item--current > a:focus { color: #820000; } - .su-main-nav--light > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav--light > ul > li.su-main-nav__item--current > a:focus::before { + .su-main-nav--light > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav--light > ul > .su-main-nav__item--current > a:focus::before { background-color: #820000; } - .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus { + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus { color: #2e2d29; } - .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #b6b1a9; } - .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { color: #820000; } - .su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #820000; } } @media (max-width: 991px) { diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 0f5dc528a..9a4684193 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -27,51 +27,53 @@ background-color: color(border--expanded, $main-nav-colors, dark); } + &:hover::before { + background-color: color(border--active, $main-nav-colors, dark); + } + &::after { background: url("#{$image-path}/close-white.svg") no-repeat 3px 0; background-size: 16px 16px; } - - &:hover::before { - background-color: color(border--active, $main-nav-colors, dark); - } } } } // desktop first level menu style override @include grid-media('lg') { - > ul > li { - > a { - color: color(link, $main-nav-colors, dark); + > ul { + > li { + > a { + color: color(link, $main-nav-colors, dark); - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors, dark); + &:hover, + &:focus { + color: color(link--hover, $main-nav-colors, dark); - &::before { - background-color: color(border--hover, $main-nav-colors, dark); + &::before { + background-color: color(border--hover, $main-nav-colors, dark); + } } - } - &:active { - color: color(link--active, $main-nav-colors, dark); + &:active { + color: color(link--active, $main-nav-colors, dark); - &::before { - background-color: color(border--active, $main-nav-colors, dark); + &::before { + background-color: color(border--active, $main-nav-colors, dark); + } } - } - &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-colors, dark); + &[aria-expanded="true"] { + color: color(link--expanded, $main-nav-colors, dark); - &:hover { - color: color(link--hover, $main-nav-colors, dark); + &:hover { + color: color(link--hover, $main-nav-colors, dark); + } } } } - &.su-main-nav__item--parent { + > .su-main-nav__item--parent { &, &.su-main-nav__item--expanded { > a::after { @@ -81,7 +83,7 @@ } } - &.su-main-nav__item--current { + > .su-main-nav__item--current { > a { color: color(link--active, $main-nav-colors, dark); @@ -100,7 +102,7 @@ } } - &.su-main-nav__item--expanded { + > .su-main-nav__item--expanded { &, &.su-main-nav__item--current { > a, @@ -121,7 +123,6 @@ } } } - } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 74b691f43..6f610439c 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -44,62 +44,69 @@ } } } + } - &.su-main-nav__item--current { - > a { - color: color(link--mobile-active, $main-nav-colors, light); + .su-main-nav__item--current { + > a { + color: color(link--mobile-active, $main-nav-colors, light); + + &::before { + background-color: color(border--mobile-active, $main-nav-colors, light); + } + &:hover, + &:focus { &::before { background-color: color(border--mobile-active, $main-nav-colors, light); } } } + } - @include grid-media-max('md') { - &.su-main-nav__item--parent { - > a::after { - background: url("#{$image-path}/plus-black.svg") no-repeat 0 0; + @include grid-media-max('md') { + .su-main-nav__item--parent { + > a::after { + background: url("#{$image-path}/plus-black.svg") no-repeat 0 0; + background-size: 100%; + } + + &.su-main-nav__item--expanded > a { + ::after { + background: url("#{$image-path}/minus-black.svg") no-repeat 0 0; background-size: 100%; } - &.su-main-nav__item--expanded > a { - ::after { - background: url("#{$image-path}/minus-black.svg") no-repeat 0 0; - background-size: 100%; - } + &:focus::before { + background-color: color(border--mobile-expanded, $main-nav-colors, light); + } - &:focus::before { - background-color: color(border--mobile-expanded, $main-nav-colors, light); + &[aria-expanded="true"] { + &:hover::before { + background-color: color(border--mobile-hover, $main-nav-colors, light); } - &[aria-expanded="true"] { - &:hover::before { - background-color: color(border--mobile-hover, $main-nav-colors, light); - } - - &:active::before { - background-color: color(border--mobile-active, $main-nav-colors, light); - } + &:active::before { + background-color: color(border--mobile-active, $main-nav-colors, light); } } } + } - &.su-main-nav__item--current { - &.su-main-nav__item--expanded { - > a { - color: color(link--mobile-expanded, $main-nav-colors, light); + .su-main-nav__item--current { + &.su-main-nav__item--expanded { + > a { + color: color(link--mobile-expanded, $main-nav-colors, light); - &::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); - } + &::before { + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); + } - &:focus::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); - } + &:focus::before { + background-color: color(border--mobile-active-expanded, $main-nav-colors, light); + } - &[aria-expanded="true"]:active { - color: color(link--mobile-active, $main-nav-colors, light); - } + &[aria-expanded="true"]:active { + color: color(link--mobile-active, $main-nav-colors, light); } } } @@ -107,6 +114,7 @@ } + // desktop first level menu style override @include grid-media('lg') { > ul { @@ -147,40 +155,40 @@ } } } + } - &.su-main-nav__item--current { - > a { - color: color(link--active, $main-nav-colors, light); + > .su-main-nav__item--current { + > a { + color: color(link--active, $main-nav-colors, light); - &::before { - background-color: color(border--current, $main-nav-colors, light); - } + &::before { + background-color: color(border--current, $main-nav-colors, light); + } - &:hover, - &:focus { - color: color(link--hover, $main-nav-colors, light); + &:hover, + &:focus { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } } + } - &.su-main-nav__item--expanded { - > a:focus { - color: color(link--expanded, $main-nav-colors, light); + &.su-main-nav__item--expanded { + > a:focus { + color: color(link--expanded, $main-nav-colors, light); - &::before { - background-color: color(border--expanded, $main-nav-colors, light); - } + &::before { + background-color: color(border--expanded, $main-nav-colors, light); } + } - > a[aria-expanded="true"]:hover { - color: color(link--hover, $main-nav-colors, light); + > a[aria-expanded="true"]:hover { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); - } + &::before { + background-color: color(border--hover, $main-nav-colors, light); } } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index d8e04a63c..1303b69de 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -79,111 +79,112 @@ > ul { display: none; } + } - &.su-main-nav__item--expanded { - > ul { - display: flex; - } + .su-main-nav__item--expanded { + > ul { + display: flex; } + } - &.su-main-nav__item--current > a { - font-weight: $font-bold; + .su-main-nav__item--current > a { + font-weight: $font-bold; + &::before { + visibility: visible; + transform: scaleY(1); + background-color: color(border--mobile-active, $main-nav-colors); + } + + &:hover, + &:focus { &::before { - visibility: visible; - transform: scaleY(1); - background-color: color(border--mobile-active, $main-nav-colors); + left: 6px; transition: left 0.1s ease-out; + background-color: color(border--mobile-active, $main-nav-colors); } + } + } - &:hover, - &:focus { - &::before { - left: 6px; - } + .su-main-nav__item--parent { + > a::after { + background: url("#{$image-path}/plus-white.svg") no-repeat 0 0; + background-size: 100%; + content: ""; + display: inline-block; + position: absolute; + right: 2rem; + top: 2.06rem; + height: 1.8rem; + width: 1.8rem; + + @include grid-media('lg') { + @include margin(null null 1px 6px); + background: url("#{$image-path}/caret-down-black.svg") no-repeat 0 0; + background-size: 100%; + position: relative; + right: 0; + top: 0; + height: 11px; // Small svg gets chopped off if use em instead of px + width: 11px; + transition: transform 0.3s ease-out; } } - &.su-main-nav__item--parent { - > a::after { - background: url("#{$image-path}/plus-white.svg") no-repeat 0 0; + &.su-main-nav__item--expanded > a { + &::after { + background: url("#{$image-path}/minus-white.svg") no-repeat 0 0; background-size: 100%; - content: ""; - display: inline-block; - position: absolute; - right: 2rem; - top: 2.06rem; - height: 1.8rem; - width: 1.8rem; @include grid-media('lg') { - @include margin(null null 1px 6px); background: url("#{$image-path}/caret-down-black.svg") no-repeat 0 0; background-size: 100%; - position: relative; - right: 0; - top: 0; - height: 11px; // Small svg gets chopped off if use em instead of px - width: 11px; - transition: transform 0.3s ease-out; + transform: rotate(180deg); } } - &.su-main-nav__item--expanded > a { - &::after { - background: url("#{$image-path}/minus-white.svg") no-repeat 0 0; - background-size: 100%; - - @include grid-media('lg') { - background: url("#{$image-path}/caret-down-black.svg") no-repeat 0 0; - background-size: 100%; - transform: rotate(180deg); - } + @include grid-media-max('md') { + &::before { + background-color: color(border--mobile-expanded, $main-nav-colors); } - @include grid-media-max('md') { - &::before { - background-color: color(border--mobile-expanded, $main-nav-colors); - } - - &:hover::before { - background-color: color(border--mobile-hover, $main-nav-colors); - } + &:hover::before { + background-color: color(border--mobile-hover, $main-nav-colors); + } - &:active::before { - background-color: color(border--mobile-active, $main-nav-colors); - } + &:active::before { + background-color: color(border--mobile-active, $main-nav-colors); } } } + } - @include grid-media-max('md') { - &.su-main-nav__item--current { - &.su-main-nav__item--expanded { - > a { - font-weight: $font-bold; - - &::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors); - } - } + @include grid-media-max('md') { + .su-main-nav__item--current { + &.su-main-nav__item--expanded { + > a { + font-weight: $font-bold; - > a:focus::before { - left: 0; + &::before { background-color: color(border--mobile-active-expanded, $main-nav-colors); } + } - > a[aria-expanded="true"] { - &:hover::before { - left: 6px; - } + > a:focus::before { + left: 0; + background-color: color(border--mobile-active-expanded, $main-nav-colors); + } - &:active { - font-weight: $font-bold; + > a[aria-expanded="true"] { + &:hover::before { + left: 6px; + } - &::before { - background-color: color(border--mobile-active, $main-nav-colors); - } + &:active { + font-weight: $font-bold; + + &::before { + background-color: color(border--mobile-active, $main-nav-colors); } } } @@ -191,6 +192,7 @@ } } + // Top level only menu styles > ul { @include grid-media-max('md') { @@ -254,46 +256,45 @@ &:last-child > a { @include margin(null 0 null null); } + } - &.su-main-nav__item--current { - > a { - font-weight: $font-semi-bold; - - &::before { - background-color: color(border--active, $main-nav-colors); - } + > .su-main-nav__item--current { + > a { + font-weight: $font-semi-bold; - &:hover, - &:focus { - &::before { - left: 0; - background-color: color(border--active-hover, $main-nav-colors); - } - } + &::before { + background-color: color(border--active, $main-nav-colors); } - &.su-main-nav__item--expanded > a { - &:focus::before { - background-color: color(border--active, $main-nav-colors); + &:hover, + &:focus { + &::before { + left: 0; + background-color: color(border--active-hover, $main-nav-colors); } } } - &.su-main-nav__item--expanded { - > a:focus::before { - background-color: color(border--expanded, $main-nav-colors); + &.su-main-nav__item--expanded > a { + &:focus::before { + background-color: color(border--active, $main-nav-colors); } + } + } - > a[aria-expanded="true"] { - &:hover::before { - background-color: color(border--hover, $main-nav-colors); - } + > .su-main-nav__item--expanded { + > a:focus::before { + background-color: color(border--expanded, $main-nav-colors); + } - &:active::before { - background-color: color(border--expanded, $main-nav-colors); - } + > a[aria-expanded="true"] { + &:hover::before { + background-color: color(border--hover, $main-nav-colors); } + &:active::before { + background-color: color(border--expanded, $main-nav-colors); + } } } } From 8d28b55f038a62b2004ede449d0e9781ff604e7d Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 17:15:27 -0700 Subject: [PATCH 16/42] bg color transition fixup --- core/dist/css/decanter.css | 4 +++- core/src/scss/components/main-nav/_main-nav.scss | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 7ac202471..cdfcd965d 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8347,7 +8347,9 @@ a { background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav > ul > .su-main-nav__item--current > a:focus::before { left: 0; - background-color: #820000; } + background-color: #820000; + -webkit-transition: background-color 0.3s ease-out; + transition: background-color 0.3s ease-out; } .su-main-nav > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--expanded > a:focus::before { diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index 1303b69de..bf6064e7a 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -87,6 +87,7 @@ } } + .su-main-nav__item--current > a { font-weight: $font-bold; @@ -271,6 +272,7 @@ &::before { left: 0; background-color: color(border--active-hover, $main-nav-colors); + transition: background-color 0.3s ease-out; } } } From a07c7049d59f6b6f4abf65e9f49f5eddfdd18944 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 17:21:48 -0700 Subject: [PATCH 17/42] main-nav--light mobile minus sign fixup --- core/dist/css/decanter.css | 2 +- core/src/scss/components/main-nav/_main-nav--light.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index cdfcd965d..edf3e94ec 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8589,7 +8589,7 @@ a { .su-main-nav--light .su-main-nav__item--parent > a::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHRpdGxlPnBsdXMtYmxhY2s8L3RpdGxlPjxwYXRoIGQ9Ik0xMywxYTEsMSwwLDAsMC0yLDBWMTFIMWExLDEsMCwwLDAsMCwySDExVjIzYTEsMSwwLDAsMCwyLDBWMTNIMjNhMSwxLDAsMCwwLDAtMkgxM1oiLz48L3N2Zz4=) no-repeat 0 0; background-size: 100%; } - .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a ::after { + .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a::after { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO30KPC9zdHlsZT4KPGxpbmUgY2xhc3M9InN0MCIgeDE9IjIzIiB5MT0iMTEuOSIgeDI9IjEiIHkyPSIxMS45Ii8+Cjwvc3ZnPgo=) no-repeat 0 0; background-size: 100%; } .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before { diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 6f610439c..831852037 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -71,7 +71,7 @@ } &.su-main-nav__item--expanded > a { - ::after { + &::after { background: url("#{$image-path}/minus-black.svg") no-repeat 0 0; background-size: 100%; } From 597cea0e81498f87829fb9365a867b0ac3207864 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 17:30:10 -0700 Subject: [PATCH 18/42] have colors in brand bar, global footer, logo, button primary to refer to color map --- .../scss/components/brand-bar/_brand-bar--dark.scss | 2 +- .../scss/components/brand-bar/_brand-bar--white.scss | 2 +- .../scss/components/global-footer/_global-footer.scss | 8 ++++---- core/src/scss/components/logo/_logo.scss | 4 ++-- .../scss/utilities/mixins/button/_button-primary.scss | 10 +++++----- .../src/scss/utilities/variables/core/_color-maps.scss | 4 ++-- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/core/src/scss/components/brand-bar/_brand-bar--dark.scss b/core/src/scss/components/brand-bar/_brand-bar--dark.scss index baf6670af..7f0850261 100644 --- a/core/src/scss/components/brand-bar/_brand-bar--dark.scss +++ b/core/src/scss/components/brand-bar/_brand-bar--dark.scss @@ -2,5 +2,5 @@ // Brand bar with white wordmark on dark grey background. .su-brand-bar--dark { - background-color: color(background--reverse); + background-color: color(bg--reverse); } diff --git a/core/src/scss/components/brand-bar/_brand-bar--white.scss b/core/src/scss/components/brand-bar/_brand-bar--white.scss index db4ad2a08..7dd1e5de1 100644 --- a/core/src/scss/components/brand-bar/_brand-bar--white.scss +++ b/core/src/scss/components/brand-bar/_brand-bar--white.scss @@ -2,7 +2,7 @@ // Brand bar with cardinal red wordmark on white background. .su-brand-bar--white { - background-color: color(background); + background-color: color(bg); .su-brand-bar__logo { @include font-smoothing(auto); diff --git a/core/src/scss/components/global-footer/_global-footer.scss b/core/src/scss/components/global-footer/_global-footer.scss index febda82ff..9d72f5120 100644 --- a/core/src/scss/components/global-footer/_global-footer.scss +++ b/core/src/scss/components/global-footer/_global-footer.scss @@ -13,15 +13,15 @@ // Global styles for the global footer. .su-global-footer { @include modular-spacing('padding', 1 null); - background-color: $color-cardinal-red; - color: $color-white; + background-color: color(brand); + color: color(link--reverse); a { color: rgba($color-white, 0.9); text-decoration: none; &:hover { - color: $color-white; + color: color(link--reverse); text-decoration: underline; } } @@ -42,7 +42,7 @@ a { @include logo; - color: $color-white; + color: color(link--reverse); font-size: 3.4rem; @include grid-media-only('xs') { diff --git a/core/src/scss/components/logo/_logo.scss b/core/src/scss/components/logo/_logo.scss index b85800a18..4905eaf73 100644 --- a/core/src/scss/components/logo/_logo.scss +++ b/core/src/scss/components/logo/_logo.scss @@ -12,11 +12,11 @@ // .su-logo { @include logo; - color: $color-cardinal-red; + color: color(brand); &:hover, &:active, &:focus { - color: $color-cardinal-red; + color: color(brand); } } diff --git a/core/src/scss/utilities/mixins/button/_button-primary.scss b/core/src/scss/utilities/mixins/button/_button-primary.scss index 8bb6e0c01..d34f54528 100644 --- a/core/src/scss/utilities/mixins/button/_button-primary.scss +++ b/core/src/scss/utilities/mixins/button/_button-primary.scss @@ -12,16 +12,16 @@ @extend %button-base; @include padding(1rem 2rem 1.15rem); - background-color: $color-bright-red; - color: $color-white; + background-color: color(brand--bright); + color: color(link--reverse); &:hover { - background-color: $color-black; - color: $color-white; + background-color: color(bg--reverse); + color: color(link--reverse); } &:focus { box-shadow: $focus-shadow; - background-color: $color-black; + background-color: color(bg--reverse); } } diff --git a/core/src/scss/utilities/variables/core/_color-maps.scss b/core/src/scss/utilities/variables/core/_color-maps.scss index f715c48f0..bda502928 100644 --- a/core/src/scss/utilities/variables/core/_color-maps.scss +++ b/core/src/scss/utilities/variables/core/_color-maps.scss @@ -6,8 +6,8 @@ $core-colors: ( brand: $color-cardinal-red, brand--bright: $color-bright-red, brand--dark: $color-dark-red, - background: $color-white, - background--reverse: $color-black, + bg: $color-white, + bg--reverse: $color-black, text: $color-black, text--high-contrast: #000, text--reverse: $color-white, From aebbeb374fb9ce78c16d6ca571c209b9e3e49bf1 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 4 Jun 2019 17:54:25 -0700 Subject: [PATCH 19/42] main-nav--light fixup --- core/dist/css/decanter.css | 8 ++++++- .../components/main-nav/_main-nav--light.scss | 24 +++++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index edf3e94ec..d73eb372c 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8626,6 +8626,8 @@ a { color: #820000; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before { background-color: #820000; } + .su-main-nav--light > ul > li > a[aria-expanded="true"]:focus::before { + background-color: #b6b1a9; } .su-main-nav--light > ul > .su-main-nav__item--current > a { color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current > a::before { @@ -8641,7 +8643,11 @@ a { .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { color: #820000; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - background-color: #820000; } } + background-color: #820000; } + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { + color: #2e2d29; } + .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { + background-color: #2e2d29; } } @media (max-width: 991px) { .su-main-nav--light.su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search { diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 831852037..b7c7ddea9 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -153,6 +153,12 @@ background-color: color(border--hover, $main-nav-colors, light); } } + + &:focus { + &::before { + background-color: color(border--expanded, $main-nav-colors, light); + } + } } } } @@ -184,11 +190,21 @@ } } - > a[aria-expanded="true"]:hover { - color: color(link--hover, $main-nav-colors, light); + > a[aria-expanded="true"] { + &:hover { + color: color(link--hover, $main-nav-colors, light); - &::before { - background-color: color(border--hover, $main-nav-colors, light); + &::before { + background-color: color(border--hover, $main-nav-colors, light); + } + } + + &:active { + color: color(link--active, $main-nav-colors, light); + + &::before { + background-color: color(border--active, $main-nav-colors, light); + } } } } From 6df752511d84a6b2d18c6171e7e881ad45a7c254 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 09:57:57 -0700 Subject: [PATCH 20/42] main-nav--light fixup --- core/dist/css/decanter.css | 6 +++--- .../scss/components/main-nav/_main-nav--light.scss | 14 ++++++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index d73eb372c..72af25a81 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8600,9 +8600,7 @@ a { background-color: #820000; } .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a { color: #2e2d29; } - .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a::before { - background-color: #2e2d29; } - .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { + .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a::before, .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { color: #820000; } } @@ -8628,6 +8626,8 @@ a { background-color: #820000; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:focus::before { background-color: #b6b1a9; } + .su-main-nav--light > ul > li > a[aria-expanded="true"]:active { + color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current > a { color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current > a::before { diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index b7c7ddea9..0b72bd076 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -19,7 +19,7 @@ } } - // general menu styles + // General menu styles - mobile, also desktop drop down part ul { background-color: color(bg--mobile, $main-nav-colors, light); } @@ -97,10 +97,7 @@ > a { color: color(link--mobile-expanded, $main-nav-colors, light); - &::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); - } - + &::before, &:focus::before { background-color: color(border--mobile-active-expanded, $main-nav-colors, light); } @@ -113,8 +110,6 @@ } } - - // desktop first level menu style override @include grid-media('lg') { > ul { @@ -159,6 +154,10 @@ background-color: color(border--expanded, $main-nav-colors, light); } } + + &:active { + color: color(link--active, $main-nav-colors, light); + } } } } @@ -221,5 +220,4 @@ } } } - } From a0531d443cdc0dd5dacb70bced858251761f9a6d Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 12:27:07 -0700 Subject: [PATCH 21/42] doc, styleguide and button/link colors --- core/src/scss/utilities/functions/_color.scss | 2 - .../utilities/mixins/button/_button-big.scss | 10 +-- .../mixins/button/_button-secondary.scss | 14 ++-- .../utilities/mixins/link/_action-link.scss | 2 +- .../src/scss/utilities/mixins/link/_link.scss | 2 +- .../placeholders/components/_cta.scss | 2 +- .../variables/components/_main-nav.scss | 67 +++++++++++++++++-- .../utilities/variables/core/_color-maps.scss | 20 ------ .../variables/core/_core-color-maps.scss | 46 +++++++++++++ .../scss/utilities/variables/core/index.scss | 2 +- 10 files changed, 122 insertions(+), 45 deletions(-) delete mode 100644 core/src/scss/utilities/variables/core/_color-maps.scss create mode 100644 core/src/scss/utilities/variables/core/_core-color-maps.scss diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index 920f82d57..e004cd66b 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -18,7 +18,6 @@ } } @else { - @if $theme == default { @if map-has-key($palette, $color) { $color: map-get($palette, $color); @@ -28,7 +27,6 @@ } } @else { - @if map-has-key($palette, $theme) { $theme: map-get($palette, $theme); diff --git a/core/src/scss/utilities/mixins/button/_button-big.scss b/core/src/scss/utilities/mixins/button/_button-big.scss index ed5edbe5a..6adf946a8 100644 --- a/core/src/scss/utilities/mixins/button/_button-big.scss +++ b/core/src/scss/utilities/mixins/button/_button-big.scss @@ -12,16 +12,16 @@ @include padding(1.5rem 3rem 1.8rem); @include type-c; - background-color: $color-bright-red; - color: $color-white; + background-color: color(brand--bright); + color: color(link--reverse); &:hover { - background-color: $color-black; - color: $color-white; + background-color: color(bg--reverse); + color: color(link--reverse); } &:focus { box-shadow: $focus-shadow; - background-color: $color-black; + background-color: color(bg--reverse); } } diff --git a/core/src/scss/utilities/mixins/button/_button-secondary.scss b/core/src/scss/utilities/mixins/button/_button-secondary.scss index f4c67e0aa..3a1d967f0 100644 --- a/core/src/scss/utilities/mixins/button/_button-secondary.scss +++ b/core/src/scss/utilities/mixins/button/_button-secondary.scss @@ -11,19 +11,19 @@ @extend %button-base; @include padding(1rem 2rem 1.15rem); - background-color: $color-white; - box-shadow: $button-stroke $color-bright-red; - color: $color-bright-red; + background-color: color(bg); + box-shadow: $button-stroke color(brand--bright); + color: color(brand--bright); &:hover { - background-color: $color-white; + background-color: color(bg); box-shadow: $button-stroke $color-black; - color: $color-black; + color: color(link--hover); } &:focus { - background-color: $color-white; + background-color: color(bg); box-shadow: $button-stroke $color-black, $focus-shadow; - color: $color-black; + color: color(link--hover); } } diff --git a/core/src/scss/utilities/mixins/link/_action-link.scss b/core/src/scss/utilities/mixins/link/_action-link.scss index a479b6719..119eb5d2a 100644 --- a/core/src/scss/utilities/mixins/link/_action-link.scss +++ b/core/src/scss/utilities/mixins/link/_action-link.scss @@ -10,7 +10,7 @@ // // Style guide: Mixins.Link.action-link // -@mixin action-link($color: $color-bright-blue, $hover: $color-black) { +@mixin action-link($color: color(link--alt), $hover: color(link--alt-hover)) { font-weight: $font-semi-bold; text-decoration: none; color: $color; diff --git a/core/src/scss/utilities/mixins/link/_link.scss b/core/src/scss/utilities/mixins/link/_link.scss index 4a86dd44a..234cc1882 100644 --- a/core/src/scss/utilities/mixins/link/_link.scss +++ b/core/src/scss/utilities/mixins/link/_link.scss @@ -10,7 +10,7 @@ // // Style guide: Mixins.Link.link // -@mixin link($color: $color-bright-red, $hover: $color-black) { +@mixin link($color: color(link), $hover: color(link--hover)) { color: $color; text-decoration: underline; diff --git a/core/src/scss/utilities/placeholders/components/_cta.scss b/core/src/scss/utilities/placeholders/components/_cta.scss index 91e0094d9..8dd56042a 100644 --- a/core/src/scss/utilities/placeholders/components/_cta.scss +++ b/core/src/scss/utilities/placeholders/components/_cta.scss @@ -39,7 +39,7 @@ } .su-cta__button { - background-color: $color-black; + background-color: color(bg--reverse); text-decoration: none; } } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 4db80897b..e85ce8f25 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -3,18 +3,71 @@ // // $main-nav-colors // -// Color map for the Main Nav component. Active color is also used to indicate "current" page. The mobile colors apply also to desktop drop down menus. +// Color map for the Main Nav component. Active color is also used to indicate "current" page. +// The mobile colors apply also to desktop drop down menus. // -// Markup: $alert-colors: ( -// success: $color-palo-alto, -// warning: $color-sun, -// error: $color-bright-red, -// info: $color-sky, +// Markup: $main-nav-colors: ( +// // Default Main Nav colors +// link: $color-black, +// link--hover: $color-dark-red, +// border--hover: $color-dark-red, +// link--active: $color-black, +// border--active: $color-black, +// link--active-hover: $color-dark-red, +// border--active-hover: $color-dark-red, +// link--expanded: $color-black, +// border--expanded: $color-black, +// bg--mobile: $color-black, +// divider: $color-cool-grey, +// link--mobile: $color-white, +// link--mobile-hover: $color-white, +// border--mobile-hover: $color-white, +// link--mobile-active: $color-white, +// border--mobile-active: $color-vivid-red, +// link--mobile-expanded: $color-white, +// border--mobile-expanded: transparent, +// border--mobile-active-expanded: $color-white, +// light: ( +// link: $color-black, +// link--hover: $color-dark-red, +// border--hover: $color-dark-red, +// link--active: $color-black, +// border--active: $color-black, +// // In this variant current and active state have different border colors +// border--current: $color-driftwood, +// link--active-hover: $color-dark-red, +// border--active-hover: $color-dark-red, +// link--expanded: $color-black, +// border--expanded: $color-driftwood, +// bg--mobile: $color-white, +// divider: #d9d9d9, +// link--mobile: $color-black, +// link--mobile-hover: $color-black, +// border--mobile-hover: $color-black, +// link--mobile-active: $color-dark-red, +// border--mobile-active: $color-dark-red, +// link--mobile-expanded: $color-black, +// border--mobile-expanded: transparent, +// border--mobile-active-expanded: $color-black, +// ), +// dark: ( +// link: $color-white, +// link--hover: $color-white, +// border--hover: $color-white, +// link--active: $color-white, +// border--active: $color-vivid-red, +// link--active-hover: $color-white, +// border--active-hover: $color-white, +// link--expanded: $color-white, +// link--expanded-hover: $color-white, +// border--expanded: $color-white, +// border--expanded-hover: $color-vivid-red, +// border--expanded-active: $color-white, +// ) //) !default; // // Styleguide: Variables.Components.main-nav-colors // - $main-nav-colors: ( // Default Main Nav colors link: $color-black, diff --git a/core/src/scss/utilities/variables/core/_color-maps.scss b/core/src/scss/utilities/variables/core/_color-maps.scss deleted file mode 100644 index bda502928..000000000 --- a/core/src/scss/utilities/variables/core/_color-maps.scss +++ /dev/null @@ -1,20 +0,0 @@ -@charset "UTF-8"; - -// SASS color map for the core Decanter theme. - -$core-colors: ( - brand: $color-cardinal-red, - brand--bright: $color-bright-red, - brand--dark: $color-dark-red, - bg: $color-white, - bg--reverse: $color-black, - text: $color-black, - text--high-contrast: #000, - text--reverse: $color-white, - link: $color-bright-blue, - link--active: $color-blue, - link--alt: $color-bright-red, - link--alt-active: $color-black, - link--reverse: $color-white, - link--reverse-active: $color-vivid-red, -); diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss new file mode 100644 index 000000000..854ff4e3c --- /dev/null +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -0,0 +1,46 @@ +@charset "UTF-8"; + +// +// $core-colors +// +// SASS color map for the core Decanter theme. In the future, there might be more than one color theme. +// Color maps for individual components are in their own respective directories within utilities/variables/components +// +// Markup: $core-colors: ( +// brand: $color-cardinal-red, +// brand--bright: $color-bright-red, +// brand--dark: $color-dark-red, +// bg: $color-white, +// bg--reverse: $color-black, +// text: $color-black, +// text--high-contrast: #000, +// text--reverse: $color-white, +// link: $color-bright-red, +// link--hover: $color-black, +// link--alt: $color-bright-blue, +// link--alt-hover: $color-black, +// link--reverse: $color-white, +// link--reverse-hover: $color-vivid-red, +//) !default; +// +// Style guide: Variables.Core.colors-map +// +$core-colors: ( + brand: $color-cardinal-red, + brand--bright: $color-bright-red, + brand--dark: $color-dark-red, + + bg: $color-white, + bg--reverse: $color-black, + + text: $color-black, + text--high-contrast: #000, + text--reverse: $color-white, + + link: $color-bright-red, + link--hover: $color-black, + link--alt: $color-bright-blue, + link--alt-hover: $color-black, + link--reverse: $color-white, + link--reverse-hover: $color-vivid-red, +) !default; diff --git a/core/src/scss/utilities/variables/core/index.scss b/core/src/scss/utilities/variables/core/index.scss index 6aceb9e0b..fb4ea5a31 100644 --- a/core/src/scss/utilities/variables/core/index.scss +++ b/core/src/scss/utilities/variables/core/index.scss @@ -10,8 +10,8 @@ @import 'colors', +'core-color-maps', 'magic-numbers', // Needs to be up at the top. -'color-maps', 'box-shadow', 'breakpoints', 'file-paths', From eeb056e1c711c0c1ea77d9f1cbb49b327be795ef Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 12:42:06 -0700 Subject: [PATCH 22/42] fixup --- core/dist/css/decanter.css | 10 ++++++++++ core/src/scss/components/main-nav/_main-nav--dark.scss | 10 +++++++++- .../src/scss/components/main-nav/_main-nav--light.scss | 8 ++++++++ core/src/scss/components/main-nav/_main-nav.scss | 4 ++++ 4 files changed, 31 insertions(+), 1 deletion(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 72af25a81..6f89caf84 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8350,6 +8350,8 @@ a { background-color: #820000; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } + .su-main-nav > ul > .su-main-nav__item--current > a:active::before { + background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--expanded > a:focus::before { @@ -8518,6 +8520,8 @@ a { background-color: #ffffff; } .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:hover::before { background-color: #ec0513; } + .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]:active::before { + background-color: #ffffff; } .su-main-nav--dark .su-main-nav__toggle[aria-expanded="true"]::after { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jbG9zZS1ibGFjazwvdGl0bGU+PHBhdGggZD0iTTEwLjU2LDEyLC4zMiwyMi4yMWExLDEsMCwwLDAsMS40MSwxLjQxTDEyLDEzLjM5LDIyLjIxLDIzLjYyYTEsMSwwLDAsMCwxLjQxLTEuNDFMMTMuMzksMTIsMjMuNjIsMS43NGExLDEsMCwwLDAsMC0xLjQyLDEsMSwwLDAsMC0xLjQxLDBMMTIsMTAuNTYsMS43NC4zMkExLDEsMCwwLDAsLjMyLDEuNzRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMyAtMC4wMykiIGZpbGw9IiNmZmZmZmYiIC8+PC9zdmc+) no-repeat 3px 0; background-size: 16px 16px; } } @@ -8548,6 +8552,8 @@ a { color: #ffffff; } .su-main-nav--dark > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav--dark > ul > .su-main-nav__item--current > a:focus::before { background-color: #ffffff; } + .su-main-nav--dark > ul > .su-main-nav__item--current > a:active::before { + background-color: #ec0513; } .su-main-nav--dark > ul > .su-main-nav__item--expanded > a::before, .su-main-nav--dark > ul > .su-main-nav__item--expanded > a:focus::before, .su-main-nav--dark > ul > .su-main-nav__item--expanded.su-main-nav__item--current > a::before, .su-main-nav--dark > ul > .su-main-nav__item--expanded.su-main-nav__item--current > a:focus::before { @@ -8636,6 +8642,10 @@ a { color: #820000; } .su-main-nav--light > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav--light > ul > .su-main-nav__item--current > a:focus::before { background-color: #820000; } + .su-main-nav--light > ul > .su-main-nav__item--current > a:active { + color: #2e2d29; } + .su-main-nav--light > ul > .su-main-nav__item--current > a:active::before { + background-color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus { color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 9a4684193..c7d5b3251 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -28,7 +28,11 @@ } &:hover::before { - background-color: color(border--active, $main-nav-colors, dark); + background-color: color(border--expanded-hover, $main-nav-colors, dark); + } + + &:active::before { + background-color: color(border--expanded-active, $main-nav-colors, dark); } &::after { @@ -99,6 +103,10 @@ background-color: color(border--active-hover, $main-nav-colors, dark); } } + + &:active::before { + background-color: color(border--active, $main-nav-colors, dark); + } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index 0b72bd076..f40c82d81 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -178,6 +178,14 @@ background-color: color(border--hover, $main-nav-colors, light); } } + + &:active { + color: color(link--active, $main-nav-colors, light); + + &::before { + background-color: color(border--active, $main-nav-colors, light); + } + } } &.su-main-nav__item--expanded { diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index bf6064e7a..cac89e7a4 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -275,6 +275,10 @@ transition: background-color 0.3s ease-out; } } + + &:active::before { + background-color: color(border--active, $main-nav-colors); + } } &.su-main-nav__item--expanded > a { From 0e0121571f22502a0f011af453ac7b8f460c9a4f Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 12:55:08 -0700 Subject: [PATCH 23/42] Doc --- core/src/scss/utilities/functions/_color.scss | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index e004cd66b..0d3cc5d3f 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -1,15 +1,21 @@ @charset "UTF-8"; // -// color($color, $palette: $core-colors, $theme: default) +// color($color, $colormap: $core-colors, $theme: default) // // Return a color from a color map. If only a color is specified, then it returns a color from $core-colors. +// If a color and a color map are specified, then it returns a color from the default theme of the color map. +// If all 3 are specified, it returns a color from the specified theme of the color map. +// +// $color - String - Color variable name from a color map, e.g., brand, link--hover +// $colormap - Color palette in the form of a SASS map, e.g., $main-nav-colors, $alert-colors. Default is $core-colors. +// $theme - String - Name of the theme within a color map, e.g., dark, light. Default is default. // // Style guide: Functions.Color // -@function color($color, $palette: $core-colors, $theme: default) { - @if $palette == $core-colors { +@function color($color, $colormap: $core-colors, $theme: default) { + @if $colormap == $core-colors { @if map-has-key($core-colors, $color) { $color: map-get($core-colors, $color); } @@ -19,16 +25,16 @@ } @else { @if $theme == default { - @if map-has-key($palette, $color) { - $color: map-get($palette, $color); + @if map-has-key($colormap, $color) { + $color: map-get($colormap, $color); } @else { @warn "Check that `#{$color}` is in color map." } } @else { - @if map-has-key($palette, $theme) { - $theme: map-get($palette, $theme); + @if map-has-key($colormap, $theme) { + $theme: map-get($colormap, $theme); @if map-has-key($theme, $color) { $color: map-get($theme, $color); From ee9e703724ebcfd7f2aa40a8f4efdd1ea1a6a958 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 13:00:27 -0700 Subject: [PATCH 24/42] cc indentation fix --- .../variables/components/_main-nav.scss | 114 +++++++++--------- .../variables/core/_core-color-maps.scss | 28 ++--- 2 files changed, 71 insertions(+), 71 deletions(-) diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index e85ce8f25..ed76b7648 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -69,84 +69,84 @@ // Styleguide: Variables.Components.main-nav-colors // $main-nav-colors: ( - // Default Main Nav colors - link: $color-black, + // Default Main Nav colors + link: $color-black, - link--hover: $color-dark-red, - border--hover: $color-dark-red, + link--hover: $color-dark-red, + border--hover: $color-dark-red, - link--active: $color-black, - border--active: $color-black, + link--active: $color-black, + border--active: $color-black, - link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + link--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, - link--expanded: $color-black, - border--expanded: $color-black, + link--expanded: $color-black, + border--expanded: $color-black, - bg--mobile: $color-black, - divider: $color-cool-grey, - link--mobile: $color-white, + bg--mobile: $color-black, + divider: $color-cool-grey, + link--mobile: $color-white, - link--mobile-hover: $color-white, - border--mobile-hover: $color-white, + link--mobile-hover: $color-white, + border--mobile-hover: $color-white, - link--mobile-active: $color-white, - border--mobile-active: $color-vivid-red, + link--mobile-active: $color-white, + border--mobile-active: $color-vivid-red, - link--mobile-expanded: $color-white, - border--mobile-expanded: transparent, - border--mobile-active-expanded: $color-white, + link--mobile-expanded: $color-white, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-white, - light: ( - link: $color-black, + light: ( + link: $color-black, - link--hover: $color-dark-red, - border--hover: $color-dark-red, + link--hover: $color-dark-red, + border--hover: $color-dark-red, - link--active: $color-black, - border--active: $color-black, + link--active: $color-black, + border--active: $color-black, - // In this variant current and active state have different border colors - border--current: $color-driftwood, + // In this variant current and active state have different border colors + border--current: $color-driftwood, - link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + link--active-hover: $color-dark-red, + border--active-hover: $color-dark-red, - link--expanded: $color-black, - border--expanded: $color-driftwood, + link--expanded: $color-black, + border--expanded: $color-driftwood, - bg--mobile: $color-white, - divider: #d9d9d9, - link--mobile: $color-black, + bg--mobile: $color-white, + divider: #d9d9d9, + link--mobile: $color-black, - link--mobile-hover: $color-black, - border--mobile-hover: $color-black, + link--mobile-hover: $color-black, + border--mobile-hover: $color-black, - link--mobile-active: $color-dark-red, - border--mobile-active: $color-dark-red, + link--mobile-active: $color-dark-red, + border--mobile-active: $color-dark-red, - link--mobile-expanded: $color-black, - border--mobile-expanded: transparent, - border--mobile-active-expanded: $color-black, - ), + link--mobile-expanded: $color-black, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-black, + ), - dark: ( - link: $color-white, + dark: ( + link: $color-white, - link--hover: $color-white, - border--hover: $color-white, + link--hover: $color-white, + border--hover: $color-white, - link--active: $color-white, - border--active: $color-vivid-red, + link--active: $color-white, + border--active: $color-vivid-red, - link--active-hover: $color-white, - border--active-hover: $color-white, + link--active-hover: $color-white, + border--active-hover: $color-white, - link--expanded: $color-white, - link--expanded-hover: $color-white, - border--expanded: $color-white, - border--expanded-hover: $color-vivid-red, - border--expanded-active: $color-white, - ) + link--expanded: $color-white, + link--expanded-hover: $color-white, + border--expanded: $color-white, + border--expanded-hover: $color-vivid-red, + border--expanded-active: $color-white, + ) ) !default; diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss index 854ff4e3c..852c13452 100644 --- a/core/src/scss/utilities/variables/core/_core-color-maps.scss +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -26,21 +26,21 @@ // Style guide: Variables.Core.colors-map // $core-colors: ( - brand: $color-cardinal-red, - brand--bright: $color-bright-red, - brand--dark: $color-dark-red, + brand: $color-cardinal-red, + brand--bright: $color-bright-red, + brand--dark: $color-dark-red, - bg: $color-white, - bg--reverse: $color-black, + bg: $color-white, + bg--reverse: $color-black, - text: $color-black, - text--high-contrast: #000, - text--reverse: $color-white, + text: $color-black, + text--high-contrast: #000, + text--reverse: $color-white, - link: $color-bright-red, - link--hover: $color-black, - link--alt: $color-bright-blue, - link--alt-hover: $color-black, - link--reverse: $color-white, - link--reverse-hover: $color-vivid-red, + link: $color-bright-red, + link--hover: $color-black, + link--alt: $color-bright-blue, + link--alt-hover: $color-black, + link--reverse: $color-white, + link--reverse-hover: $color-vivid-red, ) !default; From 4037b522aa7c17f8417ed86f4672141e70b94781 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 5 Jun 2019 14:14:56 -0700 Subject: [PATCH 25/42] fixup --- core/dist/css/decanter.css | 2 ++ core/src/scss/components/main-nav/_main-nav--dark.scss | 4 ++++ 2 files changed, 6 insertions(+) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 6f89caf84..4d7ad4af5 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8539,6 +8539,8 @@ a { background-color: #ec0513; } .su-main-nav--dark > ul > li > a[aria-expanded="true"] { color: #ffffff; } + .su-main-nav--dark > ul > li > a[aria-expanded="true"]::before { + background-color: #ffffff; } .su-main-nav--dark > ul > li > a[aria-expanded="true"]:hover { color: #ffffff; } .su-main-nav--dark > ul > .su-main-nav__item--parent > a::after, .su-main-nav--dark > ul > .su-main-nav__item--parent.su-main-nav__item--expanded > a::after { diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index c7d5b3251..33f3d1af0 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -70,6 +70,10 @@ &[aria-expanded="true"] { color: color(link--expanded, $main-nav-colors, dark); + &::before { + background-color: color(border--expanded, $main-nav-colors, dark); + } + &:hover { color: color(link--hover, $main-nav-colors, dark); } From 23dd0669c088d4d18001982c16164e2676dd82a3 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 09:59:04 -0700 Subject: [PATCH 26/42] Change all reference to $color-dark-red in $main-nav-colors to $color-bright-red --- core/dist/css/decanter.css | 46 +++++++++---------- .../variables/components/_main-nav.scss | 40 ++++++++-------- 2 files changed, 43 insertions(+), 43 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 4d7ad4af5..a907f0fbf 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -8310,7 +8310,7 @@ a { transition: transform 0.3s ease-out, background-color 0.3s ease-out; transition: transform 0.3s ease-out, background-color 0.3s ease-out, -webkit-transform 0.3s ease-out; } .su-main-nav > ul > li > a:hover::before, .su-main-nav > ul > li > a:focus::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav > ul > li > a:active::before { background-color: #2e2d29; } .su-main-nav > ul > li > a::before { @@ -8327,11 +8327,11 @@ a { .su-main-nav > ul > li > a:active { font-weight: 600; } .su-main-nav > ul > li > a:hover, .su-main-nav > ul > li > a:focus { - color: #820000; } + color: #b1040e; } .su-main-nav > ul > li > a:active, .su-main-nav > ul > li > a[aria-expanded="true"] { color: #2e2d29; } .su-main-nav > ul > li > a[aria-expanded="true"]:hover { - color: #820000; } + color: #b1040e; } .su-main-nav > ul > li > a[aria-expanded="true"]:active { color: #2e2d29; } .su-main-nav > ul > li > a[aria-expanded="true"]::before { @@ -8347,7 +8347,7 @@ a { background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav > ul > .su-main-nav__item--current > a:focus::before { left: 0; - background-color: #820000; + background-color: #b1040e; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } .su-main-nav > ul > .su-main-nav__item--current > a:active::before { @@ -8357,7 +8357,7 @@ a { .su-main-nav > ul > .su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } .su-main-nav > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav > ul > .su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { background-color: #2e2d29; } } @media (max-width: 991px) { @@ -8416,7 +8416,7 @@ a { transition: transform 0.3s ease-out, background-color 0.3s ease-out; transition: transform 0.3s ease-out, background-color 0.3s ease-out, -webkit-transform 0.3s ease-out; } .su-main-nav__toggle:hover::before, .su-main-nav__toggle:focus::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav__toggle:active::before { background-color: #2e2d29; } .su-main-nav__toggle::before { @@ -8447,7 +8447,7 @@ a { background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5jbG9zZS1ibGFjazwvdGl0bGU+PHBhdGggZD0iTTEwLjU2LDEyLC4zMiwyMi4yMWExLDEsMCwwLDAsMS40MSwxLjQxTDEyLDEzLjM5LDIyLjIxLDIzLjYyYTEsMSwwLDAsMCwxLjQxLTEuNDFMMTMuMzksMTIsMjMuNjIsMS43NGExLDEsMCwwLDAsMC0xLjQyLDEsMSwwLDAsMC0xLjQxLDBMMTIsMTAuNTYsMS43NC4zMkExLDEsMCwwLDAsLjMyLDEuNzRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC4wMyAtMC4wMykiLz48L3N2Zz4=) no-repeat 3px 0; background-size: 16px 16px; } .su-main-nav__toggle[aria-expanded="true"]:hover::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav__toggle[aria-expanded="true"]:active::before { background-color: #2e2d29; } .su-main-nav__toggle:hover, .su-main-nav__toggle:active, .su-main-nav__toggle:focus { @@ -8569,7 +8569,7 @@ a { .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]::before { background-color: #b6b1a9; } .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:hover::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:active::before { background-color: #2e2d29; } } @@ -8582,16 +8582,16 @@ a { .su-main-nav--light li a:hover::before, .su-main-nav--light li a:focus::before { background-color: #2e2d29; } .su-main-nav--light li a:active { - color: #820000; } + color: #b1040e; } .su-main-nav--light li a:active::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light .su-main-nav__item--current > a { - color: #820000; } + color: #b1040e; } .su-main-nav--light .su-main-nav__item--current > a::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light .su-main-nav__item--current > a:hover::before, .su-main-nav--light .su-main-nav__item--current > a:focus::before { - background-color: #820000; } + background-color: #b1040e; } @media (max-width: 991px) { .su-main-nav--light .su-main-nav__item--parent > a::after { @@ -8605,21 +8605,21 @@ a { .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { background-color: #2e2d29; } .su-main-nav--light .su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a { color: #2e2d29; } .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a::before, .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #2e2d29; } .su-main-nav--light .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { - color: #820000; } } + color: #b1040e; } } @media only screen and (min-width: 992px) { .su-main-nav--light > ul { background-color: transparent; } .su-main-nav--light > ul > li > a:hover, .su-main-nav--light > ul > li > a:focus { - color: #820000; } + color: #b1040e; } .su-main-nav--light > ul > li > a:hover::before, .su-main-nav--light > ul > li > a:focus::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light > ul > li > a:active { color: #2e2d29; } .su-main-nav--light > ul > li > a:active::before { @@ -8629,9 +8629,9 @@ a { .su-main-nav--light > ul > li > a[aria-expanded="true"]::before { background-color: #b6b1a9; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover { - color: #820000; } + color: #b1040e; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:focus::before { background-color: #b6b1a9; } .su-main-nav--light > ul > li > a[aria-expanded="true"]:active { @@ -8641,9 +8641,9 @@ a { .su-main-nav--light > ul > .su-main-nav__item--current > a::before { background-color: #b6b1a9; } .su-main-nav--light > ul > .su-main-nav__item--current > a:hover, .su-main-nav--light > ul > .su-main-nav__item--current > a:focus { - color: #820000; } + color: #b1040e; } .su-main-nav--light > ul > .su-main-nav__item--current > a:hover::before, .su-main-nav--light > ul > .su-main-nav__item--current > a:focus::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light > ul > .su-main-nav__item--current > a:active { color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current > a:active::before { @@ -8653,9 +8653,9 @@ a { .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before { background-color: #b6b1a9; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover { - color: #820000; } + color: #b1040e; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before { - background-color: #820000; } + background-color: #b1040e; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active { color: #2e2d29; } .su-main-nav--light > ul > .su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before { diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index ed76b7648..74cc200d6 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -9,12 +9,12 @@ // Markup: $main-nav-colors: ( // // Default Main Nav colors // link: $color-black, -// link--hover: $color-dark-red, -// border--hover: $color-dark-red, +// link--hover: $color-bright-red, +// border--hover: $color-bright-red, // link--active: $color-black, // border--active: $color-black, -// link--active-hover: $color-dark-red, -// border--active-hover: $color-dark-red, +// link--active-hover: $color-bright-red, +// border--active-hover: $color-bright-red, // link--expanded: $color-black, // border--expanded: $color-black, // bg--mobile: $color-black, @@ -29,14 +29,14 @@ // border--mobile-active-expanded: $color-white, // light: ( // link: $color-black, -// link--hover: $color-dark-red, -// border--hover: $color-dark-red, +// link--hover: $color-bright-red, +// border--hover: $color-bright-red, // link--active: $color-black, // border--active: $color-black, // // In this variant current and active state have different border colors // border--current: $color-driftwood, -// link--active-hover: $color-dark-red, -// border--active-hover: $color-dark-red, +// link--active-hover: $color-bright-red, +// border--active-hover: $color-bright-red, // link--expanded: $color-black, // border--expanded: $color-driftwood, // bg--mobile: $color-white, @@ -44,8 +44,8 @@ // link--mobile: $color-black, // link--mobile-hover: $color-black, // border--mobile-hover: $color-black, -// link--mobile-active: $color-dark-red, -// border--mobile-active: $color-dark-red, +// link--mobile-active: $color-bright-red, +// border--mobile-active: $color-bright-red, // link--mobile-expanded: $color-black, // border--mobile-expanded: transparent, // border--mobile-active-expanded: $color-black, @@ -72,14 +72,14 @@ $main-nav-colors: ( // Default Main Nav colors link: $color-black, - link--hover: $color-dark-red, - border--hover: $color-dark-red, + link--hover: $color-bright-red, + border--hover: $color-bright-red, link--active: $color-black, border--active: $color-black, - link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + link--active-hover: $color-bright-red, + border--active-hover: $color-bright-red, link--expanded: $color-black, border--expanded: $color-black, @@ -101,8 +101,8 @@ $main-nav-colors: ( light: ( link: $color-black, - link--hover: $color-dark-red, - border--hover: $color-dark-red, + link--hover: $color-bright-red, + border--hover: $color-bright-red, link--active: $color-black, border--active: $color-black, @@ -110,8 +110,8 @@ $main-nav-colors: ( // In this variant current and active state have different border colors border--current: $color-driftwood, - link--active-hover: $color-dark-red, - border--active-hover: $color-dark-red, + link--active-hover: $color-bright-red, + border--active-hover: $color-bright-red, link--expanded: $color-black, border--expanded: $color-driftwood, @@ -123,8 +123,8 @@ $main-nav-colors: ( link--mobile-hover: $color-black, border--mobile-hover: $color-black, - link--mobile-active: $color-dark-red, - border--mobile-active: $color-dark-red, + link--mobile-active: $color-bright-red, + border--mobile-active: $color-bright-red, link--mobile-expanded: $color-black, border--mobile-expanded: transparent, From 1d164c22e8528d987f775c80626ecffc143052d2 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Mon, 10 Jun 2019 12:27:17 -0700 Subject: [PATCH 27/42] change style of inline (default) link style --- core/dist/css/decanter.css | 5 +++-- core/src/scss/utilities/functions/_color.scss | 2 +- .../src/scss/utilities/mixins/button/_button-secondary.scss | 4 ++-- core/src/scss/utilities/mixins/link/_link.scss | 3 ++- .../src/scss/utilities/variables/core/_core-color-maps.scss | 6 +++--- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index a907f0fbf..ba1294b3e 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -7228,8 +7228,9 @@ button, .su-link, a { - color: #b1040e; - text-decoration: underline; } + color: #006cb8; + text-decoration: underline; + font-weight: 600; } .su-link:hover, .su-link:active, a:hover, a:active { diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index 0d3cc5d3f..6cf9baf13 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -7,7 +7,7 @@ // If a color and a color map are specified, then it returns a color from the default theme of the color map. // If all 3 are specified, it returns a color from the specified theme of the color map. // -// $color - String - Color variable name from a color map, e.g., brand, link--hover +// $color - String - Color variable name from a color map, e.g., brand, link-inline--hover // $colormap - Color palette in the form of a SASS map, e.g., $main-nav-colors, $alert-colors. Default is $core-colors. // $theme - String - Name of the theme within a color map, e.g., dark, light. Default is default. // diff --git a/core/src/scss/utilities/mixins/button/_button-secondary.scss b/core/src/scss/utilities/mixins/button/_button-secondary.scss index 3a1d967f0..c2884ae4d 100644 --- a/core/src/scss/utilities/mixins/button/_button-secondary.scss +++ b/core/src/scss/utilities/mixins/button/_button-secondary.scss @@ -18,12 +18,12 @@ &:hover { background-color: color(bg); box-shadow: $button-stroke $color-black; - color: color(link--hover); + color: color(link-inline--hover); } &:focus { background-color: color(bg); box-shadow: $button-stroke $color-black, $focus-shadow; - color: color(link--hover); + color: color(link-inline--hover); } } diff --git a/core/src/scss/utilities/mixins/link/_link.scss b/core/src/scss/utilities/mixins/link/_link.scss index 234cc1882..ec7f93f50 100644 --- a/core/src/scss/utilities/mixins/link/_link.scss +++ b/core/src/scss/utilities/mixins/link/_link.scss @@ -10,9 +10,10 @@ // // Style guide: Mixins.Link.link // -@mixin link($color: color(link), $hover: color(link--hover)) { +@mixin link($color: color(link-inline), $hover: color(link-inline--hover)) { color: $color; text-decoration: underline; + font-weight: $font-semi-bold; &:hover, &:active { diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss index 852c13452..67e1a89d1 100644 --- a/core/src/scss/utilities/variables/core/_core-color-maps.scss +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -16,7 +16,7 @@ // text--high-contrast: #000, // text--reverse: $color-white, // link: $color-bright-red, -// link--hover: $color-black, +// link-inline--hover: $color-black, // link--alt: $color-bright-blue, // link--alt-hover: $color-black, // link--reverse: $color-white, @@ -37,8 +37,8 @@ $core-colors: ( text--high-contrast: #000, text--reverse: $color-white, - link: $color-bright-red, - link--hover: $color-black, + link-inline: $color-bright-blue, + link-inline--hover: $color-black, link--alt: $color-bright-blue, link--alt-hover: $color-black, link--reverse: $color-white, From 2d0eaf32c10e8ec85ea2171b7a865874fc8b5108 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Mon, 10 Jun 2019 12:40:34 -0700 Subject: [PATCH 28/42] update doc and sample text --- core/src/scss/components/link/_link.scss | 3 ++- core/src/templates/components/link/link.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/core/src/scss/components/link/_link.scss b/core/src/scss/components/link/_link.scss index 7a024d59a..f23e584d4 100644 --- a/core/src/scss/components/link/_link.scss +++ b/core/src/scss/components/link/_link.scss @@ -3,7 +3,8 @@ // // Link // -// A simple building block element with many variants. +// Link styling, with many variants. **Default styling** refers to inline links, i.e. links +// embedded within body text. // // .su-link--more - More info link // .su-link--external - Link to external site diff --git a/core/src/templates/components/link/link.json b/core/src/templates/components/link/link.json index f3da6edf0..83a8f141f 100644 --- a/core/src/templates/components/link/link.json +++ b/core/src/templates/components/link/link.json @@ -1,4 +1,4 @@ { - "link_content": "Example Link Text", + "link_content": "Link text", "link_href": "https://decanter.stanford.edu/" } From 62fe57d398e9713d199f486f0fc7d31039694640 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 14:20:19 -0700 Subject: [PATCH 29/42] Remove nesting of main nav color maps and $theme in function @color --- .../components/main-nav/_main-nav--dark.scss | 44 +++++----- .../components/main-nav/_main-nav--light.scss | 82 +++++++++---------- core/src/scss/utilities/functions/_color.scss | 35 ++------ .../variables/components/_main-nav.scss | 75 +++++++++-------- 4 files changed, 108 insertions(+), 128 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 33f3d1af0..9a3dc2ab0 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -3,18 +3,18 @@ .su-main-nav--dark { @include grid-media-max('md') { .su-main-nav__toggle { - color: color(link, $main-nav-colors, dark); + color: color(link, $main-nav-dark-colors); &:hover, &:focus { &::before { - background-color: color(border--hover, $main-nav-colors, dark); + background-color: color(border--hover, $main-nav-dark-colors); } } &:active { &::before { - background-color: color(border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-dark-colors); } } @@ -24,15 +24,15 @@ &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-dark-colors); } &:hover::before { - background-color: color(border--expanded-hover, $main-nav-colors, dark); + background-color: color(border--expanded-hover, $main-nav-dark-colors); } &:active::before { - background-color: color(border--expanded-active, $main-nav-colors, dark); + background-color: color(border--expanded-active, $main-nav-dark-colors); } &::after { @@ -48,34 +48,34 @@ > ul { > li { > a { - color: color(link, $main-nav-colors, dark); + color: color(link, $main-nav-dark-colors); &:hover, &:focus { - color: color(link--hover, $main-nav-colors, dark); + color: color(link--hover, $main-nav-dark-colors); &::before { - background-color: color(border--hover, $main-nav-colors, dark); + background-color: color(border--hover, $main-nav-dark-colors); } } &:active { - color: color(link--active, $main-nav-colors, dark); + color: color(link--active, $main-nav-dark-colors); &::before { - background-color: color(border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-dark-colors); } } &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-colors, dark); + color: color(link--expanded, $main-nav-dark-colors); &::before { - background-color: color(border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-dark-colors); } &:hover { - color: color(link--hover, $main-nav-colors, dark); + color: color(link--hover, $main-nav-dark-colors); } } } @@ -93,23 +93,23 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $main-nav-colors, dark); + color: color(link--active, $main-nav-dark-colors); &::before { - background-color: color(border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-dark-colors); } &:hover, &:focus { - color: color(link--active-hover, $main-nav-colors, dark); + color: color(link--active-hover, $main-nav-dark-colors); &::before { - background-color: color(border--active-hover, $main-nav-colors, dark); + background-color: color(border--active-hover, $main-nav-dark-colors); } } &:active::before { - background-color: color(border--active, $main-nav-colors, dark); + background-color: color(border--active, $main-nav-dark-colors); } } } @@ -120,18 +120,18 @@ > a, > a:focus { &::before { - background-color: color(border--expanded, $main-nav-colors, dark); + background-color: color(border--expanded, $main-nav-dark-colors); } } } > a[aria-expanded="true"] { &:hover::before { - background-color: color(border--expanded-hover, $main-nav-colors, dark); + background-color: color(border--expanded-hover, $main-nav-dark-colors); } &:active::before { - background-color: color(border--expanded-active, $main-nav-colors, dark); + background-color: color(border--expanded-active, $main-nav-dark-colors); } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index f40c82d81..f2c69c243 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -5,15 +5,15 @@ .su-main-nav__toggle { &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $main-nav-colors, light); + background-color: color(border--expanded, $main-nav-light-colors); } &:hover::before { - background-color: color(border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-light-colors); } &:active::before { - background-color: color(border--active, $main-nav-colors, light); + background-color: color(border--active, $main-nav-light-colors); } } } @@ -21,26 +21,26 @@ // General menu styles - mobile, also desktop drop down part ul { - background-color: color(bg--mobile, $main-nav-colors, light); + background-color: color(bg--mobile, $main-nav-light-colors); } li { a { - color: color(link--mobile, $main-nav-colors, light); - border-bottom-color: color(divider, $main-nav-colors, light); + color: color(link--mobile, $main-nav-light-colors); + border-bottom-color: color(divider, $main-nav-light-colors); &:hover, &:focus { &::before { - background-color: color(border--mobile-hover, $main-nav-colors, light); + background-color: color(border--mobile-hover, $main-nav-light-colors); } } &:active { - color: color(link--mobile-active, $main-nav-colors, light); + color: color(link--mobile-active, $main-nav-light-colors); &::before { - background-color: color(border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-light-colors); } } } @@ -48,16 +48,16 @@ .su-main-nav__item--current { > a { - color: color(link--mobile-active, $main-nav-colors, light); + color: color(link--mobile-active, $main-nav-light-colors); &::before { - background-color: color(border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-light-colors); } &:hover, &:focus { &::before { - background-color: color(border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-light-colors); } } } @@ -77,16 +77,16 @@ } &:focus::before { - background-color: color(border--mobile-expanded, $main-nav-colors, light); + background-color: color(border--mobile-expanded, $main-nav-light-colors); } &[aria-expanded="true"] { &:hover::before { - background-color: color(border--mobile-hover, $main-nav-colors, light); + background-color: color(border--mobile-hover, $main-nav-light-colors); } &:active::before { - background-color: color(border--mobile-active, $main-nav-colors, light); + background-color: color(border--mobile-active, $main-nav-light-colors); } } } @@ -95,15 +95,15 @@ .su-main-nav__item--current { &.su-main-nav__item--expanded { > a { - color: color(link--mobile-expanded, $main-nav-colors, light); + color: color(link--mobile-expanded, $main-nav-light-colors); &::before, &:focus::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors, light); + background-color: color(border--mobile-active-expanded, $main-nav-light-colors); } &[aria-expanded="true"]:active { - color: color(link--mobile-active, $main-nav-colors, light); + color: color(link--mobile-active, $main-nav-light-colors); } } } @@ -119,44 +119,44 @@ > a { &:hover, &:focus { - color: color(link--hover, $main-nav-colors, light); + color: color(link--hover, $main-nav-light-colors); &::before { - background-color: color(border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-light-colors); } } &:active { - color: color(link--active, $main-nav-colors, light); + color: color(link--active, $main-nav-light-colors); &::before { - background-color: color(border--active, $main-nav-colors, light); + background-color: color(border--active, $main-nav-light-colors); } } &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-colors, light); + color: color(link--expanded, $main-nav-light-colors); &::before { - background-color: color(border--expanded, $main-nav-colors, light); + background-color: color(border--expanded, $main-nav-light-colors); } &:hover { - color: color(link--hover, $main-nav-colors, light); + color: color(link--hover, $main-nav-light-colors); &::before { - background-color: color(border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-light-colors); } } &:focus { &::before { - background-color: color(border--expanded, $main-nav-colors, light); + background-color: color(border--expanded, $main-nav-light-colors); } } &:active { - color: color(link--active, $main-nav-colors, light); + color: color(link--active, $main-nav-light-colors); } } } @@ -164,53 +164,53 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $main-nav-colors, light); + color: color(link--active, $main-nav-light-colors); &::before { - background-color: color(border--current, $main-nav-colors, light); + background-color: color(border--current, $main-nav-light-colors); } &:hover, &:focus { - color: color(link--hover, $main-nav-colors, light); + color: color(link--hover, $main-nav-light-colors); &::before { - background-color: color(border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-light-colors); } } &:active { - color: color(link--active, $main-nav-colors, light); + color: color(link--active, $main-nav-light-colors); &::before { - background-color: color(border--active, $main-nav-colors, light); + background-color: color(border--active, $main-nav-light-colors); } } } &.su-main-nav__item--expanded { > a:focus { - color: color(link--expanded, $main-nav-colors, light); + color: color(link--expanded, $main-nav-light-colors); &::before { - background-color: color(border--expanded, $main-nav-colors, light); + background-color: color(border--expanded, $main-nav-light-colors); } } > a[aria-expanded="true"] { &:hover { - color: color(link--hover, $main-nav-colors, light); + color: color(link--hover, $main-nav-light-colors); &::before { - background-color: color(border--hover, $main-nav-colors, light); + background-color: color(border--hover, $main-nav-light-colors); } } &:active { - color: color(link--active, $main-nav-colors, light); + color: color(link--active, $main-nav-light-colors); &::before { - background-color: color(border--active, $main-nav-colors, light); + background-color: color(border--active, $main-nav-light-colors); } } } @@ -223,7 +223,7 @@ .su-main-nav__toggle[aria-expanded="true"] { @include grid-media-max('md') { + .su-main-nav__menu-lv1 + .su-site-search { - background-color: color(bg--mobile, $main-nav-colors, light); + background-color: color(bg--mobile, $main-nav-light-colors); } } } diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index 0d3cc5d3f..e05f24a46 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -1,20 +1,19 @@ @charset "UTF-8"; // -// color($color, $colormap: $core-colors, $theme: default) +// color($color, $colormap: $core-colors) // // Return a color from a color map. If only a color is specified, then it returns a color from $core-colors. -// If a color and a color map are specified, then it returns a color from the default theme of the color map. -// If all 3 are specified, it returns a color from the specified theme of the color map. +// If a color and a color map are specified, then it returns a color from the particular color map. // // $color - String - Color variable name from a color map, e.g., brand, link--hover -// $colormap - Color palette in the form of a SASS map, e.g., $main-nav-colors, $alert-colors. Default is $core-colors. -// $theme - String - Name of the theme within a color map, e.g., dark, light. Default is default. +// $colormap - Color palette in the form of a SASS map, e.g., $alert-colors, $main-nav-dark-colors. +// Default is $core-colors. // // Style guide: Functions.Color // -@function color($color, $colormap: $core-colors, $theme: default) { +@function color($color, $colormap: $core-colors) { @if $colormap == $core-colors { @if map-has-key($core-colors, $color) { $color: map-get($core-colors, $color); @@ -24,30 +23,12 @@ } } @else { - @if $theme == default { - @if map-has-key($colormap, $color) { - $color: map-get($colormap, $color); - } - @else { - @warn "Check that `#{$color}` is in color map." - } + @if map-has-key($colormap, $color) { + $color: map-get($colormap, $color); } @else { - @if map-has-key($colormap, $theme) { - $theme: map-get($colormap, $theme); - - @if map-has-key($theme, $color) { - $color: map-get($theme, $color); - } - @else { - @warn "Check that `#{$color}` is in the theme." - } - } - @else { - @warn "Check that theme exists in the color map." - } + @warn "Check that `#{$color}` is in color map." } } - @return $color; } diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 74cc200d6..31d5396db 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -69,7 +69,6 @@ // Styleguide: Variables.Components.main-nav-colors // $main-nav-colors: ( - // Default Main Nav colors link: $color-black, link--hover: $color-bright-red, @@ -97,56 +96,56 @@ $main-nav-colors: ( link--mobile-expanded: $color-white, border--mobile-expanded: transparent, border--mobile-active-expanded: $color-white, +) !default; - light: ( - link: $color-black, +$main-nav-light-colors: ( + link: $color-black, - link--hover: $color-bright-red, - border--hover: $color-bright-red, + link--hover: $color-bright-red, + border--hover: $color-bright-red, - link--active: $color-black, - border--active: $color-black, + link--active: $color-black, + border--active: $color-black, - // In this variant current and active state have different border colors - border--current: $color-driftwood, +// In this variant current and active state have different border colors + border--current: $color-driftwood, - link--active-hover: $color-bright-red, - border--active-hover: $color-bright-red, + link--active-hover: $color-bright-red, + border--active-hover: $color-bright-red, - link--expanded: $color-black, - border--expanded: $color-driftwood, + link--expanded: $color-black, + border--expanded: $color-driftwood, - bg--mobile: $color-white, - divider: #d9d9d9, - link--mobile: $color-black, + bg--mobile: $color-white, + divider: #d9d9d9, + link--mobile: $color-black, - link--mobile-hover: $color-black, - border--mobile-hover: $color-black, + link--mobile-hover: $color-black, + border--mobile-hover: $color-black, - link--mobile-active: $color-bright-red, - border--mobile-active: $color-bright-red, + link--mobile-active: $color-bright-red, + border--mobile-active: $color-bright-red, - link--mobile-expanded: $color-black, - border--mobile-expanded: transparent, - border--mobile-active-expanded: $color-black, - ), + link--mobile-expanded: $color-black, + border--mobile-expanded: transparent, + border--mobile-active-expanded: $color-black, +) !default; - dark: ( - link: $color-white, +$main-nav-dark-colors: ( + link: $color-white, - link--hover: $color-white, - border--hover: $color-white, + link--hover: $color-white, + border--hover: $color-white, - link--active: $color-white, - border--active: $color-vivid-red, + link--active: $color-white, + border--active: $color-vivid-red, - link--active-hover: $color-white, - border--active-hover: $color-white, + link--active-hover: $color-white, + border--active-hover: $color-white, - link--expanded: $color-white, - link--expanded-hover: $color-white, - border--expanded: $color-white, - border--expanded-hover: $color-vivid-red, - border--expanded-active: $color-white, - ) + link--expanded: $color-white, + link--expanded-hover: $color-white, + border--expanded: $color-white, + border--expanded-hover: $color-vivid-red, + border--expanded-active: $color-white, ) !default; From 578371ad0fcbbeedbd860fd18dc60847784f5626 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 14:34:45 -0700 Subject: [PATCH 30/42] Add a local variable $_color-map for variants that gets defined at the top of each variant's scss file --- .../components/main-nav/_main-nav--dark.scss | 46 +++++----- .../components/main-nav/_main-nav--light.scss | 84 ++++++++++--------- 2 files changed, 67 insertions(+), 63 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 9a3dc2ab0..1c11f2f1e 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -1,20 +1,22 @@ @charset "UTF-8"; .su-main-nav--dark { + $_color-map: $main-nav-dark-colors; + @include grid-media-max('md') { .su-main-nav__toggle { - color: color(link, $main-nav-dark-colors); + color: color(link, $_color-map); &:hover, &:focus { &::before { - background-color: color(border--hover, $main-nav-dark-colors); + background-color: color(border--hover, $_color-map); } } &:active { &::before { - background-color: color(border--active, $main-nav-dark-colors); + background-color: color(border--active, $_color-map); } } @@ -24,15 +26,15 @@ &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $main-nav-dark-colors); + background-color: color(border--expanded, $_color-map); } &:hover::before { - background-color: color(border--expanded-hover, $main-nav-dark-colors); + background-color: color(border--expanded-hover, $_color-map); } &:active::before { - background-color: color(border--expanded-active, $main-nav-dark-colors); + background-color: color(border--expanded-active, $_color-map); } &::after { @@ -48,34 +50,34 @@ > ul { > li { > a { - color: color(link, $main-nav-dark-colors); + color: color(link, $_color-map); &:hover, &:focus { - color: color(link--hover, $main-nav-dark-colors); + color: color(link--hover, $_color-map); &::before { - background-color: color(border--hover, $main-nav-dark-colors); + background-color: color(border--hover, $_color-map); } } &:active { - color: color(link--active, $main-nav-dark-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--active, $main-nav-dark-colors); + background-color: color(border--active, $_color-map); } } &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-dark-colors); + color: color(link--expanded, $_color-map); &::before { - background-color: color(border--expanded, $main-nav-dark-colors); + background-color: color(border--expanded, $_color-map); } &:hover { - color: color(link--hover, $main-nav-dark-colors); + color: color(link--hover, $_color-map); } } } @@ -93,23 +95,23 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $main-nav-dark-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--active, $main-nav-dark-colors); + background-color: color(border--active, $_color-map); } &:hover, &:focus { - color: color(link--active-hover, $main-nav-dark-colors); + color: color(link--active-hover, $_color-map); &::before { - background-color: color(border--active-hover, $main-nav-dark-colors); + background-color: color(border--active-hover, $_color-map); } } &:active::before { - background-color: color(border--active, $main-nav-dark-colors); + background-color: color(border--active, $_color-map); } } } @@ -120,18 +122,18 @@ > a, > a:focus { &::before { - background-color: color(border--expanded, $main-nav-dark-colors); + background-color: color(border--expanded, $_color-map); } } } > a[aria-expanded="true"] { &:hover::before { - background-color: color(border--expanded-hover, $main-nav-dark-colors); + background-color: color(border--expanded-hover, $_color-map); } &:active::before { - background-color: color(border--expanded-active, $main-nav-dark-colors); + background-color: color(border--expanded-active, $_color-map); } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index f2c69c243..b808597e5 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -1,19 +1,21 @@ @charset "UTF-8"; .su-main-nav--light { + $_color-map: $main-nav-light-colors; + @include grid-media-max('md') { .su-main-nav__toggle { &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $main-nav-light-colors); + background-color: color(border--expanded, $_color-map); } &:hover::before { - background-color: color(border--hover, $main-nav-light-colors); + background-color: color(border--hover, $_color-map); } &:active::before { - background-color: color(border--active, $main-nav-light-colors); + background-color: color(border--active, $_color-map); } } } @@ -21,26 +23,26 @@ // General menu styles - mobile, also desktop drop down part ul { - background-color: color(bg--mobile, $main-nav-light-colors); + background-color: color(bg--mobile, $_color-map); } li { a { - color: color(link--mobile, $main-nav-light-colors); - border-bottom-color: color(divider, $main-nav-light-colors); + color: color(link--mobile, $_color-map); + border-bottom-color: color(divider, $_color-map); &:hover, &:focus { &::before { - background-color: color(border--mobile-hover, $main-nav-light-colors); + background-color: color(border--mobile-hover, $_color-map); } } &:active { - color: color(link--mobile-active, $main-nav-light-colors); + color: color(link--mobile-active, $_color-map); &::before { - background-color: color(border--mobile-active, $main-nav-light-colors); + background-color: color(border--mobile-active, $_color-map); } } } @@ -48,16 +50,16 @@ .su-main-nav__item--current { > a { - color: color(link--mobile-active, $main-nav-light-colors); + color: color(link--mobile-active, $_color-map); &::before { - background-color: color(border--mobile-active, $main-nav-light-colors); + background-color: color(border--mobile-active, $_color-map); } &:hover, &:focus { &::before { - background-color: color(border--mobile-active, $main-nav-light-colors); + background-color: color(border--mobile-active, $_color-map); } } } @@ -77,16 +79,16 @@ } &:focus::before { - background-color: color(border--mobile-expanded, $main-nav-light-colors); + background-color: color(border--mobile-expanded, $_color-map); } &[aria-expanded="true"] { &:hover::before { - background-color: color(border--mobile-hover, $main-nav-light-colors); + background-color: color(border--mobile-hover, $_color-map); } &:active::before { - background-color: color(border--mobile-active, $main-nav-light-colors); + background-color: color(border--mobile-active, $_color-map); } } } @@ -95,15 +97,15 @@ .su-main-nav__item--current { &.su-main-nav__item--expanded { > a { - color: color(link--mobile-expanded, $main-nav-light-colors); + color: color(link--mobile-expanded, $_color-map); &::before, &:focus::before { - background-color: color(border--mobile-active-expanded, $main-nav-light-colors); + background-color: color(border--mobile-active-expanded, $_color-map); } &[aria-expanded="true"]:active { - color: color(link--mobile-active, $main-nav-light-colors); + color: color(link--mobile-active, $_color-map); } } } @@ -119,44 +121,44 @@ > a { &:hover, &:focus { - color: color(link--hover, $main-nav-light-colors); + color: color(link--hover, $_color-map); &::before { - background-color: color(border--hover, $main-nav-light-colors); + background-color: color(border--hover, $_color-map); } } &:active { - color: color(link--active, $main-nav-light-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--active, $main-nav-light-colors); + background-color: color(border--active, $_color-map); } } &[aria-expanded="true"] { - color: color(link--expanded, $main-nav-light-colors); + color: color(link--expanded, $_color-map); &::before { - background-color: color(border--expanded, $main-nav-light-colors); + background-color: color(border--expanded, $_color-map); } &:hover { - color: color(link--hover, $main-nav-light-colors); + color: color(link--hover, $_color-map); &::before { - background-color: color(border--hover, $main-nav-light-colors); + background-color: color(border--hover, $_color-map); } } &:focus { &::before { - background-color: color(border--expanded, $main-nav-light-colors); + background-color: color(border--expanded, $_color-map); } } &:active { - color: color(link--active, $main-nav-light-colors); + color: color(link--active, $_color-map); } } } @@ -164,53 +166,53 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $main-nav-light-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--current, $main-nav-light-colors); + background-color: color(border--current, $_color-map); } &:hover, &:focus { - color: color(link--hover, $main-nav-light-colors); + color: color(link--hover, $_color-map); &::before { - background-color: color(border--hover, $main-nav-light-colors); + background-color: color(border--hover, $_color-map); } } &:active { - color: color(link--active, $main-nav-light-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--active, $main-nav-light-colors); + background-color: color(border--active, $_color-map); } } } &.su-main-nav__item--expanded { > a:focus { - color: color(link--expanded, $main-nav-light-colors); + color: color(link--expanded, $_color-map); &::before { - background-color: color(border--expanded, $main-nav-light-colors); + background-color: color(border--expanded, $_color-map); } } > a[aria-expanded="true"] { &:hover { - color: color(link--hover, $main-nav-light-colors); + color: color(link--hover, $_color-map); &::before { - background-color: color(border--hover, $main-nav-light-colors); + background-color: color(border--hover, $_color-map); } } &:active { - color: color(link--active, $main-nav-light-colors); + color: color(link--active, $_color-map); &::before { - background-color: color(border--active, $main-nav-light-colors); + background-color: color(border--active, $_color-map); } } } @@ -223,7 +225,7 @@ .su-main-nav__toggle[aria-expanded="true"] { @include grid-media-max('md') { + .su-main-nav__menu-lv1 + .su-site-search { - background-color: color(bg--mobile, $main-nav-light-colors); + background-color: color(bg--mobile, $_color-map); } } } From 008a661697e1e12aa141390eb1f55b26ccbb6daa Mon Sep 17 00:00:00 2001 From: JB Christy Date: Mon, 10 Jun 2019 14:41:06 -0700 Subject: [PATCH 31/42] don't change styling of tags in the style guide contents --- kss/builder/decanter/kss-assets/css/kss.css | 2 +- kss/builder/decanter/scss/_base-elements.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index ec2c1894c..6ec3d13ff 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -371,7 +371,7 @@ template { --color-text: hsla(104, 40%, 32%, 1); --media-query: '2xl'; } } -a, a:link, a:visited, a:hover { +.kss-nav a, .kss-nav a:link, .kss-nav a:visited, .kss-nav a:hover { text-decoration: none; } pre, code, kbd, samp { diff --git a/kss/builder/decanter/scss/_base-elements.scss b/kss/builder/decanter/scss/_base-elements.scss index 9e6cad12f..faad26f4c 100644 --- a/kss/builder/decanter/scss/_base-elements.scss +++ b/kss/builder/decanter/scss/_base-elements.scss @@ -1,7 +1,9 @@ @charset "UTF-8"; -a, a:link, a:visited, a:hover { - text-decoration: none; +.kss-nav { + a, a:link, a:visited, a:hover { + text-decoration: none; + } } pre, code, kbd, samp { From 30745a1bb6f7dcb4fc6cb0fb41457fb7c7ee84d7 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Mon, 10 Jun 2019 14:42:03 -0700 Subject: [PATCH 32/42] underlining links in alerts is now redundant --- core/dist/css/decanter.css | 2 -- core/src/scss/components/alert/_alert.scss | 4 ---- 2 files changed, 6 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index ba1294b3e..b982ee63b 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -6662,8 +6662,6 @@ dfn { .su-alert .su-alert__body .su-alert__text { margin-top: 0; margin-bottom: 0; } - .su-alert .su-alert__body a { - text-decoration: underline; } .su-alert--error { background-color: #b1040e; diff --git a/core/src/scss/components/alert/_alert.scss b/core/src/scss/components/alert/_alert.scss index 8920ad7a5..03d79f897 100644 --- a/core/src/scss/components/alert/_alert.scss +++ b/core/src/scss/components/alert/_alert.scss @@ -53,9 +53,5 @@ .su-alert__text { @include margin(0 null); } - - a { - text-decoration: underline; - } } } From 59102973c4cb9d3d3e68142c87837d67f4ba8e9e Mon Sep 17 00:00:00 2001 From: JB Christy Date: Mon, 10 Jun 2019 14:42:33 -0700 Subject: [PATCH 33/42] don't underline CTA links --- core/dist/css/decanter.css | 3 ++- core/src/scss/utilities/placeholders/components/_cta.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index b982ee63b..2f71eff8e 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -465,7 +465,8 @@ button, -ms-flex-direction: column; flex-direction: column; overflow: hidden; - line-height: 0; } + line-height: 0; + text-decoration: none; } .su-cta .su-cta__img { width: 100%; min-height: 1px; diff --git a/core/src/scss/utilities/placeholders/components/_cta.scss b/core/src/scss/utilities/placeholders/components/_cta.scss index 8dd56042a..d0907831f 100644 --- a/core/src/scss/utilities/placeholders/components/_cta.scss +++ b/core/src/scss/utilities/placeholders/components/_cta.scss @@ -11,6 +11,7 @@ flex-direction: column; overflow: hidden; line-height: 0; + text-decoration: none; .su-cta__img { width: 100%; From 211b31c29654774802430db46772c2702364935d Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 15:51:52 -0700 Subject: [PATCH 34/42] Fix styleguide comments --- .../variables/components/_main-nav.scss | 184 ++++++++++-------- 1 file changed, 105 insertions(+), 79 deletions(-) diff --git a/core/src/scss/utilities/variables/components/_main-nav.scss b/core/src/scss/utilities/variables/components/_main-nav.scss index 31d5396db..612b09af4 100644 --- a/core/src/scss/utilities/variables/components/_main-nav.scss +++ b/core/src/scss/utilities/variables/components/_main-nav.scss @@ -1,73 +1,44 @@ @charset "UTF-8"; // -// $main-nav-colors +// Main Nav Color Maps // -// Color map for the Main Nav component. Active color is also used to indicate "current" page. +// Color maps for the Main Nav component. Active color is also used to indicate "current" page. // The mobile colors apply also to desktop drop down menus. // +// Styleguide: Variables.Components.main-nav-colors +// + +// +// $main-nav-colors +// +// Color map for the default Main Nav component .su-main-nav. +// // Markup: $main-nav-colors: ( -// // Default Main Nav colors -// link: $color-black, -// link--hover: $color-bright-red, -// border--hover: $color-bright-red, -// link--active: $color-black, -// border--active: $color-black, -// link--active-hover: $color-bright-red, -// border--active-hover: $color-bright-red, -// link--expanded: $color-black, -// border--expanded: $color-black, -// bg--mobile: $color-black, -// divider: $color-cool-grey, -// link--mobile: $color-white, -// link--mobile-hover: $color-white, -// border--mobile-hover: $color-white, -// link--mobile-active: $color-white, -// border--mobile-active: $color-vivid-red, -// link--mobile-expanded: $color-white, -// border--mobile-expanded: transparent, -// border--mobile-active-expanded: $color-white, -// light: ( -// link: $color-black, -// link--hover: $color-bright-red, -// border--hover: $color-bright-red, -// link--active: $color-black, -// border--active: $color-black, -// // In this variant current and active state have different border colors -// border--current: $color-driftwood, -// link--active-hover: $color-bright-red, -// border--active-hover: $color-bright-red, -// link--expanded: $color-black, -// border--expanded: $color-driftwood, -// bg--mobile: $color-white, -// divider: #d9d9d9, -// link--mobile: $color-black, -// link--mobile-hover: $color-black, -// border--mobile-hover: $color-black, -// link--mobile-active: $color-bright-red, -// border--mobile-active: $color-bright-red, -// link--mobile-expanded: $color-black, -// border--mobile-expanded: transparent, -// border--mobile-active-expanded: $color-black, -// ), -// dark: ( -// link: $color-white, -// link--hover: $color-white, -// border--hover: $color-white, -// link--active: $color-white, -// border--active: $color-vivid-red, -// link--active-hover: $color-white, -// border--active-hover: $color-white, -// link--expanded: $color-white, -// link--expanded-hover: $color-white, -// border--expanded: $color-white, -// border--expanded-hover: $color-vivid-red, -// border--expanded-active: $color-white, -// ) +// link: $color-black, +// link--hover: $color-bright-red, +// border--hover: $color-bright-red, +// link--active: $color-black, +// border--active: $color-black, +// link--active-hover: $color-bright-red, +// border--active-hover: $color-bright-red, +// link--expanded: $color-black, +// border--expanded: $color-black, +// bg--mobile: $color-black, +// divider: $color-cool-grey, +// link--mobile: $color-white, +// link--mobile-hover: $color-white, +// border--mobile-hover: $color-white, +// link--mobile-active: $color-white, +// border--mobile-active: $color-vivid-red, +// link--mobile-expanded: $color-white, +// border--mobile-expanded: transparent, +// border--mobile-active-expanded: $color-white, //) !default; // -// Styleguide: Variables.Components.main-nav-colors +// Styleguide: Variables.Components.main-nav-colors.default // + $main-nav-colors: ( link: $color-black, @@ -98,6 +69,80 @@ $main-nav-colors: ( border--mobile-active-expanded: $color-white, ) !default; +// +// $main-nav-dark-colors +// +// Color map for the Main Nav component dark variant .su-main-nav--dark. +// +// Markup: $main-nav-dark-colors: ( +// link: $color-white, +// link--hover: $color-white, +// border--hover: $color-white, +// link--active: $color-white, +// border--active: $color-vivid-red, +// link--active-hover: $color-white, +// border--active-hover: $color-white, +// link--expanded: $color-white, +// link--expanded-hover: $color-white, +// border--expanded: $color-white, +// border--expanded-hover: $color-vivid-red, +// border--expanded-active: $color-white, +//) !default; +// +// Styleguide: Variables.Components.main-nav-colors.variant-dark +// + +$main-nav-dark-colors: ( + link: $color-white, + + link--hover: $color-white, + border--hover: $color-white, + + link--active: $color-white, + border--active: $color-vivid-red, + + link--active-hover: $color-white, + border--active-hover: $color-white, + + link--expanded: $color-white, + link--expanded-hover: $color-white, + border--expanded: $color-white, + border--expanded-hover: $color-vivid-red, + border--expanded-active: $color-white, +) !default; + +// +// $main-nav-light-colors +// +// Color map for the Main Nav component light variant .su-main-nav--light. +// +// Markup: $main-nav-light-colors: ( +// link: $color-black, +// link--hover: $color-bright-red, +// border--hover: $color-bright-red, +// link--active: $color-black, +// border--active: $color-black, +//// In this variant current and active state have different border colors +// border--current: $color-driftwood, +// link--active-hover: $color-bright-red, +// border--active-hover: $color-bright-red, +// link--expanded: $color-black, +// border--expanded: $color-driftwood, +// bg--mobile: $color-white, +// divider: #d9d9d9, +// link--mobile: $color-black, +// link--mobile-hover: $color-black, +// border--mobile-hover: $color-black, +// link--mobile-active: $color-bright-red, +// border--mobile-active: $color-bright-red, +// link--mobile-expanded: $color-black, +// border--mobile-expanded: transparent, +// border--mobile-active-expanded: $color-black, +//) !default; +// +// Styleguide: Variables.Components.main-nav-colors.variant-light +// + $main-nav-light-colors: ( link: $color-black, @@ -130,22 +175,3 @@ $main-nav-light-colors: ( border--mobile-expanded: transparent, border--mobile-active-expanded: $color-black, ) !default; - -$main-nav-dark-colors: ( - link: $color-white, - - link--hover: $color-white, - border--hover: $color-white, - - link--active: $color-white, - border--active: $color-vivid-red, - - link--active-hover: $color-white, - border--active-hover: $color-white, - - link--expanded: $color-white, - link--expanded-hover: $color-white, - border--expanded: $color-white, - border--expanded-hover: $color-vivid-red, - border--expanded-active: $color-white, -) !default; From 63187ea65cbfb3cfa4f1c5e7fc58e8b13bc8408c Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 16:07:39 -0700 Subject: [PATCH 35/42] Namespace color map variable --- .../components/main-nav/_main-nav--dark.scss | 46 +++++----- .../components/main-nav/_main-nav--light.scss | 84 +++++++++---------- .../scss/components/main-nav/_main-nav.scss | 68 ++++++++------- .../variables/core/_core-color-maps.scss | 2 +- 4 files changed, 102 insertions(+), 98 deletions(-) diff --git a/core/src/scss/components/main-nav/_main-nav--dark.scss b/core/src/scss/components/main-nav/_main-nav--dark.scss index 1c11f2f1e..136053f5a 100644 --- a/core/src/scss/components/main-nav/_main-nav--dark.scss +++ b/core/src/scss/components/main-nav/_main-nav--dark.scss @@ -1,22 +1,22 @@ @charset "UTF-8"; .su-main-nav--dark { - $_color-map: $main-nav-dark-colors; + $_su-main-nav-color-map: $main-nav-dark-colors; @include grid-media-max('md') { .su-main-nav__toggle { - color: color(link, $_color-map); + color: color(link, $_su-main-nav-color-map); &:hover, &:focus { &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:active { &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } @@ -26,15 +26,15 @@ &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } &:hover::before { - background-color: color(border--expanded-hover, $_color-map); + background-color: color(border--expanded-hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--expanded-active, $_color-map); + background-color: color(border--expanded-active, $_su-main-nav-color-map); } &::after { @@ -50,34 +50,34 @@ > ul { > li { > a { - color: color(link, $_color-map); + color: color(link, $_su-main-nav-color-map); &:hover, &:focus { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:active { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } &[aria-expanded="true"] { - color: color(link--expanded, $_color-map); + color: color(link--expanded, $_su-main-nav-color-map); &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } &:hover { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); } } } @@ -95,23 +95,23 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } &:hover, &:focus { - color: color(link--active-hover, $_color-map); + color: color(link--active-hover, $_su-main-nav-color-map); &::before { - background-color: color(border--active-hover, $_color-map); + background-color: color(border--active-hover, $_su-main-nav-color-map); } } &:active::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } } @@ -122,18 +122,18 @@ > a, > a:focus { &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } } } > a[aria-expanded="true"] { &:hover::before { - background-color: color(border--expanded-hover, $_color-map); + background-color: color(border--expanded-hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--expanded-active, $_color-map); + background-color: color(border--expanded-active, $_su-main-nav-color-map); } } } diff --git a/core/src/scss/components/main-nav/_main-nav--light.scss b/core/src/scss/components/main-nav/_main-nav--light.scss index b808597e5..c54bd31bf 100644 --- a/core/src/scss/components/main-nav/_main-nav--light.scss +++ b/core/src/scss/components/main-nav/_main-nav--light.scss @@ -1,21 +1,21 @@ @charset "UTF-8"; .su-main-nav--light { - $_color-map: $main-nav-light-colors; + $_su-main-nav-color-map: $main-nav-light-colors; @include grid-media-max('md') { .su-main-nav__toggle { &[aria-expanded="true"] { &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } &:hover::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } } @@ -23,26 +23,26 @@ // General menu styles - mobile, also desktop drop down part ul { - background-color: color(bg--mobile, $_color-map); + background-color: color(bg--mobile, $_su-main-nav-color-map); } li { a { - color: color(link--mobile, $_color-map); - border-bottom-color: color(divider, $_color-map); + color: color(link--mobile, $_su-main-nav-color-map); + border-bottom-color: color(divider, $_su-main-nav-color-map); &:hover, &:focus { &::before { - background-color: color(border--mobile-hover, $_color-map); + background-color: color(border--mobile-hover, $_su-main-nav-color-map); } } &:active { - color: color(link--mobile-active, $_color-map); + color: color(link--mobile-active, $_su-main-nav-color-map); &::before { - background-color: color(border--mobile-active, $_color-map); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -50,16 +50,16 @@ .su-main-nav__item--current { > a { - color: color(link--mobile-active, $_color-map); + color: color(link--mobile-active, $_su-main-nav-color-map); &::before { - background-color: color(border--mobile-active, $_color-map); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } &:hover, &:focus { &::before { - background-color: color(border--mobile-active, $_color-map); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -79,16 +79,16 @@ } &:focus::before { - background-color: color(border--mobile-expanded, $_color-map); + background-color: color(border--mobile-expanded, $_su-main-nav-color-map); } &[aria-expanded="true"] { &:hover::before { - background-color: color(border--mobile-hover, $_color-map); + background-color: color(border--mobile-hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--mobile-active, $_color-map); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -97,15 +97,15 @@ .su-main-nav__item--current { &.su-main-nav__item--expanded { > a { - color: color(link--mobile-expanded, $_color-map); + color: color(link--mobile-expanded, $_su-main-nav-color-map); &::before, &:focus::before { - background-color: color(border--mobile-active-expanded, $_color-map); + background-color: color(border--mobile-active-expanded, $_su-main-nav-color-map); } &[aria-expanded="true"]:active { - color: color(link--mobile-active, $_color-map); + color: color(link--mobile-active, $_su-main-nav-color-map); } } } @@ -121,44 +121,44 @@ > a { &:hover, &:focus { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:active { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } &[aria-expanded="true"] { - color: color(link--expanded, $_color-map); + color: color(link--expanded, $_su-main-nav-color-map); &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } &:hover { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:focus { &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } } &:active { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); } } } @@ -166,53 +166,53 @@ > .su-main-nav__item--current { > a { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--current, $_color-map); + background-color: color(border--current, $_su-main-nav-color-map); } &:hover, &:focus { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:active { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } } &.su-main-nav__item--expanded { > a:focus { - color: color(link--expanded, $_color-map); + color: color(link--expanded, $_su-main-nav-color-map); &::before { - background-color: color(border--expanded, $_color-map); + background-color: color(border--expanded, $_su-main-nav-color-map); } } > a[aria-expanded="true"] { &:hover { - color: color(link--hover, $_color-map); + color: color(link--hover, $_su-main-nav-color-map); &::before { - background-color: color(border--hover, $_color-map); + background-color: color(border--hover, $_su-main-nav-color-map); } } &:active { - color: color(link--active, $_color-map); + color: color(link--active, $_su-main-nav-color-map); &::before { - background-color: color(border--active, $_color-map); + background-color: color(border--active, $_su-main-nav-color-map); } } } @@ -225,7 +225,7 @@ .su-main-nav__toggle[aria-expanded="true"] { @include grid-media-max('md') { + .su-main-nav__menu-lv1 + .su-site-search { - background-color: color(bg--mobile, $_color-map); + background-color: color(bg--mobile, $_su-main-nav-color-map); } } } diff --git a/core/src/scss/components/main-nav/_main-nav.scss b/core/src/scss/components/main-nav/_main-nav.scss index cac89e7a4..cfdd7e287 100644 --- a/core/src/scss/components/main-nav/_main-nav.scss +++ b/core/src/scss/components/main-nav/_main-nav.scss @@ -42,6 +42,8 @@ // .su-main-nav { + $_su-main-nav-color-map: $main-nav-colors; + @include font-smoothing; @include sans; display: block; @@ -55,20 +57,20 @@ flex-direction: column; width: 100%; list-style: none; - background-color: color(bg--mobile, $main-nav-colors); + background-color: color(bg--mobile, $_su-main-nav-color-map); } li { @include margin(null null 0); a { - @include fancy-hover($color: color(border--mobile-hover, $main-nav-colors), $active: color(border--mobile-active, $main-nav-colors), $position: 'left'); + @include fancy-hover($color: color(border--mobile-hover, $_su-main-nav-color-map), $active: color(border--mobile-active, $_su-main-nav-color-map), $position: 'left'); @include padding(1.6rem 4.8rem 1.6rem 2.4rem); display: block; - color: color(link--mobile, $main-nav-colors); + color: color(link--mobile, $_su-main-nav-color-map); font-weight: $font-regular; font-size: 1.8rem; - border-bottom: color(divider, $main-nav-colors) solid 1px; + border-bottom: color(divider, $_su-main-nav-color-map) solid 1px; outline: 0; &:active { @@ -94,7 +96,7 @@ &::before { visibility: visible; transform: scaleY(1); - background-color: color(border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } &:hover, @@ -102,7 +104,7 @@ &::before { left: 6px; transition: left 0.1s ease-out; - background-color: color(border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -146,15 +148,15 @@ @include grid-media-max('md') { &::before { - background-color: color(border--mobile-expanded, $main-nav-colors); + background-color: color(border--mobile-expanded, $_su-main-nav-color-map); } &:hover::before { - background-color: color(border--mobile-hover, $main-nav-colors); + background-color: color(border--mobile-hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -167,13 +169,13 @@ font-weight: $font-bold; &::before { - background-color: color(border--mobile-active-expanded, $main-nav-colors); + background-color: color(border--mobile-active-expanded, $_su-main-nav-color-map); } } > a:focus::before { left: 0; - background-color: color(border--mobile-active-expanded, $main-nav-colors); + background-color: color(border--mobile-active-expanded, $_su-main-nav-color-map); } > a[aria-expanded="true"] { @@ -185,7 +187,7 @@ font-weight: $font-bold; &::before { - background-color: color(border--mobile-active, $main-nav-colors); + background-color: color(border--mobile-active, $_su-main-nav-color-map); } } } @@ -215,10 +217,10 @@ > li { > a { - @include fancy-hover($color: color(border--hover, $main-nav-colors), $active: color(border--active, $main-nav-colors)); + @include fancy-hover($color: color(border--hover, $_su-main-nav-color-map), $active: color(border--active, $_su-main-nav-color-map)); @include padding(null 0); @include margin(0 1.2em 0 0); - color: color(link, $main-nav-colors); + color: color(link, $_su-main-nav-color-map); transition: color 0.3s ease-out; font-size: 2.1rem; border-bottom: 0; @@ -229,27 +231,27 @@ &:hover, &:focus { - color: color(link--hover, $main-nav-colors); + color: color(link--hover, $_su-main-nav-color-map); } &:active, &[aria-expanded="true"] { - color: color(link--active, $main-nav-colors); + color: color(link--active, $_su-main-nav-color-map); } &[aria-expanded="true"] { &:hover { - color: color(link--active-hover, $main-nav-colors); + color: color(link--active-hover, $_su-main-nav-color-map); } &:active { - color: color(link--active, $main-nav-colors); + color: color(link--active, $_su-main-nav-color-map); } &::before { visibility: visible; transform: scaleX(1); - background-color: color(border--expanded, $main-nav-colors); + background-color: color(border--expanded, $_su-main-nav-color-map); } } } @@ -264,42 +266,42 @@ font-weight: $font-semi-bold; &::before { - background-color: color(border--active, $main-nav-colors); + background-color: color(border--active, $_su-main-nav-color-map); } &:hover, &:focus { &::before { left: 0; - background-color: color(border--active-hover, $main-nav-colors); + background-color: color(border--active-hover, $_su-main-nav-color-map); transition: background-color 0.3s ease-out; } } &:active::before { - background-color: color(border--active, $main-nav-colors); + background-color: color(border--active, $_su-main-nav-color-map); } } &.su-main-nav__item--expanded > a { &:focus::before { - background-color: color(border--active, $main-nav-colors); + background-color: color(border--active, $_su-main-nav-color-map); } } } > .su-main-nav__item--expanded { > a:focus::before { - background-color: color(border--expanded, $main-nav-colors); + background-color: color(border--expanded, $_su-main-nav-color-map); } > a[aria-expanded="true"] { &:hover::before { - background-color: color(border--hover, $main-nav-colors); + background-color: color(border--hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--expanded, $main-nav-colors); + background-color: color(border--expanded, $_su-main-nav-color-map); } } } @@ -329,8 +331,10 @@ } .su-main-nav__toggle { + $_su-main-nav-color-map: $main-nav-colors; + @include grid-media-max('md') { - @include fancy-hover($color: color(border--hover, $main-nav-colors), $active: color(border--active, $main-nav-colors)); + @include fancy-hover($color: color(border--hover, $_su-main-nav-color-map), $active: color(border--active, $_su-main-nav-color-map)); @include padding(0 0 2rem); @include margin(0); display: flex; @@ -338,7 +342,7 @@ align-items: center; width: 40px; background-color: transparent; - color: color(link, $main-nav-colors); + color: color(link, $_su-main-nav-color-map); font-size: 1.6rem; font-weight: $font-regular; line-height: 0.7; @@ -356,7 +360,7 @@ &::before { visibility: visible; transform: scaleX(1); - background-color: color(border--expanded, $main-nav-colors); + background-color: color(border--expanded, $_su-main-nav-color-map); } &::after { @@ -366,11 +370,11 @@ } &:hover::before { - background-color: color(border--hover, $main-nav-colors); + background-color: color(border--hover, $_su-main-nav-color-map); } &:active::before { - background-color: color(border--active, $main-nav-colors); + background-color: color(border--active, $_su-main-nav-color-map); } } @@ -378,7 +382,7 @@ &:active, &:focus { background-color: transparent; - color: color(link, $main-nav-colors); + color: color(link, $_su-main-nav-color-map); box-shadow: none; } diff --git a/core/src/scss/utilities/variables/core/_core-color-maps.scss b/core/src/scss/utilities/variables/core/_core-color-maps.scss index 852c13452..2ed4cbdef 100644 --- a/core/src/scss/utilities/variables/core/_core-color-maps.scss +++ b/core/src/scss/utilities/variables/core/_core-color-maps.scss @@ -3,7 +3,7 @@ // // $core-colors // -// SASS color map for the core Decanter theme. In the future, there might be more than one color theme. +// SASS map for the core Decanter colors. // Color maps for individual components are in their own respective directories within utilities/variables/components // // Markup: $core-colors: ( From b54a8d10bf91c49322b3d23502bd0224e0f0fdaf Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 10 Jun 2019 16:38:24 -0700 Subject: [PATCH 36/42] Change @warn to @error in function @color --- core/src/scss/utilities/functions/_color.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/src/scss/utilities/functions/_color.scss b/core/src/scss/utilities/functions/_color.scss index e05f24a46..5d9c37755 100644 --- a/core/src/scss/utilities/functions/_color.scss +++ b/core/src/scss/utilities/functions/_color.scss @@ -19,7 +19,7 @@ $color: map-get($core-colors, $color); } @else { - @warn "Check that `#{$color}` is in color map $core-colors." + @error "Color does not exist in color map $core-colors." } } @else { @@ -27,7 +27,7 @@ $color: map-get($colormap, $color); } @else { - @warn "Check that `#{$color}` is in color map." + @error "Color does not exist in color map." } } @return $color; From 6b7f0e37f46b8c8ed003c9a4416975888488c84f Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 12:25:00 -0700 Subject: [PATCH 37/42] fix cascade of 's font-weight into our other components --- core/dist/css/decanter.css | 10 +++++++++- .../scss/components/global-footer/_global-footer.scss | 5 +++++ core/src/scss/components/lockup/_lockup.scss | 1 + .../utilities/placeholders/components/_button.scss | 6 ++++++ 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 2f71eff8e..9821cfa5e 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -326,6 +326,7 @@ button, display: inline-block; border: 0; font-size: 2rem; + font-weight: 400; line-height: 1; outline: none; text-align: center; @@ -333,6 +334,9 @@ button, width: 100%; -webkit-transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; } + .su-cta .su-cta__button a, .su-button a, .su-button.su-link a, button a, [type='button'] a, [type='submit'] a, [type='reset'] a, [type='image'] a, .su-button--big a, .su-button--big.su-link a, .su-button--secondary a, .su-button--secondary.su-link a { + font-weight: 400; + text-decoration: none; } @media only screen and (min-width: 576px) { .su-cta .su-cta__button, .su-button, .su-button.su-link, @@ -6978,7 +6982,8 @@ button, padding-bottom: 2.74444436rem; } } .su-global-footer a { color: rgba(255, 255, 255, 0.9); - text-decoration: none; } + text-decoration: none; + font-weight: 400; } .su-global-footer a:hover { color: #ffffff; text-decoration: underline; } @@ -7116,6 +7121,8 @@ button, .su-global-footer .su-global-footer__menu--policy { font-size: 1.5rem; font-weight: 300; } + .su-global-footer .su-global-footer__menu--policy a { + font-weight: 300; } @media only screen and (min-width: 0) and (max-width: 575px) { .su-global-footer .su-global-footer__menu--policy { padding-left: 2rem; @@ -7319,6 +7326,7 @@ a { vertical-align: bottom; } } .su-lockup a { + font-weight: 400; text-decoration: none; } .su-lockup__cell1 { diff --git a/core/src/scss/components/global-footer/_global-footer.scss b/core/src/scss/components/global-footer/_global-footer.scss index 9d72f5120..a4d4f527e 100644 --- a/core/src/scss/components/global-footer/_global-footer.scss +++ b/core/src/scss/components/global-footer/_global-footer.scss @@ -19,6 +19,7 @@ a { color: rgba($color-white, 0.9); text-decoration: none; + font-weight: 400; &:hover { color: color(link--reverse); @@ -136,6 +137,10 @@ font-size: 1.5rem; font-weight: 300; + a { + font-weight: 300; + } + @include grid-media-only('xs') { @include padding(null null null 2rem); font-weight: 400; diff --git a/core/src/scss/components/lockup/_lockup.scss b/core/src/scss/components/lockup/_lockup.scss index 51229d358..49c364e00 100644 --- a/core/src/scss/components/lockup/_lockup.scss +++ b/core/src/scss/components/lockup/_lockup.scss @@ -43,6 +43,7 @@ .su-lockup { a { + font-weight: $font-regular; text-decoration: none; } } diff --git a/core/src/scss/utilities/placeholders/components/_button.scss b/core/src/scss/utilities/placeholders/components/_button.scss index 8538aa836..a7b2bb328 100644 --- a/core/src/scss/utilities/placeholders/components/_button.scss +++ b/core/src/scss/utilities/placeholders/components/_button.scss @@ -14,6 +14,7 @@ display: inline-block; border: 0; font-size: $base-font-size; + font-weight: $font-regular; line-height: 1; outline: none; text-align: center; @@ -21,6 +22,11 @@ width: 100%; transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out; + a { + font-weight: $font-regular; + text-decoration: none; + } + @include grid-media('sm') { width: auto; } From af6ee1cbc9d85955bb24fa8dcab6878165fd8c05 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 14:24:58 -0700 Subject: [PATCH 38/42] make :focus match :hover, and fix cascades; move all alert colors into the $alert-colors map; change button-big to use button-primary and just make overrides --- core/dist/css/decanter.css | 53 ++++++++++--------- .../scss/components/alert/_alert--error.scss | 9 ++-- .../scss/components/alert/_alert--info.scss | 9 ++-- .../components/alert/_alert--success.scss | 9 ++-- .../components/alert/_alert--warning.scss | 8 --- core/src/scss/components/alert/_alert.scss | 4 +- .../global-footer/_global-footer.scss | 3 +- .../utilities/mixins/button/_button-big.scss | 20 ++----- .../mixins/button/_button-primary.scss | 4 +- .../src/scss/utilities/mixins/link/_link.scss | 1 + .../variables/components/_alert.scss | 13 +++-- 11 files changed, 64 insertions(+), 69 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 9821cfa5e..6fe1c35ca 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -480,18 +480,18 @@ button, transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .su-cta .su-cta__button { - padding: 1.5rem 3rem 1.8rem; - font-size: 1.5625em; + padding: 1rem 2rem 1.15rem; background-color: #b1040e; color: #ffffff; + font-size: 1.5625em; + padding: 1.5rem 3rem 1.8rem; font-weight: 400; } - .su-cta .su-cta__button:hover { + .su-cta .su-cta__button:hover, .su-cta .su-cta__button:focus { background-color: #2e2d29; color: #ffffff; } .su-cta .su-cta__button:focus { -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - background-color: #2e2d29; } + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } @media only screen and (min-width: 0) { .su-cta .su-cta__button { width: 100%; @@ -6675,7 +6675,7 @@ dfn { color: #ffffff; } .su-alert--error a { color: #ffffff; } - .su-alert--error a:hover { + .su-alert--error a:hover, .su-alert--error a:focus { color: #dad7cb; } .su-alert--info { @@ -6685,7 +6685,7 @@ dfn { color: #ffffff; } .su-alert--info a { color: #ffffff; } - .su-alert--info a:hover { + .su-alert--info a:hover, .su-alert--info a:focus { color: #dad7cb; } .su-alert--success { @@ -6695,17 +6695,13 @@ dfn { color: #ffffff; } .su-alert--success a { color: #ffffff; } - .su-alert--success a:hover { + .su-alert--success a:hover, .su-alert--success a:focus { color: #dad7cb; } .su-alert--warning { background-color: #eaab00; background-image: url(data:image/png;base64,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); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjIxNnB4IiBoZWlnaHQ9IjE0NnB4IiB2aWV3Qm94PSIwIDAgMjE2IDE0NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjE2IDE0NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0xNzkuNjk1LDEyNS4zODhMMTE3LjEyNiwxMC42NzNjLTAuOTI0LTEuNjg0LTIuMi0zLjAxNS0zLjgzMi0zLjk5MmMtMS42MjgtMC45NzgtMy4zOTQtMS40NjctNS4yOTUtMS40NjcKCWMtMS45MDEsMC0zLjY2NywwLjQ5LTUuMjk2LDEuNDY3cy0yLjkwNiwyLjMwOC0zLjgyOSwzLjk5MkwzNi4zMDMsMTI1LjM4OGMtMS45MDEsMy40MjMtMS44NDcsNi44NDUsMC4xNjMsMTAuMjY3CgljMC45MjQsMS41NzQsMi4xODcsMi44MjQsMy43ODksMy43NDZjMS42MDMsMC45MjQsMy4zMjcsMS4zODcsNS4xNzQsMS4zODdIMTcwLjU3YzEuODQ5LDAsMy41NzItMC40NjMsNS4xNzUtMS4zODcKCWMxLjYwMy0wLjkyMiwyLjg2NC0yLjE3MiwzLjc4OS0zLjc0NkMxODEuNTQ0LDEzMi4yMzIsMTgxLjU5OCwxMjguODExLDE3OS42OTUsMTI1LjM4OHogTTExOC40MywxMTcuMjQKCWMwLDAuNzYtMC4yNTksMS4zOTgtMC43NzMsMS45MTRjLTAuNTE2LDAuNTE2LTEuMTI3LDAuNzczLTEuODM0LDAuNzczSDEwMC4xOGMtMC43MDYsMC0xLjMxNy0wLjI1Ny0xLjgzMy0wLjc3MwoJYy0wLjUxNi0wLjUxNy0wLjc3NC0xLjE1NC0wLjc3NC0xLjkxNHYtMTUuNDhjMC0wLjc2LDAuMjU4LTEuMzk3LDAuNzc0LTEuOTE0YzAuNTE2LTAuNTE2LDEuMTI2LTAuNzczLDEuODMzLTAuNzczaDE1LjY0MgoJYzAuNzA3LDAsMS4zMTgsMC4yNTcsMS44MzQsMC43NzNjMC41MTUsMC41MTcsMC43NzMsMS4xNTQsMC43NzMsMS45MTRWMTE3LjI0eiBNMTE4LjI2OCw4Ni43NwoJYy0wLjA1NiwwLjU0My0wLjM0MSwwLjk5MS0wLjg1NiwxLjM0NGMtMC41MTcsMC4zNTQtMS4xNTQsMC41MjktMS45MTUsMC41MjloLTE1LjA3M2MtMC43NiwwLTEuNDEyLTAuMTc2LTEuOTU1LTAuNTI5CgljLTAuNTQ0LTAuMzU0LTAuODE1LTAuODAxLTAuODE1LTEuMzQ2bC0xLjM4NS0zNy4yMzFjMC0wLjc2MSwwLjI3Mi0xLjMzMSwwLjgxNS0xLjcxMWMwLjcwNi0wLjU5NywxLjM1OC0wLjg5NiwxLjk1Ni0wLjg5NmgxNy45MjQKCWMwLjU5OCwwLDEuMjUsMC4yOTgsMS45NTYsMC44OTZjMC41NDMsMC4zOCwwLjgxMywwLjg5NiwwLjgxMywxLjU0OEwxMTguMjY4LDg2Ljc3eiIvPgo8L3N2Zz4K); } - .su-alert--warning a { - color: #8c1515; } - .su-alert--warning a:hover { - color: #2e2d29; } .su-brand-bar { width: 100%; @@ -6789,13 +6785,19 @@ button, padding: 1rem 2rem 1.15rem; background-color: #b1040e; color: #ffffff; } - .su-button:hover, + .su-button:hover, .su-button:focus, .su-button.su-link:hover, + .su-button.su-link:focus, button:hover, + button:focus, [type='button']:hover, + [type='button']:focus, [type='submit']:hover, + [type='submit']:focus, [type='reset']:hover, - [type='image']:hover { + [type='reset']:focus, + [type='image']:hover, + [type='image']:focus { background-color: #2e2d29; color: #ffffff; } .su-button:focus, @@ -6806,24 +6808,24 @@ button, [type='reset']:focus, [type='image']:focus { -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - background-color: #2e2d29; } + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } .su-button--big, .su-button--big.su-link { - padding: 1.5rem 3rem 1.8rem; - font-size: 1.5625em; + padding: 1rem 2rem 1.15rem; background-color: #b1040e; - color: #ffffff; } - .su-button--big:hover, - .su-button--big.su-link:hover { + color: #ffffff; + font-size: 1.5625em; + padding: 1.5rem 3rem 1.8rem; } + .su-button--big:hover, .su-button--big:focus, + .su-button--big.su-link:hover, + .su-button--big.su-link:focus { background-color: #2e2d29; color: #ffffff; } .su-button--big:focus, .su-button--big.su-link:focus { -webkit-box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; - background-color: #2e2d29; } + box-shadow: 0 0 3px #4d4f53, 0 0 7px #4d4f53; } .su-button--secondary, .su-button--secondary.su-link { @@ -6984,7 +6986,7 @@ button, color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 400; } - .su-global-footer a:hover { + .su-global-footer a:hover, .su-global-footer a:focus { color: #ffffff; text-decoration: underline; } .su-global-footer .su-global-footer__container { @@ -7237,8 +7239,9 @@ a { color: #006cb8; text-decoration: underline; font-weight: 600; } - .su-link:hover, .su-link:active, + .su-link:hover, .su-link:focus, .su-link:active, a:hover, + a:focus, a:active { color: #2e2d29; } diff --git a/core/src/scss/components/alert/_alert--error.scss b/core/src/scss/components/alert/_alert--error.scss index 0827d4496..30662f191 100644 --- a/core/src/scss/components/alert/_alert--error.scss +++ b/core/src/scss/components/alert/_alert--error.scss @@ -5,13 +5,14 @@ background-color: color(error, $alert-colors); background-image: url("#{$image-path}/alert-error.png"); background-image: url("#{$image-path}/alert-error.svg"); - color: $color-white; + color: color(light-text, $alert-colors); a { - color: $color-white; + color: color(light-text, $alert-colors); - &:hover { - color: $color-cloud; + &:hover, + &:focus { + color: color(light-hover, $alert-colors); } } } diff --git a/core/src/scss/components/alert/_alert--info.scss b/core/src/scss/components/alert/_alert--info.scss index 2e8bc2fe2..ade22f700 100644 --- a/core/src/scss/components/alert/_alert--info.scss +++ b/core/src/scss/components/alert/_alert--info.scss @@ -5,13 +5,14 @@ background-color: color(info, $alert-colors); background-image: url("#{$image-path}/alert-info.png"); background-image: url("#{$image-path}/alert-info.svg"); - color: $color-white; + color: color(light-text, $alert-colors); a { - color: $color-white; + color: color(light-text, $alert-colors); - &:hover { - color: $color-cloud; + &:hover, + &:focus { + color: color(light-hover, $alert-colors); } } } diff --git a/core/src/scss/components/alert/_alert--success.scss b/core/src/scss/components/alert/_alert--success.scss index 4d76f7296..64b3141f8 100644 --- a/core/src/scss/components/alert/_alert--success.scss +++ b/core/src/scss/components/alert/_alert--success.scss @@ -5,13 +5,14 @@ background-color: color(success, $alert-colors); background-image: url("#{$image-path}/alert-success.png"); background-image: url("#{$image-path}/alert-success.svg"); - color: $color-white; + color: color(light-text, $alert-colors); a { - color: $color-white; + color: color(light-text, $alert-colors); - &:hover { - color: $color-cloud; + &:hover, + &:focus { + color: color(light-hover, $alert-colors); } } } diff --git a/core/src/scss/components/alert/_alert--warning.scss b/core/src/scss/components/alert/_alert--warning.scss index 0941c803b..c4596951b 100644 --- a/core/src/scss/components/alert/_alert--warning.scss +++ b/core/src/scss/components/alert/_alert--warning.scss @@ -5,12 +5,4 @@ background-color: color(warning, $alert-colors); background-image: url("#{$image-path}/alert-warning.png"); background-image: url("#{$image-path}/alert-warning.svg"); - - a { - color: $color-cardinal-red; - - &:hover { - color: $color-black; - } - } } diff --git a/core/src/scss/components/alert/_alert.scss b/core/src/scss/components/alert/_alert.scss index 03d79f897..751131670 100644 --- a/core/src/scss/components/alert/_alert.scss +++ b/core/src/scss/components/alert/_alert.scss @@ -18,11 +18,11 @@ // .su-alert { @include padding(2rem); - background-color: $color-fog; + background-color: color(default, $alert-colors); background-position: 1rem center; background-repeat: no-repeat; background-size: 4rem; - color: $color-black; + color: color(dark-text, $alert-colors); @include grid-media('md') { background-size: 5.2rem; diff --git a/core/src/scss/components/global-footer/_global-footer.scss b/core/src/scss/components/global-footer/_global-footer.scss index a4d4f527e..4cc184399 100644 --- a/core/src/scss/components/global-footer/_global-footer.scss +++ b/core/src/scss/components/global-footer/_global-footer.scss @@ -21,7 +21,8 @@ text-decoration: none; font-weight: 400; - &:hover { + &:hover, + &:focus { color: color(link--reverse); text-decoration: underline; } diff --git a/core/src/scss/utilities/mixins/button/_button-big.scss b/core/src/scss/utilities/mixins/button/_button-big.scss index 6adf946a8..df9428da4 100644 --- a/core/src/scss/utilities/mixins/button/_button-big.scss +++ b/core/src/scss/utilities/mixins/button/_button-big.scss @@ -4,24 +4,14 @@ // @button-big // // Big button styling. +// Same as primary but with larger font-size, more padding. // // Style guide: Mixins.Button.button-big // -@mixin button-big { - @extend %button-base; - @include padding(1.5rem 3rem 1.8rem); - @include type-c; - - background-color: color(brand--bright); - color: color(link--reverse); - &:hover { - background-color: color(bg--reverse); - color: color(link--reverse); - } +@mixin button-big { + @include button-primary; - &:focus { - box-shadow: $focus-shadow; - background-color: color(bg--reverse); - } + @include type-c; + @include padding(1.5rem 3rem 1.8rem); } diff --git a/core/src/scss/utilities/mixins/button/_button-primary.scss b/core/src/scss/utilities/mixins/button/_button-primary.scss index d34f54528..1f28a68da 100644 --- a/core/src/scss/utilities/mixins/button/_button-primary.scss +++ b/core/src/scss/utilities/mixins/button/_button-primary.scss @@ -15,13 +15,13 @@ background-color: color(brand--bright); color: color(link--reverse); - &:hover { + &:hover, + &:focus { background-color: color(bg--reverse); color: color(link--reverse); } &:focus { box-shadow: $focus-shadow; - background-color: color(bg--reverse); } } diff --git a/core/src/scss/utilities/mixins/link/_link.scss b/core/src/scss/utilities/mixins/link/_link.scss index ec7f93f50..76b2677b6 100644 --- a/core/src/scss/utilities/mixins/link/_link.scss +++ b/core/src/scss/utilities/mixins/link/_link.scss @@ -16,6 +16,7 @@ font-weight: $font-semi-bold; &:hover, + &:focus, &:active { color: $hover; } diff --git a/core/src/scss/utilities/variables/components/_alert.scss b/core/src/scss/utilities/variables/components/_alert.scss index 449f498e6..1d7fdfe18 100644 --- a/core/src/scss/utilities/variables/components/_alert.scss +++ b/core/src/scss/utilities/variables/components/_alert.scss @@ -6,6 +6,7 @@ // Color map for alert components. // // Markup: $alert-colors: ( +// default: $color-fog, // success: $color-palo-alto, // warning: $color-sun, // error: $color-bright-red, @@ -15,8 +16,12 @@ // Styleguide: Variables.Components.alert-colors // $alert-colors: ( - success: $color-palo-alto, - warning: $color-sun, - error: $color-bright-red, - info: $color-blue, + default: $color-fog, + success: $color-palo-alto, + warning: $color-sun, + error: $color-bright-red, + info: $color-blue, + dark-text: $color-black, + light-text: $color-white, + light-hover: $color-cloud ) !default; From b6bd5e3dfb0a9da14b5d19b8b82ab575919075f3 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 14:34:57 -0700 Subject: [PATCH 39/42] fix logo link styling in styleguide's masthead --- kss/builder/decanter/kss-assets/css/kss.css | 6 +++++- kss/builder/decanter/scss/_masthead.scss | 7 +++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 6ec3d13ff..90ea994b0 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1684,7 +1684,11 @@ body { -ms-grid-row: 1; -ms-grid-column: 1; } .masthead .brand-logo a { - color: #ffffff; } + color: #ffffff; + text-decoration: none; + font-weight: 700; } + .masthead .brand-logo a:hover, .masthead .brand-logo a:focus { + color: #dad7cb; } .masthead .main-nav { -ms-grid-row: 1; -ms-grid-column: 2; } diff --git a/kss/builder/decanter/scss/_masthead.scss b/kss/builder/decanter/scss/_masthead.scss index 99556d849..371ea20c5 100644 --- a/kss/builder/decanter/scss/_masthead.scss +++ b/kss/builder/decanter/scss/_masthead.scss @@ -40,6 +40,13 @@ a { color: $color-white; + text-decoration: none; + font-weight: $font-bold; + + &:hover, + &:focus { + color: $color-cloud; + } } } From 5069e92548dfbb74e6550693447310414ca1a765 Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 15:12:36 -0700 Subject: [PATCH 40/42] change color of inline links in warning alerts --- core/dist/css/decanter.css | 2 ++ .../scss/components/alert/_alert--warning.scss | 4 ++++ .../utilities/variables/components/_alert.scss | 17 +++++++++-------- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 6fe1c35ca..48937d299 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -6702,6 +6702,8 @@ dfn { background-color: #eaab00; background-image: url(data:image/png;base64,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); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjIxNnB4IiBoZWlnaHQ9IjE0NnB4IiB2aWV3Qm94PSIwIDAgMjE2IDE0NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjE2IDE0NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0xNzkuNjk1LDEyNS4zODhMMTE3LjEyNiwxMC42NzNjLTAuOTI0LTEuNjg0LTIuMi0zLjAxNS0zLjgzMi0zLjk5MmMtMS42MjgtMC45NzgtMy4zOTQtMS40NjctNS4yOTUtMS40NjcKCWMtMS45MDEsMC0zLjY2NywwLjQ5LTUuMjk2LDEuNDY3cy0yLjkwNiwyLjMwOC0zLjgyOSwzLjk5MkwzNi4zMDMsMTI1LjM4OGMtMS45MDEsMy40MjMtMS44NDcsNi44NDUsMC4xNjMsMTAuMjY3CgljMC45MjQsMS41NzQsMi4xODcsMi44MjQsMy43ODksMy43NDZjMS42MDMsMC45MjQsMy4zMjcsMS4zODcsNS4xNzQsMS4zODdIMTcwLjU3YzEuODQ5LDAsMy41NzItMC40NjMsNS4xNzUtMS4zODcKCWMxLjYwMy0wLjkyMiwyLjg2NC0yLjE3MiwzLjc4OS0zLjc0NkMxODEuNTQ0LDEzMi4yMzIsMTgxLjU5OCwxMjguODExLDE3OS42OTUsMTI1LjM4OHogTTExOC40MywxMTcuMjQKCWMwLDAuNzYtMC4yNTksMS4zOTgtMC43NzMsMS45MTRjLTAuNTE2LDAuNTE2LTEuMTI3LDAuNzczLTEuODM0LDAuNzczSDEwMC4xOGMtMC43MDYsMC0xLjMxNy0wLjI1Ny0xLjgzMy0wLjc3MwoJYy0wLjUxNi0wLjUxNy0wLjc3NC0xLjE1NC0wLjc3NC0xLjkxNHYtMTUuNDhjMC0wLjc2LDAuMjU4LTEuMzk3LDAuNzc0LTEuOTE0YzAuNTE2LTAuNTE2LDEuMTI2LTAuNzczLDEuODMzLTAuNzczaDE1LjY0MgoJYzAuNzA3LDAsMS4zMTgsMC4yNTcsMS44MzQsMC43NzNjMC41MTUsMC41MTcsMC43NzMsMS4xNTQsMC43NzMsMS45MTRWMTE3LjI0eiBNMTE4LjI2OCw4Ni43NwoJYy0wLjA1NiwwLjU0My0wLjM0MSwwLjk5MS0wLjg1NiwxLjM0NGMtMC41MTcsMC4zNTQtMS4xNTQsMC41MjktMS45MTUsMC41MjloLTE1LjA3M2MtMC43NiwwLTEuNDEyLTAuMTc2LTEuOTU1LTAuNTI5CgljLTAuNTQ0LTAuMzU0LTAuODE1LTAuODAxLTAuODE1LTEuMzQ2bC0xLjM4NS0zNy4yMzFjMC0wLjc2MSwwLjI3Mi0xLjMzMSwwLjgxNS0xLjcxMWMwLjcwNi0wLjU5NywxLjM1OC0wLjg5NiwxLjk1Ni0wLjg5NmgxNy45MjQKCWMwLjU5OCwwLDEuMjUsMC4yOTgsMS45NTYsMC44OTZjMC41NDMsMC4zOCwwLjgxMywwLjg5NiwwLjgxMywxLjU0OEwxMTguMjY4LDg2Ljc3eiIvPgo8L3N2Zz4K); } + .su-alert--warning a { + color: #820000; } .su-brand-bar { width: 100%; diff --git a/core/src/scss/components/alert/_alert--warning.scss b/core/src/scss/components/alert/_alert--warning.scss index c4596951b..859ab7972 100644 --- a/core/src/scss/components/alert/_alert--warning.scss +++ b/core/src/scss/components/alert/_alert--warning.scss @@ -5,4 +5,8 @@ background-color: color(warning, $alert-colors); background-image: url("#{$image-path}/alert-warning.png"); background-image: url("#{$image-path}/alert-warning.svg"); + + a { + color: color(warning-link, $alert-colors); + } } diff --git a/core/src/scss/utilities/variables/components/_alert.scss b/core/src/scss/utilities/variables/components/_alert.scss index 1d7fdfe18..00bc78700 100644 --- a/core/src/scss/utilities/variables/components/_alert.scss +++ b/core/src/scss/utilities/variables/components/_alert.scss @@ -16,12 +16,13 @@ // Styleguide: Variables.Components.alert-colors // $alert-colors: ( - default: $color-fog, - success: $color-palo-alto, - warning: $color-sun, - error: $color-bright-red, - info: $color-blue, - dark-text: $color-black, - light-text: $color-white, - light-hover: $color-cloud + default: $color-fog, + error: $color-bright-red, + info: $color-blue, + success: $color-palo-alto, + warning: $color-sun, + warning-link: $color-dark-red, + dark-text: $color-black, + light-text: $color-white, + light-hover: $color-cloud ) !default; From 54089ae82dbb2392e4fb7a217d0ad8319da6c38a Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 15:26:35 -0700 Subject: [PATCH 41/42] use cardinal-red for warning alert links; update doc for alert color map in styleguide --- core/dist/css/decanter.css | 2 +- .../utilities/variables/components/_alert.scss | 18 +++++++++++------- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 48937d299..330571a5b 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -6703,7 +6703,7 @@ dfn { background-image: url(data:image/png;base64,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); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjIxNnB4IiBoZWlnaHQ9IjE0NnB4IiB2aWV3Qm94PSIwIDAgMjE2IDE0NiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjE2IDE0NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik0xNzkuNjk1LDEyNS4zODhMMTE3LjEyNiwxMC42NzNjLTAuOTI0LTEuNjg0LTIuMi0zLjAxNS0zLjgzMi0zLjk5MmMtMS42MjgtMC45NzgtMy4zOTQtMS40NjctNS4yOTUtMS40NjcKCWMtMS45MDEsMC0zLjY2NywwLjQ5LTUuMjk2LDEuNDY3cy0yLjkwNiwyLjMwOC0zLjgyOSwzLjk5MkwzNi4zMDMsMTI1LjM4OGMtMS45MDEsMy40MjMtMS44NDcsNi44NDUsMC4xNjMsMTAuMjY3CgljMC45MjQsMS41NzQsMi4xODcsMi44MjQsMy43ODksMy43NDZjMS42MDMsMC45MjQsMy4zMjcsMS4zODcsNS4xNzQsMS4zODdIMTcwLjU3YzEuODQ5LDAsMy41NzItMC40NjMsNS4xNzUtMS4zODcKCWMxLjYwMy0wLjkyMiwyLjg2NC0yLjE3MiwzLjc4OS0zLjc0NkMxODEuNTQ0LDEzMi4yMzIsMTgxLjU5OCwxMjguODExLDE3OS42OTUsMTI1LjM4OHogTTExOC40MywxMTcuMjQKCWMwLDAuNzYtMC4yNTksMS4zOTgtMC43NzMsMS45MTRjLTAuNTE2LDAuNTE2LTEuMTI3LDAuNzczLTEuODM0LDAuNzczSDEwMC4xOGMtMC43MDYsMC0xLjMxNy0wLjI1Ny0xLjgzMy0wLjc3MwoJYy0wLjUxNi0wLjUxNy0wLjc3NC0xLjE1NC0wLjc3NC0xLjkxNHYtMTUuNDhjMC0wLjc2LDAuMjU4LTEuMzk3LDAuNzc0LTEuOTE0YzAuNTE2LTAuNTE2LDEuMTI2LTAuNzczLDEuODMzLTAuNzczaDE1LjY0MgoJYzAuNzA3LDAsMS4zMTgsMC4yNTcsMS44MzQsMC43NzNjMC41MTUsMC41MTcsMC43NzMsMS4xNTQsMC43NzMsMS45MTRWMTE3LjI0eiBNMTE4LjI2OCw4Ni43NwoJYy0wLjA1NiwwLjU0My0wLjM0MSwwLjk5MS0wLjg1NiwxLjM0NGMtMC41MTcsMC4zNTQtMS4xNTQsMC41MjktMS45MTUsMC41MjloLTE1LjA3M2MtMC43NiwwLTEuNDEyLTAuMTc2LTEuOTU1LTAuNTI5CgljLTAuNTQ0LTAuMzU0LTAuODE1LTAuODAxLTAuODE1LTEuMzQ2bC0xLjM4NS0zNy4yMzFjMC0wLjc2MSwwLjI3Mi0xLjMzMSwwLjgxNS0xLjcxMWMwLjcwNi0wLjU5NywxLjM1OC0wLjg5NiwxLjk1Ni0wLjg5NmgxNy45MjQKCWMwLjU5OCwwLDEuMjUsMC4yOTgsMS45NTYsMC44OTZjMC41NDMsMC4zOCwwLjgxMywwLjg5NiwwLjgxMywxLjU0OEwxMTguMjY4LDg2Ljc3eiIvPgo8L3N2Zz4K); } .su-alert--warning a { - color: #820000; } + color: #8c1515; } .su-brand-bar { width: 100%; diff --git a/core/src/scss/utilities/variables/components/_alert.scss b/core/src/scss/utilities/variables/components/_alert.scss index 00bc78700..96401e5a7 100644 --- a/core/src/scss/utilities/variables/components/_alert.scss +++ b/core/src/scss/utilities/variables/components/_alert.scss @@ -6,12 +6,16 @@ // Color map for alert components. // // Markup: $alert-colors: ( -// default: $color-fog, -// success: $color-palo-alto, -// warning: $color-sun, -// error: $color-bright-red, -// info: $color-sky, -//) !default; +// default: $color-fog, +// error: $color-bright-red, +// info: $color-blue, +// success: $color-palo-alto, +// warning: $color-sun, +// warning-link: $color-cardinal-red, +// dark-text: $color-black, +// light-text: $color-white, +// light-hover: $color-cloud +// ) !default; // // Styleguide: Variables.Components.alert-colors // @@ -21,7 +25,7 @@ $alert-colors: ( info: $color-blue, success: $color-palo-alto, warning: $color-sun, - warning-link: $color-dark-red, + warning-link: $color-cardinal-red, dark-text: $color-black, light-text: $color-white, light-hover: $color-cloud From 2c72777a59db735746c3ea5aaf998972813ff84b Mon Sep 17 00:00:00 2001 From: JB Christy Date: Tue, 11 Jun 2019 15:29:36 -0700 Subject: [PATCH 42/42] remove hover / focus color from style guide's masthead logo --- kss/builder/decanter/kss-assets/css/kss.css | 2 -- kss/builder/decanter/scss/_masthead.scss | 5 ----- 2 files changed, 7 deletions(-) diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css index 90ea994b0..c8e9c5d21 100644 --- a/kss/builder/decanter/kss-assets/css/kss.css +++ b/kss/builder/decanter/kss-assets/css/kss.css @@ -1687,8 +1687,6 @@ body { color: #ffffff; text-decoration: none; font-weight: 700; } - .masthead .brand-logo a:hover, .masthead .brand-logo a:focus { - color: #dad7cb; } .masthead .main-nav { -ms-grid-row: 1; -ms-grid-column: 2; } diff --git a/kss/builder/decanter/scss/_masthead.scss b/kss/builder/decanter/scss/_masthead.scss index 371ea20c5..36f5a97fa 100644 --- a/kss/builder/decanter/scss/_masthead.scss +++ b/kss/builder/decanter/scss/_masthead.scss @@ -42,11 +42,6 @@ color: $color-white; text-decoration: none; font-weight: $font-bold; - - &:hover, - &:focus { - color: $color-cloud; - } } }