-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(links): adjusts styling of link components
affects: @buildit/gravity-ui-web Some of the legacy styles that apply or override colors on hyperlinks needed updating to work properly with the new color system and match the target designs. This change also adds some previously missing :focus styles (which use the same appearance as :hover) for better accessbility.
- Loading branch information
James Nash
committed
May 22, 2019
1 parent
db8e888
commit 4b36fca
Showing
4 changed files
with
49 additions
and
33 deletions.
There are no files selected for viewing
29 changes: 13 additions & 16 deletions
29
packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 14 additions & 5 deletions
19
packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,28 @@ | ||
.grav-c-nav-link { | ||
display: inline-block; | ||
padding: $grav-sp-inset-squished-xs; | ||
color: currentColor; | ||
text-decoration: none; | ||
white-space: nowrap; | ||
|
||
&[href] { | ||
&:link, | ||
&:visited { | ||
color: currentColor; | ||
// Make visited links use some color as non-visited ones | ||
@include grav-color-grp-b-apply('color', 'control', true); | ||
} | ||
|
||
&:hover, | ||
&:active { | ||
@include grav-color-grp-b-apply('color', 'neutral-emphasis', true); | ||
&:focus { | ||
// Need to re-instate the hover/focus color since the previous block | ||
// that overrides the usual visited color will otherwise still apply. | ||
// This is because these selectors have a higher specificity that | ||
// the ones that apply the basic <a> styles. | ||
@include grav-color-grp-b-apply('color', 'control-emphasis', true); | ||
} | ||
} | ||
|
||
// Placeholder nav links are used to highlight the | ||
// current page, so we want them to appear bold | ||
&:not([href]) { | ||
font-weight: grav-font-weight('primary', 'bold'); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters