Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Use svg icons as "mask" so their colors could be changed using CSS background-color #426

Merged
merged 10 commits into from
Jun 12, 2019
Merged

Use svg icons as "mask" so their colors could be changed using CSS background-color #426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e8273b5
Hides icon in IE
yvonnetangsu Jun 10, 2019
abfc56d
Use Bourbon @size mixin for width and height and rearrange properties
yvonnetangsu Jun 10, 2019
a4c45dc
Add helper mixin @ie-only for writing styles targeting only IE
yvonnetangsu Jun 10, 2019
63d8622
Merge branch 'master' into 423-svg-icon-test
yvonnetangsu Jun 10, 2019
0ad0ab0
Use @supports for browser detection instead
yvonnetangsu Jun 11, 2019
983a85d
Better browser targeting - include Edge 18 and + but exclude Edge 17 …
yvonnetangsu Jun 11, 2019
328db3a
Merge branch 'master' into 423-svg-icon-test
yvonnetangsu Jun 12, 2019
a01bc75
Merge master and tweak color map; add proper focus state for external…
yvonnetangsu Jun 12, 2019
23ead0f
Replace link-inline with link in $core-colors and add link--alt (for …
yvonnetangsu Jun 12, 2019
0e0227f
fix doc on @function color()
JBCSU Jun 12, 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
42 changes: 22 additions & 20 deletions core/dist/css/decanter.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions core/src/scss/utilities/functions/_color.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
// returns a color from $core-colors. 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-inline--hover $colormap - Color palette in the form of a SASS map,
// $color - String - Color variable name from a color map, e.g., brand, link
// $colormap - Color palette in the form of a SASS map,
// e.g., $alert-colors, $main-nav-dark-colors.
// Default is $core-colors.
//
Expand Down
12 changes: 7 additions & 5 deletions core/src/scss/utilities/mixins/button/_button-secondary.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,19 @@

background-color: color(bg);
box-shadow: $button-stroke color(brand--bright);
color: color(brand--bright);
color: color(link--alt);

&:hover {
&:hover,
&:focus {
background-color: color(bg);
color: color(link--alt-hover);
}

&:hover {
box-shadow: $button-stroke $color-black;
color: color(link-inline--hover);
}

&:focus {
background-color: color(bg);
box-shadow: $button-stroke $color-black, $focus-shadow;
color: color(link-inline--hover);
}
}
14 changes: 14 additions & 0 deletions core/src/scss/utilities/mixins/ie-only/_ie-only.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@charset "UTF-8";

//
// @ie-only
//
// A helper to write a query for IE-only styles
//
// Style guide: Mixins.IE-only
//
@mixin ie-only {
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@content;
}
}
12 changes: 12 additions & 0 deletions core/src/scss/utilities/mixins/ie-only/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
@charset "UTF-8";

//
// @ie-only
//
// A helper mixin to write a query for IE-only styles
//
// Style guide: Mixins.IE-only
//

@import
'ie-only';
1 change: 1 addition & 0 deletions core/src/scss/utilities/mixins/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

@import
// Utilities
'ie-only/index',
'accessibility/index',
'animation/index',
'breakpoint/index',
Expand Down
2 changes: 1 addition & 1 deletion core/src/scss/utilities/mixins/link/_action-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
//
// Style guide: Mixins.Link.action-link
//
@mixin action-link($color: color(link--alt), $hover: color(link--alt-hover)) {
@mixin action-link($color: color(link), $hover: color(link--hover)) {
font-weight: $font-semi-bold;
text-decoration: none;
color: $color;
Expand Down
29 changes: 16 additions & 13 deletions core/src/scss/utilities/mixins/link/_external-link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,22 @@
// Style guide: Mixins.Link.external-link
//
@mixin external-link($external-link: external-link, $external-link-hover: external-link-hover) {
&::after {
@include margin(null null -1px 4px);
background: url("#{$image-path}/#{$external-link}.png") no-repeat 0 0;
background: url("#{$image-path}/#{$external-link}.svg") no-repeat 0 0;
background-size: 100%;
content: '';
display: inline-block;
height: 0.65em;
width: 0.65em;
}
@supports (mask-repeat: no-repeat) {
&::after {
@include margin(null null -1px 4px);
@include size(0.65em);
display: inline-block;
content: '';
mask: url("#{$image-path}/#{$external-link}.svg") no-repeat 0 0;
mask-size: cover;
background-color: color(link);
}

&:hover::after {
background-image: url("#{$image-path}/#{$external-link-hover}.png");
background-image: url("#{$image-path}/#{$external-link-hover}.svg");
&:hover,
&:focus {
&::after {
background-color: color(link--hover);
}
}
}
}
2 changes: 1 addition & 1 deletion core/src/scss/utilities/mixins/link/_link.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
//
// Style guide: Mixins.Link.link
//
@mixin link($color: color(link-inline), $hover: color(link-inline--hover)) {
@mixin link($color: color(link), $hover: color(link--hover)) {
color: $color;
text-decoration: underline;
font-weight: $font-semi-bold;
Expand Down
12 changes: 6 additions & 6 deletions core/src/scss/utilities/variables/core/_core-color-maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
// text: $color-black,
// text--high-contrast: #000,
// text--reverse: $color-white,
// link: $color-bright-red,
// link-inline--hover: $color-black,
// link--alt: $color-bright-blue,
// link: $color-bright-blue,
// link--hover: $color-black,
// link--alt: $color-bright-red,
// link--alt-hover: $color-black,
// link--reverse: $color-white,
// link--reverse-hover: $color-vivid-red,
Expand All @@ -37,9 +37,9 @@ $core-colors: (
text--high-contrast: #000,
text--reverse: $color-white,

link-inline: $color-bright-blue,
link-inline--hover: $color-black,
link--alt: $color-bright-blue,
link: $color-bright-blue,
link--hover: $color-black,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose to replace link and link--hover with link-inline and link-inline--hover to be more explicit about the application. I don't want to have both, so let's decide. I prefer the -inline variants, in which case please use those. But if you feel strongly that link and link--hover are better, then please delete the ones I added and change all references to the -inline map entries to match

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like having a clean default link color without any modifiers since we have clean bg, text colors. Also, the -inline makes me wonder if it only applies to display:inline links. For example, the links in the vertical link list will probably take on this default link color, but it might be a bit strange if I apply the color link-inline even though the link might be a block element.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, then please delete the -inline options and update all references to them to refer to the shorter names.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done! Added a link--alt and link--alt-hover for cases like the secondary button link style. I feel like the bright red link will appear on some sites in some other ways so I make that the link--alt color.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. I introduced an error in the doc for @function color(), so I fixed that.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!!

link--alt: $color-bright-red,
link--alt-hover: $color-black,
link--reverse: $color-white,
link--reverse-hover: $color-vivid-red,
Expand Down