[edit] offcanvas scrollbar effect

Joy-port · Aug 17, 2021 · f7e58b5 · f7e58b5
1 parent 7ba0c36
commit f7e58b5
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 185 deletions.
diff --git a/app/assets/style/all.css b/app/assets/style/all.css
diff --git a/app/assets/style/all.css.map b/app/assets/style/all.css.map
diff --git a/app/assets/style/components/_scrollbar.scss b/app/assets/style/components/_scrollbar.scss
@@ -1,16 +1,20 @@
 .scroll-bar{
-    //捲軸底色
-    &::-webkit-scrollbar-track {
-      background-color: map-get($theme-colors, "white");
-    }
     //捲軸寬度
     &::-webkit-scrollbar {
       width: 2px;
       background-color: black;
     }
+    //捲軸底色
+    &::-webkit-scrollbar-track {
+      background-color: map-get($theme-colors, "white");
+    }
     //捲軸本體顏色
     &::-webkit-scrollbar-thumb {
       background-color: map-get($theme-colors, "secondary");
     }
+    //hover本體顏色改動效果
+    &::-webkit-scrollbar-thumb:hover {
+      background-color:  map-get($theme-colors, "primary");
+    }
 
 }
diff --git a/app/assets/style/utilities/_sizing.scss b/app/assets/style/utilities/_sizing.scss
@@ -3,17 +3,18 @@
 .w-40px {
   width: 40px;
 }
-
 .w-65 {
   width: 65px;
 }
 .w-120 {
   width: 120px;
 }
-.w-128{
+.w-128 {
   width: 128px;
 }
-
+.w-540 {
+  width: 540px;
+}
 .w-md-350 {
   @include media-breakpoint-up(md) {
     width: 350px;

diff --git a/app/assets/style/utilities/_spacing.scss b/app/assets/style/utilities/_spacing.scss
@@ -14,8 +14,8 @@
   padding-bottom: 44px;
 }
 
-.mt-60{
-  margin-top: 60px;
+.pt-60 {
+  padding-top: 60px;
 }
 
 .mb-42 {
@@ -39,10 +39,4 @@
   @include media-breakpoint-up(md) {
     margin-bottom: 42px;
   }
-}
-
-.mt-md-82 {
-  @include media-breakpoint-up(md) {
-    margin-top: 82px;
-  }
-}
+}