Added verticalScroll graphic changes #45

zetareticoli · Jun 7, 2022 · b89ea49 · b89ea49
1 parent 2b86461
commit b89ea49
Showing 1 changed file with 46 additions and 22 deletions.
diff --git a/lib/src/fullpage/fullpage.scss b/lib/src/fullpage/fullpage.scss
@@ -1,25 +1,25 @@
-// Features settings
-//
-// Changing $verticalScroll to 'true' changes the scroll direction
-// Changing $slidesNavigation to 'true' enables the left/right navigation arrows
-$verticalScroll: false;
+// Settings
+// Set $verticalScroll to 'true' changes the scroll direction
+// Set $slidesNavigation to 'true' enables the left/right navigation arrows
+$verticalScroll: true;
 $slidesNavigation: true;
 
 // Component styles
 
 [data-fullpage] {
   --fullpage-height: 100vh; // Set the fullpage total height, slides inherits this value
-  @if verticalScroll == true {
+  @if $verticalScroll == true {
     --fullpage-direction: y; // DONT CHANGE - Set the fullpage direction to axis-y
   } @else {
     --fullpage-direction: x; // DONT CHANGE - Set the fullpage direction to axis-x (default)
   }
   --fullpage-scroll: mandatory;
+  --slide-content-padding: calc(var(--slide-padding) * 2);
   --slide-size: 100%;
   --slide-snap-align: start;
   --slide-padding: 2rem;
-  --slide-arrow-color: black;
-  --slide-arrow-padding: 2rem;
+  --slide-arrow-color: #000;
+  --slide-arrow-size: .675rem;
 
   position: relative;
   width: 100%;
@@ -46,7 +46,7 @@ $slidesNavigation: true;
     position: relative;
     padding: var(--slide-padding);
     scroll-snap-align: var(--slide-snap-align);
-    @if verticalScroll == true {
+    @if $verticalScroll == true {
       min-height: var(--fullpage-height);
     } @else {
       min-height: 100%;
@@ -55,6 +55,15 @@ $slidesNavigation: true;
     box-sizing: border-box;
   }
 
+  [data-slide-content] {
+    @if $verticalScroll == true {
+      padding-top: var(--slide-content-padding);
+      padding-bottom: var(--slide-content-padding);
+    } @else {
+      padding: var(--slide-content-padding);
+    }
+  }
+
   // Colors - ONLY FOR DEMO
 
   > [data-slide]:nth-child(1) {
@@ -81,33 +90,50 @@ $slidesNavigation: true;
 
     &::before,
     &::after {
+      @if $verticalScroll not true {
+        top: calc(50% - var(--slide-arrow-size));
+        transform: translateY(-50%);
+      }
       position: absolute;
-      top: calc(50% - var(--slide-arrow-padding));
-      transform: translateY(-50%);
       display: block;
       content: "";
       border: solid var(--slide-arrow-color);
       border-width: 0 3px 3px 0;
-      padding: 10px;
+      padding: var(--slide-arrow-size);
       outline: 0;
       z-index: 1;
       pointer-events: none;
     }
 
     &::before {
-      left: var(--slide-arrow-padding);
-      transform: rotate(135deg);
-      -webkit-transform: rotate(135deg);
+      @if $verticalScroll == true {
+        top: var(--slide-padding);
+        transform: rotate(225deg);
+        -webkit-transform: rotate(225deg);
+        left: calc(50% - var(--slide-arrow-size));
+      } @else {
+        left: calc(var(--slide-padding) + var(--slide-arrow-size));
+        transform: rotate(135deg);
+        -webkit-transform: rotate(135deg);
+      }
 
       [data-slides] > [data-slide="1"] ~ & {
         display: none;
       }
     }
 
     &::after {
-      right: var(--slide-arrow-padding);
-      transform: rotate(-45deg);
-      -webkit-transform: rotate(-45deg);
+      @if $verticalScroll == true {
+        top: auto;
+        bottom: var(--slide-padding);
+        left: calc(50% - var(--slide-arrow-size));
+        transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+      } @else {
+        right: calc(var(--slide-padding) + var(--slide-arrow-size));
+        transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+      }
     }
   }
 
@@ -123,11 +149,11 @@ $slidesNavigation: true;
   }
 
   [data-slide-arrow="next"] {
-    right: var(--slide-arrow-padding);
+    right: var(--slide-padding);
   }
 
   [data-slide-arrow="prev"] {
-    left: var(--slide-arrow-padding);
+    left: var(--slide-padding);
   }
 } @else {
   [data-slide-arrow="prev"],
@@ -176,5 +202,3 @@ $slidesNavigation: true;
 // [data-slide="4"]:target ~ [data-slide-nav="dots"] > a:nth-child(4) {
 //   background: white;
 // }
-
-