Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set up color maps for Decanter and refactor main nav colors to refer to color maps #420

Merged
merged 32 commits into from
Jun 11, 2019
Merged

Set up color maps for Decanter and refactor main nav colors to refer to color maps #420

Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
406c15d
WIP color maps with function to retrieve color; refactor brand bar an…
yvonnetangsu May 28, 2019
b7da694
WIP refactor main nav colors
yvonnetangsu May 28, 2019
2d08215
WIP refactor main nav colors
yvonnetangsu May 28, 2019
39d28eb
Add warnings to color function
yvonnetangsu May 29, 2019
c2466b8
finish up main nav default style color refactor
yvonnetangsu May 31, 2019
d8c7295
Finish up refactoring main-nav--dark colors
yvonnetangsu May 31, 2019
8b25375
Fix main-nav--light variant, when mobile search is present the backgr…
yvonnetangsu Jun 1, 2019
9d3de5a
WIP main-nav--light color refactor
yvonnetangsu Jun 1, 2019
4f9cd86
WIP main-nav--light refactoring; change link-border to border
yvonnetangsu Jun 1, 2019
38f290e
Finish refactoring main-nav--light colors to use color map
yvonnetangsu Jun 3, 2019
7ea298e
Refactor to replace .su-main-nav.su-main-nav--dark selectors with jus…
yvonnetangsu Jun 3, 2019
6f7bc0d
fixup su-main-nav--dark
yvonnetangsu Jun 3, 2019
6b3c15f
Continue cleanup of main nav styles
yvonnetangsu Jun 4, 2019
f079dcb
Main-nav code cleanup remove redundancy
yvonnetangsu Jun 4, 2019
eb04eb2
WIP fixup
yvonnetangsu Jun 4, 2019
8d28b55
bg color transition fixup
yvonnetangsu Jun 5, 2019
a07c704
main-nav--light mobile minus sign fixup
yvonnetangsu Jun 5, 2019
597cea0
have colors in brand bar, global footer, logo, button primary to refe…
yvonnetangsu Jun 5, 2019
aebbeb3
main-nav--light fixup
yvonnetangsu Jun 5, 2019
6df7525
main-nav--light fixup
yvonnetangsu Jun 5, 2019
a0531d4
doc, styleguide and button/link colors
yvonnetangsu Jun 5, 2019
eeb056e
fixup
yvonnetangsu Jun 5, 2019
0e01215
Doc
yvonnetangsu Jun 5, 2019
ee9e703
cc indentation fix
yvonnetangsu Jun 5, 2019
4037b52
fixup
yvonnetangsu Jun 5, 2019
23dd066
Change all reference to $color-dark-red in $main-nav-colors to $color…
yvonnetangsu Jun 10, 2019
62fe57d
Remove nesting of main nav color maps and $theme in function @color
yvonnetangsu Jun 10, 2019
578371a
Add a local variable $_color-map for variants that gets defined at th…
yvonnetangsu Jun 10, 2019
46a9861
Merge branch 'master' into 386-nav-color-map
yvonnetangsu Jun 10, 2019
211b31c
Fix styleguide comments
yvonnetangsu Jun 10, 2019
63187ea
Namespace color map variable
yvonnetangsu Jun 10, 2019
b54a8d1
Change @warn to @error in function @color
yvonnetangsu Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
381 changes: 196 additions & 185 deletions core/dist/css/decanter.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion core/src/scss/components/alert/_alert--error.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

