diff --git a/packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss b/packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss
index 8d59d4c2..5769f48c 100644
--- a/packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss
+++ b/packages/gravity-ui-web/src/sass/03-elements/_inline-text.scss
@@ -1,22 +1,19 @@
-a {
- font-weight: grav-font-weight('primary', 'bold');
-
- &[href] {
- &:link {
- @include grav-color-grp-b-apply('color', 'control', true);
- }
+a[href] {
+ &:link {
+ @include grav-color-grp-b-apply('color', 'control', true);
+ }
- &:visited {
- @include grav-color-grp-b-apply('color', 'control-alt', true);
- }
+ &:visited {
+ @include grav-color-grp-b-apply('color', 'control-alt', true);
+ }
- &:hover {
- @include grav-color-grp-b-apply('color', 'control-emphasis', true);
- }
+ &:hover,
+ &:focus {
+ @include grav-color-grp-b-apply('color', 'control-emphasis', true);
+ }
- &:active {
- @include grav-color-grp-b-apply('color', 'control-active', true);
- }
+ &:active {
+ @include grav-color-grp-b-apply('color', 'control-active', true);
}
}
diff --git a/packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss b/packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss
index 5ad56233..11ed7117 100644
--- a/packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss
+++ b/packages/gravity-ui-web/src/sass/05-components/01-atoms/10-navigation/_00-nav-link.scss
@@ -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 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');
+ }
}
diff --git a/packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss b/packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss
index b8701624..2f66384e 100644
--- a/packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss
+++ b/packages/gravity-ui-web/src/sass/05-components/03-organisms/00-page-structure/_00-page-header.scss
@@ -24,19 +24,12 @@ body > header {
.grav-c-logo {
display: block;
max-height: 33px; // Otherwise IE11 makes it 150px tall :-(
- fill: currentColor;
@media (min-width: $grav-page-heading-trigger-breakpoint) {
width: 100%;
}
}
-
- /* stylelint-disable-next-line selector-max-compound-selectors */
- a:hover .grav-c-logo {
- @include grav-color-grp-b-apply('fill', 'neutral-emphasis', true);
- }
-
.grav-c-toggle-menu {
flex-shrink: 0;
@@ -84,6 +77,20 @@ body > header {
a {
display: block;
+
+ &:visited {
+ // Make visited logo link use some color as non-visited one
+ @include grav-color-grp-b-apply('color', 'control', true);
+ }
+
+ &:hover,
+ &: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 styles.
+ @include grav-color-grp-b-apply('color', 'control-emphasis', true);
+ }
}
@media (min-width: $grav-page-heading-trigger-breakpoint) {
diff --git a/packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss b/packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss
index cece2e69..89dd5538 100644
--- a/packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss
+++ b/packages/gravity-ui-web/src/sass/05-components/03-organisms/_card-basic.scss
@@ -60,11 +60,14 @@
}
}
- > a:hover::after {
- opacity: 0.75;
- }
+ > a:hover,
+ > a:focus {
+ &::after {
+ opacity: 0.75;
+ }
- > a:hover > svg {
- opacity: 1;
+ > svg {
+ opacity: 1;
+ }
}
}