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

424 default link style #427

Merged
merged 46 commits into from
Jun 11, 2019
Merged

424 default link style #427

Show file tree
Hide file tree
Changes from 42 commits
Commits
Show all changes
46 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
1d164c2
change style of inline (default) link style
JBCSU Jun 10, 2019
2d0eaf3
update doc and sample text
JBCSU 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
008a661
don't change styling of <a> tags in the style guide contents
JBCSU Jun 10, 2019
30745a1
underlining links in alerts is now redundant
JBCSU Jun 10, 2019
5910297
don't underline CTA links
JBCSU Jun 10, 2019
f3efe83
Merge branch '386-nav-color-map' into 424-inline-link-style
JBCSU 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
6b7f0e3
fix cascade of <a>'s font-weight into our other components
JBCSU Jun 11, 2019
ef81fed
Merge branch '386-nav-color-map' into 424-inline-link-style
JBCSU Jun 11, 2019
af6ee1c
make :focus match :hover, and fix cascades;
JBCSU Jun 11, 2019
b6bd5e3
fix logo link styling in styleguide's masthead
JBCSU Jun 11, 2019
7be0926
Fix a few CC complains.
JBCSU Jun 11, 2019
5069e92
change color of inline links in warning alerts
JBCSU Jun 11, 2019
54089ae
use cardinal-red for warning alert links;
JBCSU Jun 11, 2019
2c72777
remove hover / focus color from style guide's masthead logo
JBCSU Jun 11, 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
488 changes: 255 additions & 233 deletions core/dist/css/decanter.css
View file
Open in desktop

Large diffs are not rendered by default.

11 changes: 6 additions & 5 deletions 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,16 +2,17 @@

// 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;
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);
}
}
}
11 changes: 6 additions & 5 deletions 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,16 +2,17 @@

// 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;
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);
}
}
}
11 changes: 6 additions & 5 deletions 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,16 +2,17 @@

// 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;
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);
}
}
}
10 changes: 1 addition & 9 deletions 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,15 +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");

a {
color: $color-cardinal-red;

&:hover {
color: $color-black;
}
}
}
8 changes: 2 additions & 6 deletions core/src/scss/components/alert/_alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -53,9 +53,5 @@
.su-alert__text {
@include margin(0 null);
}

a {
text-decoration: underline;
}
}
}
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
16 changes: 11 additions & 5 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,17 @@
// 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;
font-weight: 400;

&:hover {
color: $color-white;
&:hover,
&:focus {
color: color(link--reverse);
text-decoration: underline;
}
}
Expand All @@ -42,7 +44,7 @@

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

@include grid-media-only('xs') {
Expand Down Expand Up @@ -136,6 +138,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;
Expand Down
3 changes: 2 additions & 1 deletion core/src/scss/components/link/_link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions core/src/scss/components/lockup/_lockup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@

.su-lockup {
a {
font-weight: $font-regular;
text-decoration: none;
}
}
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);
}
}
Loading