diff --git a/ui_framework/components/_mixins.scss b/ui_framework/components/_mixins.scss index 8773a0337a45..f57cae5343fc 100644 --- a/ui_framework/components/_mixins.scss +++ b/ui_framework/components/_mixins.scss @@ -4,6 +4,33 @@ } } +/** + * 1. Enforce pointer when there's no href. + */ +@mixin link { + color: $globalLinkColor; + text-decoration: none; + cursor: pointer; /* 1 */ + + &:visited, + &:active { + color: $globalLinkColor; + } + + &:hover { + color: $globalLinkHoverColor; + text-decoration: underline; + } + + @include darkTheme { + color: $globalLinkColor--darkTheme; + + &:hover { + color: $globalLinkColor--darkTheme; + } + } +} + /** * 1. Links can't have a disabled attribute, so they can't support :disabled. */ diff --git a/ui_framework/components/link/_link.scss b/ui_framework/components/link/_link.scss index 299275f263fe..67767f237a2e 100644 --- a/ui_framework/components/link/_link.scss +++ b/ui_framework/components/link/_link.scss @@ -1,18 +1,3 @@ -/** - * 1. Enforce pointer when there's no href. - */ .kuiLink { - color: $globalLinkColor; - text-decoration: none; - cursor: pointer; /* 1 */ - - &:visited, - &:active { - color: $globalLinkColor; - } - - &:hover { - color: $globalLinkHoverColor; - text-decoration: underline; - } + @include link; } diff --git a/ui_framework/components/local_nav/_local_breadcrumbs.scss b/ui_framework/components/local_nav/_local_breadcrumbs.scss index e906ef4a3fe3..6c7c116f37eb 100644 --- a/ui_framework/components/local_nav/_local_breadcrumbs.scss +++ b/ui_framework/components/local_nav/_local_breadcrumbs.scss @@ -26,23 +26,13 @@ } } +/** + * 1. Make it a bit darker to contrast with the gray background. + */ .kuiLocalBreadcrumb__link { + @include link; + color: $localBreadcrumbLinkColor; /* 1 */ font-size: $globalFontSize; - color: $localBreadcrumbLinkColor; - text-decoration: none; - - &:hover { - color: $localBreadcrumbLinkColor; - text-decoration: underline; - } - - @include darkTheme { - color: $globalLinkColor--darkTheme; - - &:hover { - color: $globalLinkColor--darkTheme; - } - } } .kuiLocalBreadcrumb__emphasis { diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 93739e2c4de4..39d7f8d50ee7 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -1,3 +1,6 @@ +/** + * 1. Enforce pointer when there's no href. + */ /** * 1. Links can't have a disabled attribute, so they can't support :disabled. */ @@ -1142,9 +1145,6 @@ body { font-size: 14px; line-height: 1.5; } -/** - * 1. Enforce pointer when there's no href. - */ .kuiLink { color: #3CAED2; text-decoration: none; @@ -1155,6 +1155,10 @@ body { .kuiLink:hover { color: #006E8A; text-decoration: underline; } + .theme-dark .kuiLink { + color: #b7e2ea; } + .theme-dark .kuiLink:hover { + color: #b7e2ea; } .kuiLoadingItems { padding: 30px; @@ -1192,12 +1196,21 @@ body { .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { color: #a5a5a5; } +/** + * 1. Make it a bit darker to contrast with the gray background. + */ .kuiLocalBreadcrumb__link { - font-size: 14px; + color: #3CAED2; + text-decoration: none; + cursor: pointer; + /* 1 */ color: #328caa; - text-decoration: none; } + /* 1 */ + font-size: 14px; } + .kuiLocalBreadcrumb__link:visited, .kuiLocalBreadcrumb__link:active { + color: #3CAED2; } .kuiLocalBreadcrumb__link:hover { - color: #328caa; + color: #006E8A; text-decoration: underline; } .theme-dark .kuiLocalBreadcrumb__link { color: #b7e2ea; } diff --git a/ui_framework/doc_site/src/views/link/link_example.js b/ui_framework/doc_site/src/views/link/link_example.js index b18364ba0f73..b9a243838f3e 100644 --- a/ui_framework/doc_site/src/views/link/link_example.js +++ b/ui_framework/doc_site/src/views/link/link_example.js @@ -21,6 +21,11 @@ export default props => ( + + );