fix(Anchor:) fixes anchor modifier .dnb-anchor--no-hover

dnbexperience · Jul 28, 2023 · feda4c2 · feda4c2
1 parent 215e52c
commit feda4c2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/anchor/demos.mdx
@@ -47,7 +47,7 @@ To force a specific state of style, use the following classes to do so:
 
 ### Anchor with icons
 
-Icons can be adde with the `icon` and `iconPosition` props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
+Icons can be added with the `icon` and `iconPosition` props. Normally by sending in the name if an icon, but it is also possible to send in html/react code (normally for custom svg).
 
 <AnchorExampleIcons />
 

diff --git a/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss b/packages/dnb-eufemia/src/components/anchor/style/anchor-mixins.scss
@@ -59,8 +59,6 @@
 
 @mixin resetAnchorHoverStyle() {
   &:hover {
-    color: inherit;
-
     // in case we don't want to change the color to the body color
     background-color: transparent;
   }
@@ -187,7 +185,9 @@
 
   &:hover,
   &:active {
-    @include anchorHoverStyle();
+    :not(.dnb-anchor--no-hover) {
+      @include anchorHoverStyle();
+    }
   }
 
   &:active {
@@ -207,7 +207,6 @@
   [data-visual-test-wrapper] & {
     transition: none;
   }
-
   // other stuff, not related to the Anchor directly
   .dnb-icon {
     display: inline-block;

diff --git a/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss b/packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss
@@ -5,8 +5,10 @@
 
   &:hover,
   &:active {
-    color: var(--color-sea-green);
-    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+    :not(.dnb-anchor--no-hover) {
+      color: var(--color-sea-green);
+      @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+    }
   }
 
   &:active {