fix(core): hide scrollbar where required in FireFix

fixes #4189
framework7io · Jun 12, 2023 · f4c4c7e · f4c4c7e
1 parent 84eaf76
commit f4c4c7e
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 33 deletions.
diff --git a/src/core/components/app/app.less b/src/core/components/app/app.less
@@ -36,21 +36,7 @@ body {
   font-size: var(--f7-font-size);
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
-  &::-webkit-scrollbar {
-    width: 0px;
-    background: transparent;
-    position: relative;
-  }
-  &::-webkit-scrollbar-track {
-    box-shadow: none;
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    outline: none;
-    border-radius: 9999px;
-    position: relative;
-  }
+  .no-scrollbar();
 }
 .dark body,
 body.dark {

diff --git a/src/core/components/breadcrumbs/breadcrumbs.less b/src/core/components/breadcrumbs/breadcrumbs.less
@@ -9,10 +9,7 @@
   overflow: auto;
   white-space: nowrap;
   padding: var(--f7-breadcrumbs-padding);
-  &::-webkit-scrollbar {
-    display: none;
-    opacity: 0;
-  }
+  .no-scrollbar();
 }
 .breadcrumbs-separator,
 .breadcrumbs-item,

diff --git a/src/core/components/picker/picker.less b/src/core/components/picker/picker.less
@@ -104,10 +104,7 @@
   height: 100%;
   box-sizing: border-box;
   padding: var(--f7-picker-scroll-padding, 0px) 0px;
-  &::-webkit-scrollbar {
-    display: none;
-    opacity: 0;
-  }
+  .no-scrollbar();
 }
 .picker-item {
   height: var(--f7-picker-item-height);

diff --git a/src/core/components/text-editor/text-editor.less b/src/core/components/text-editor/text-editor.less
@@ -115,9 +115,7 @@ button.text-editor-button {
     justify-content: flex-start !important;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    .no-scrollbar();
     .text-editor-button-divider {
       height: 100%;
     }

diff --git a/src/core/components/toolbar/toolbar.less b/src/core/components/toolbar/toolbar.less
@@ -193,13 +193,7 @@
   .toolbar-inner {
     justify-content: flex-start;
     .scrollable();
-    &::-webkit-scrollbar {
-      display: none !important;
-      width: 0 !important;
-      height: 0 !important;
-      -webkit-appearance: none;
-      opacity: 0 !important;
-    }
+    .no-scrollbar();
   }
   .tab-link,
   .link {

diff --git a/src/core/less/mixins.less b/src/core/less/mixins.less
@@ -257,3 +257,25 @@
     }
   }
 }
+
+.no-scrollbar() {
+  scrollbar-width: none;
+  scrollbar-color: transparent;
+  &::-webkit-scrollbar {
+    appearance: none;
+    width: 0px;
+    display: none;
+    opacity: 0;
+    background: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    outline: none;
+    border-radius: 9999px;
+    position: relative;
+  }
+}