diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md b/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md
index befe143bc0c..2757b2eb342 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/typography/anchor.md
@@ -18,7 +18,6 @@ Beside that the Anchor Tag gets assigned by default - or let's say, by only impo
- `.dnb-active-style` Active Style
- `.dnb-focus-style` Focus Style
- `.dnb-with-animation` With a special animation Style
-- No href results in `user-select: none;`
## With Icon
diff --git a/packages/dnb-ui-lib/src/style/core/anchor.scss b/packages/dnb-ui-lib/src/style/core/anchor.scss
index 43f9deb3749..f6cdb7ff387 100644
--- a/packages/dnb-ui-lib/src/style/core/anchor.scss
+++ b/packages/dnb-ui-lib/src/style/core/anchor.scss
@@ -13,8 +13,16 @@
border-bottom: none;
}
@mixin focusStyle($whatinput: null) {
- @include fakeFocus($whatinput);
- border-bottom: none;
+ &:not(:active) {
+ @include hoverStyle();
+ transition: none;
+ border-bottom: none;
+ }
+ @if $whatinput {
+ @include fakeFocus($whatinput);
+ } @else {
+ @include fakeFocus();
+ }
}
a {
@@ -42,8 +50,8 @@ a {
text-decoration: none;
border-bottom: 1px solid var(--color-sea-green);
- &:active,
- &:hover {
+ &:hover,
+ &:active {
@include hoverStyle();
// margins are not needed as long as we go for "inline"
@@ -53,7 +61,7 @@ a {
@include activeStyle();
}
&:focus {
- @include fakeFocus();
+ @include focusStyle();
}
transition: background-color 0.2s ease;
@@ -121,7 +129,7 @@ a {
}
}
&:focus {
- @include fakeFocus();
+ @include focusStyle();
// border
&::after {
border-bottom: none;
@@ -141,6 +149,8 @@ a {
@mixin resetHoverStyle() {
&:hover {
color: inherit;
+ // in case we dont want to change the color to the body color
+ // color: var(--color-sea-green);
background-color: inherit;
border-bottom-width: 1px;
}
@@ -159,8 +169,6 @@ a {
}
}
.dnb-no-anchor-style {
- padding: 0;
- margin: 0;
white-space: normal;
border-bottom: none;
color: inherit;
@@ -186,7 +194,8 @@ a {
.dnb-no-anchor-animation {
@include resetAnimationStyle();
}
-a:not([href]) {
+// If a link don't contains a / or http(s)
+a:not([href^='/']):not([href^='http']) {
cursor: pointer;
user-select: none;
}