fix: fixed problem with hover on touch screens

Kotlin · Oct 24, 2024 · 6321041 · 6321041
1 parent bf9126a
commit 6321041
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 15 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/button/styles.scss
@@ -29,8 +29,10 @@
     padding: var(--size-s2);
   }
 
-  &:hover {
-    background-color: var(--color-b08);
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-b08);
+    }
   }
 
   &:active {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/navbar-button/styles.scss
@@ -50,7 +50,13 @@
   line-height: 0;
   will-change: background-color;
 
-  &:hover {
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-b08);
+    }
+  }
+
+  &:active {
     background-color: var(--color-w10);
   }
 

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss
@@ -70,7 +70,14 @@ button.platform-tag {
   --platform-tag-color: #9585f9;
 }
 
-.filter-section .platform-tag[data-active]:hover {
+@media (hover: hover) {
+  .filter-section .platform-tag[data-active]:hover {
+    color: #fff;
+    background-color: rgba(186, 186, 187, 0.7);
+  }
+}
+
+.filter-section .platform-tag[data-active]:active {
   color: #fff;
   background-color: rgba(186, 186, 187, 0.7);
 }

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/styles.scss
@@ -81,7 +81,13 @@
       }
     }
 
-    &:hover {
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--toc-hover-color);
+      }
+    }
+
+    &:active {
       background-color: var(--toc-hover-color);
     }
 

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -1448,7 +1448,13 @@ button.platform-tag:focus-visible {
   --platform-tag-color: #9585f9;
 }
 
-.filter-section .platform-tag[data-active]:hover {
+@media (hover: hover) {
+  .filter-section .platform-tag[data-active]:hover {
+    color: #fff;
+    background-color: rgba(186, 186, 187, 0.7);
+  }
+}
+.filter-section .platform-tag[data-active]:active {
   color: #fff;
   background-color: rgba(186, 186, 187, 0.7);
 }
@@ -1836,7 +1842,7 @@ button.platform-tag:focus-visible {
 
 :root {
   --toc-hover-color: var(--color-b08);
-  --toc-font: 400 13px/20px var(--font-family-default);
+  --toc-font: 400 13px/24px var(--font-family-default);
   --toc-color: var(--color-text);
 }
 
@@ -1897,7 +1903,12 @@ button.platform-tag:focus-visible {
   filter: invert(0);
 }
 
-.toc--button:hover {
+@media (hover: hover) {
+  .toc--button:hover {
+    background-color: var(--toc-hover-color);
+  }
+}
+.toc--button:active {
   background-color: var(--toc-hover-color);
 }
 
@@ -1907,8 +1918,6 @@ button.platform-tag:focus-visible {
 }
 
 .toc--link {
-  display: inline-flex;
-  align-items: center;
   box-sizing: border-box;
   width: 100%;
   height: calc(100% - 16px);

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js