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 => (
+
+
);