fix(Pagination): fix hover style state after click to be emerald-green (

#2032)
dnbexperience · May 31, 2023 · e7fd8f3 · e7fd8f3
1 parent 1f417db
commit e7fd8f3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git a/...ges/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/...ges/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap
@@ -1588,19 +1588,13 @@ exports[`Pagination scss have to match default theme snapshot 1`] = `
 .dnb-pagination__indicator__inner {
   animation: show-page 300ms ease-out forwards;
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active):hover, .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not([disabled], :active):hover {
+.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]), .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]) {
   background-color: var(--color-emerald-green);
   color: var(--color-mint-green);
 }
-.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus, .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus {
+html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus {
   color: var(--color-emerald-green);
   background-color: var(--color-mint-green);
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus {
-  --border-color: var(--color-emerald-green);
-  box-shadow: 0 0 0 0.125rem var(--border-color);
-  border-color: transparent;
 }
 
 .dnb-pagination__dots {

diff --git a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss
@@ -28,16 +28,15 @@
   @at-root .dnb-core-style &__button.dnb-button--primary,
     &__button.dnb-button--primary {
     &,
-    &:not([disabled], :active):hover {
+    &:not(:active):hover:not([disabled]) {
       background-color: var(--color-emerald-green);
       color: var(--color-mint-green);
     }
 
-    &:not([disabled], :active, :hover):focus {
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
       color: var(--color-emerald-green);
       background-color: var(--color-mint-green);
-
-      @include fakeFocus(null, var(--color-emerald-green));
     }
   }