Issue/6172-Fix-surface-toolbar-button-styles (#6181)

* #6172 Fix surface toolbar button styles Fixes #6172 * #6172 - fix colors * #6172 Fix surface toolbar button styles Fixes #6172
surveyjs · Dec 4, 2024 · 87c4d47 · 87c4d47
1 parent c4268fb
commit 87c4d47
Show file tree

Hide file tree

Showing 7 changed files with 4 additions and 4 deletions.
diff --git a/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss b/packages/survey-creator-core/src/components/page-navigator/page-navigator.scss
@@ -43,7 +43,7 @@ svc-page-navigator,
   border: none;
   background-color: transparent;
   &:hover,
-  &:focus {
+  &:focus-visible {
     outline: none;
 
     .svc-page-navigator__button-icon {
@@ -67,11 +67,11 @@ svc-page-navigator,
   }
 }
 
-.svc-page-navigator__button--active {
+.svc-page-navigator__button--active, .svc-page-navigator__button--active:hover  {
   .svc-page-navigator__button-icon {
-    background: var(--ctr-page-navigator-button-background-color-hovered, $primary-light);
+    background: var(--ctr-page-navigator-button-background-color-checked, transparent);
     use {
-      fill: var(--ctr-page-navigator-button-icon-color-hovered, $primary);
+      fill: var(--ctr-page-navigator-button-icon-color-checked, $primary);
     }
   }
 }

diff --git a/visualRegressionTests-V2/tests/designer/etalons/design-surface-toolbar.png b/visualRegressionTests-V2/tests/designer/etalons/design-surface-toolbar.png
diff --git a/...alRegressionTests-V2/tests/designer/etalons/page-navigator-select-long-page.png b/...alRegressionTests-V2/tests/designer/etalons/page-navigator-select-long-page.png
diff --git a/...lRegressionTests-V2/tests/designer/etalons/page-navigator-select-short-page.png b/...lRegressionTests-V2/tests/designer/etalons/page-navigator-select-short-page.png
diff --git a/visualRegressionTests/tests/designer/etalons/design-surface-toolbar.png b/visualRegressionTests/tests/designer/etalons/design-surface-toolbar.png
diff --git a/visualRegressionTests/tests/designer/etalons/page-navigator-select-long-page.png b/visualRegressionTests/tests/designer/etalons/page-navigator-select-long-page.png
diff --git a/visualRegressionTests/tests/designer/etalons/page-navigator-select-short-page.png b/visualRegressionTests/tests/designer/etalons/page-navigator-select-short-page.png