fix icon hover & dropdown focus

sora-xor · Mar 5, 2024 · 5296bd5 · 5296bd5
1 parent 8da8c49
commit 5296bd5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/shared/Button/SortButton.vue b/src/components/shared/Button/SortButton.vue
@@ -75,5 +75,7 @@ export default class SortButton extends Vue {
   &--descending {
     transform: rotate(180deg);
   }
+
+  @include icon-styles($hoverColor: var(--s-color-theme-accent-hover));
 }
 </style>
diff --git a/src/components/shared/LinksDropdown.vue b/src/components/shared/LinksDropdown.vue
@@ -51,7 +51,7 @@ export default class LinksDropdown extends Mixins(TranslationMixin) {
   &,
   .el-tooltip {
     &:focus {
-      outline: auto;
+      @include focus-outline($inner: true);
     }
   }
 }

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -346,14 +346,16 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
   }
 }
 
-@mixin icon-styles($hasPointerCursor: false) {
+@mixin icon-styles($hasPointerCursor: false, $withHover: true, $hoverColor: var(--s-color-base-content-secondary)) {
   color: var(--s-color-base-content-tertiary);
   transition: var(--s-transition-default);
   @if $hasPointerCursor == true {
     cursor: pointer;
   }
-  &:hover {
-    color: var(--s-color-base-content-secondary);
+  @if $withHover == true {
+    &:hover {
+      color: $hoverColor;
+    }
   }
 }
 
@@ -488,9 +490,8 @@ $button-custom-shadow: -1px -1px 5px rgba(0, 0, 0, 0.05), 1px 1px 5px rgba(0, 0,
         font-weight: 500 !important;
       }
 
-      [class^='s-icon-'],
-      [class*=' s-icon-'] {
-        @include icon-styles;
+      i:not(.sort-icon) {
+        @include icon-styles($withHover: false);
       }
     }