refactoring scroll styles (#7788)

Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Feb 1, 2024 · a2d3462 · a2d3462
1 parent a016d56
commit a2d3462
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 90 deletions.
diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss
@@ -50,8 +50,40 @@
   padding-inline-start: 0;
   padding-inline-end: 0;
 
-  &+span {
+  & + span {
     float: none;
     width: auto;
   }
-}
+}
+
+@mixin scrollRules {
+  &,
+  * {
+    @-moz-document url-prefix() {
+      scrollbar-width: thin;
+      scrollbar-color: $border transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: 4px solid rgba(0, 0, 0, 0);
+      background-clip: padding-box;
+      border-radius: 32px;
+      background-color: $border;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      border: 2px solid rgba(0, 0, 0, 0);
+      background-color: $foreground-light;
+    }
+  }
+}
diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss
@@ -59,6 +59,8 @@ body {
 }
 
 .sd-root-modern {
+  @include scrollRules;
+
   -webkit-font-smoothing: antialiased;
   --sd-mobile-width: 600px;
   --sd-timer-size: calc(18 * #{$base-unit});
@@ -71,33 +73,6 @@ body {
     // z-index: 1;
     position: relative;
   }
-
-  @-moz-document url-prefix() {
-    scrollbar-width: thin;
-    scrollbar-color: $border transparent;
-  }
-
-  ::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-    background-color: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border: 4px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    border-radius: 32px;
-    background-color: $border;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    border: 2px solid rgba(0, 0, 0, 0);
-    background-color: $foreground-light;
-  }
 }
 
 .sd-root-modern--animation-disabled * {
@@ -112,33 +87,6 @@ body {
   height: 100%;
   overflow: auto;
   position: static;
-
-  @-moz-document url-prefix() {
-    scrollbar-width: thin;
-    scrollbar-color: $border transparent;
-  }
-
-  &::-webkit-scrollbar {
-    width: 12px;
-    height: 12px;
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border: 4px solid rgba(0, 0, 0, 0);
-    background-clip: padding-box;
-    border-radius: 32px;
-    background-color: $border;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    border: 2px solid rgba(0, 0, 0, 0);
-    background-color: $foreground-light;
-  }
 }
 
 .sd-root-modern--mobile {
@@ -162,38 +110,6 @@ body {
   }
 }
 
-@-moz-document url-prefix() {
-  .sv-popup .sv-popup__scrolling-content {
-    scrollbar-width: thin;
-    scrollbar-color: $border transparent;
-  }
+.sv-popup .sv-popup__scrolling-content {
+  @include scrollRules;
 }
-
-.sv-popup {
-  .sv-popup__scrolling-content {
-    *,
-    & {
-      &::-webkit-scrollbar {
-        width: 12px;
-        height: 12px;
-        background-color: $background;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border: 4px solid rgba(0, 0, 0, 0);
-        background-clip: padding-box;
-        border-radius: 32px;
-        background-color: $border;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        border: 2px solid rgba(0, 0, 0, 0);
-        background-color: $foreground-light;
-      }
-    }
-  }
-}