// Error alert.
.su-alert--error {
background-color: map-get($alert-colors, 'error');
background-color: color(error, $alert-colors);
sherakama marked this conversation as resolved.
Show resolved Hide resolved
background-image: url("#{$image-path}/alert-error.png");
background-image: url("#{$image-path}/alert-error.svg");
color: $color-white;
Expand Down
2 changes: 1 addition & 1 deletion core/src/scss/components/alert/_alert--info.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion core/src/scss/components/alert/_alert--success.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion core/src/scss/components/alert/_alert--warning.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand Down
2 changes: 1 addition & 1 deletion core/src/scss/components/brand-bar/_brand-bar--bright.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
2 changes: 1 addition & 1 deletion core/src/scss/components/brand-bar/_brand-bar--dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@

// Brand bar with white wordmark on dark grey background.
.su-brand-bar--dark {
background-color: $color-black;
background-color: color(bg--reverse);
}
4 changes: 2 additions & 2 deletions core/src/scss/components/brand-bar/_brand-bar--white.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

// Brand bar with cardinal red wordmark on white background.
.su-brand-bar--white {
background-color: $color-white;
background-color: color(bg);

.su-brand-bar__logo {
@include font-smoothing(auto);
color: $color-cardinal-red;
color: color(brand);
}
}
2 changes: 1 addition & 1 deletion core/src/scss/components/brand-bar/_brand-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
.su-brand-bar {
width: 100%;
height: 30px;
background-color: $color-cardinal-red;
background-color: color(brand);
}

.su-brand-bar__container {
Expand Down
8 changes: 4 additions & 4 deletions core/src/scss/components/global-footer/_global-footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -42,7 +42,7 @@

a {
@include logo;
color: $color-white;
color: color(link--reverse);
font-size: 3.4rem;

@include grid-media-only('xs') {
Expand Down
4 changes: 2 additions & 2 deletions core/src/scss/components/logo/_logo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
189 changes: 99 additions & 90 deletions core/src/scss/components/main-nav/_main-nav--dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,128 +1,137 @@
@charset "UTF-8";

.su-main-nav {
&.su-main-nav--dark {
@include grid-media-max('md') {
.su-main-nav__toggle {
color: $color-white;

&:hover,
&:focus {
&::before {
background-color: $color-white;
}
.su-main-nav--dark {
sherakama marked this conversation as resolved.
Show resolved Hide resolved
@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);
sherakama marked this conversation as resolved.
Show resolved Hide resolved
}
}

&:active {
&::before {
background-color: $color-vivid-red;
}
&:active {
&::before {
background-color: color(border--active, $main-nav-colors, dark);
}
}

&::after {
background: url("#{$image-path}/hamburger-white.svg") no-repeat 3px 0;
&::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);
}

&[aria-expanded="true"] {
&::before {
background-color: $color-white;
}
&:hover::before {
background-color: color(border--expanded-hover, $main-nav-colors, dark);
}

&::after {
background: url("#{$image-path}/close-white.svg") no-repeat 3px 0;
background-size: 16px 16px;
}
&:active::before {
background-color: color(border--expanded-active, $main-nav-colors, dark);
}

&:hover::before {
background-color: $color-vivid-red;
}
&::after {
background: url("#{$image-path}/close-white.svg") no-repeat 3px 0;
background-size: 16px 16px;
}
}
}
}

// desktop first level menu style override
// desktop first level menu style override
@include grid-media('lg') {
> ul {
@include grid-media('lg') {
> li {
> a {
color: $color-white;

&:hover,
&:focus {
color: $color-white;

&::before {
background-color: $color-white;
}
}
> li {
> a {
color: color(link, $main-nav-colors, dark);

&:active {
color: $color-white;
&:hover,
&:focus {
color: color(link--hover, $main-nav-colors, dark);

&::before {
background-color: $color-white;
}
&::before {
background-color: color(border--hover, $main-nav-colors, dark);
}
}

&[aria-expanded="true"] {
color: $color-white;
&:active {
color: color(link--active, $main-nav-colors, dark);

&::before {
background-color: $color-white;
}
&::before {
background-color: color(border--active, $main-nav-colors, dark);
}
}

&:hover {
color: $color-white;
&[aria-expanded="true"] {
color: color(link--expanded, $main-nav-colors, dark);

&::before {
background-color: $color-vivid-red;
}
}
&::before {
background-color: color(border--expanded, $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%;
&:hover {
color: color(link--hover, $main-nav-colors, dark);
}
}
}
}

> .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--current {
> a {
color: $color-white;
> .su-main-nav__item--current {
> a {
color: color(link--active, $main-nav-colors, dark);

&::before {
background-color: $color-vivid-red;
}
&::before {
background-color: color(border--active, $main-nav-colors, dark);
}

&:hover,
&:focus {
color: $color-white;
&:hover,
&:focus {
color: color(link--active-hover, $main-nav-colors, dark);

&::before {
background-color: $color-white;
}
}
&::before {
background-color: color(border--active-hover, $main-nav-colors, dark);
}
}

&.su-main-nav__item--expanded {
> a:focus {
color: $color-white;
&:active::before {
background-color: color(border--active, $main-nav-colors, dark);
}
}
}

&::before {
background-color: $color-white;
}
}
> .su-main-nav__item--expanded {
&,
&.su-main-nav__item--current {
> a,
> a:focus {
&::before {
background-color: color(border--expanded, $main-nav-colors, dark);
}
}
}

> a[aria-expanded="true"]:hover {
color: $color-white;
> a[aria-expanded="true"] {
&:hover::before {
background-color: color(border--expanded-hover, $main-nav-colors, dark);
}

&::before {
background-color: $color-vivid-red;
}
}
}
&:active::before {
background-color: color(border--expanded-active, $main-nav-colors, dark);
}
}
}
Expand Down
Loading