fix: correct focus behavior in QCollapseItem (#155)

* fix: remove outline in firefox, use focus-visible polyfill in QCollapseItem * fix: comb focus styles Co-authored-by: ViZhe <vzheleztsov@gpmdata.ru>
altai-ui · Sep 8, 2021 · 1f6c3f0 · 1f6c3f0
1 parent 5175c7b
commit 1f6c3f0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 10 deletions.
diff --git a/src/qComponents/QCascader/src/QCascaderRow/q-cascader-row.scss b/src/qComponents/QCascader/src/QCascaderRow/q-cascader-row.scss
@@ -15,12 +15,14 @@
   }
 
   &:not(.q-cascader-row_disabled) {
+    &:focus {
+      outline: none;
+    }
+
     &:hover,
-    &:focus,
     &.focus-visible {
       color: var(--color-primary-black);
       background-color: var(--color-tertiary-gray);
-      outline: none;
     }
   }
 

diff --git a/src/qComponents/QCollapseItem/src/q-collapse-item.scss b/src/qComponents/QCollapseItem/src/q-collapse-item.scss
@@ -22,8 +22,12 @@
       border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
     }
 
-    &:focus,
-    &:hover {
+    &:focus {
+      outline: none;
+    }
+
+    &:hover,
+    &.focus-visible {
       background-color: var(--color-tertiary-gray);
     }
   }

diff --git a/src/qComponents/QInput/src/q-input.scss b/src/qComponents/QInput/src/q-input.scss
@@ -65,9 +65,12 @@
       height: 0;
     }
 
+    &:focus {
+      outline: none;
+    }
+
     &.focus-visible {
       background-color: var(--field-background-color-focus);
-      outline: none;
       box-shadow: var(--field-box-shadow-focus);
     }
 
@@ -167,8 +170,8 @@
         font-family: 'qicon';
       }
 
-      &.focus-visible,
-      &:hover {
+      &:hover,
+      &.focus-visible {
         color: var(--field-icon-color-hover);
       }
     }

diff --git a/src/qComponents/QTag/src/q-tag.scss b/src/qComponents/QTag/src/q-tag.scss
@@ -40,10 +40,13 @@
     background-color: transparent;
     border: none;
 
-    &.focus-visible,
-    &:hover {
-      color: var(--color-primary-black);
+    &:focus {
       outline: none;
     }
+
+    &:hover,
+    &.focus-visible {
+      color: var(--color-primary-black);
+    }
   }
 }