From f4c4c7e90b1b4eb2a12a587219ba59ff275e9514 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Mon, 12 Jun 2023 10:23:03 +0300
Subject: [PATCH] fix(core): hide scrollbar where required in FireFix

fixes #4189
---
 src/core/components/app/app.less              | 16 +-------------
 .../components/breadcrumbs/breadcrumbs.less   |  5 +----
 src/core/components/picker/picker.less        |  5 +----
 .../components/text-editor/text-editor.less   |  4 +---
 src/core/components/toolbar/toolbar.less      |  8 +------
 src/core/less/mixins.less                     | 22 +++++++++++++++++++
 6 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/src/core/components/app/app.less b/src/core/components/app/app.less
index 7980176b85..9fb17311ea 100644
--- 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
index a54df87f3b..513e5078e0 100644
--- 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
index 3047439cff..41d68eba24 100644
--- 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
index 61ec8b88d3..249bb8c539 100644
--- 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
index 80ca548c93..caba557166 100644
--- 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
index b7639c5bff..a122ab5f0f 100644
--- 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;
+  }
+}