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; }