Fix attempting to add ::before on scrollbar

Saltssaumure · Mar 24, 2023 · 6a36188 · 6a36188
1 parent 80b93d5
commit 6a36188
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "dependencies": {
         "@parcel/config-default": "^2.8.3",
         "@parcel/core": "^2.8.3",
+        "@parcel/transformer-sass": "^2.8.3",
         "@types/node": "^18.15.3",
         "salt-bd-scss": "^1.0.0",
         "prettier": "^2.8.4",

diff --git a/scss/_scrollbar.scss b/scss/_scrollbar.scss
@@ -15,7 +15,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        @include boxes.box;
+        @include boxes.box($isScrollbar: true);
     }
 
     &::-webkit-scrollbar-track {
@@ -32,7 +32,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-        @include boxes.box;
+        @include boxes.box($isScrollbar: true);
         background: $grey;
     }
 
@@ -46,7 +46,7 @@
 
     &:start:decrement,
     &:end:increment {
-        @include boxes.box;
+        @include boxes.box($isScrollbar: true);
         width: 18px;
         height: 18px;
     }

diff --git a/scss/top/_boxes.scss b/scss/top/_boxes.scss
@@ -1,6 +1,6 @@
 @use "vars-scss" as *;
 
-@mixin box($isInset: false, $isRotate: false) {
+@mixin box($isInset: false, $isRotate: false, $isScrollbar: false) {
     position: relative;
     border: 1px solid;
 
@@ -18,28 +18,30 @@
         }
     }
 
-    &::before {
-        content: " ";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 1px solid;
-        pointer-events: none;
-        z-index: 1;
-
-        @if $isInset {
-            border-color: $darkgrey $lightgrey $lightgrey $darkgrey;
-        }
+    @if not $isScrollbar {
+        &::before {
+            content: " ";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border: 1px solid;
+            pointer-events: none;
+            z-index: 1;
 
-        @else {
-            @if $isRotate {
-                border-color: $lightgrey $lightgrey $darkgrey $darkgrey;
+            @if $isInset {
+                border-color: $darkgrey $lightgrey $lightgrey $darkgrey;
             }
 
             @else {
-                border-color: $lightgrey $darkgrey $darkgrey $lightgrey;
+                @if $isRotate {
+                    border-color: $lightgrey $lightgrey $darkgrey $darkgrey;
+                }
+
+                @else {
+                    border-color: $lightgrey $darkgrey $darkgrey $lightgrey;
+                }
             }
         }
     }