feat(navigation): more CSS variables to control appearance and position

nolimits4web · Jan 24, 2023 · 6db9439 · 6db9439
1 parent cfad536
commit 6db9439
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/src/modules/navigation/navigation.less b/src/modules/navigation/navigation.less
@@ -1,14 +1,15 @@
 :root {
   --swiper-navigation-size: 44px;
   /*
-  --swiper-navigation-offset: 10px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
   --swiper-navigation-color: var(--swiper-theme-color);
   */
 }
 .swiper-button-prev,
 .swiper-button-next {
   position: absolute;
-  top: 50%;
+  top: var(--swiper-navigation-top-offset, 50%);
   width: calc(var(--swiper-navigation-size) / 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@@ -45,15 +46,15 @@
   &:after {
     content: 'prev';
   }
-  left: var(--swiper-navigation-offset, 10px);
+  left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
 .swiper-button-next,
 .swiper-rtl .swiper-button-prev {
   &:after {
     content: 'next';
   }
-  right: var(--swiper-navigation-offset, 10px);
+  right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
 .swiper-button-lock {

diff --git a/src/modules/navigation/navigation.scss b/src/modules/navigation/navigation.scss
@@ -3,15 +3,16 @@
   :root {
     --swiper-navigation-size: 44px;
     /*
-  --swiper-navigation-color: var(--swiper-theme-color);
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
   --swiper-navigation-color: var(--swiper-theme-color);
   */
   }
 }
 .swiper-button-prev,
 .swiper-button-next {
   position: absolute;
-  top: 50%;
+  top: var(--swiper-navigation-top-offset, 50%);
   width: calc(var(--swiper-navigation-size) / 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@@ -48,15 +49,15 @@
   &:after {
     content: 'prev';
   }
-  left: var(--swiper-navigation-offset, 10px);
+  left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
 .swiper-button-next,
 .swiper-rtl .swiper-button-prev {
   &:after {
     content: 'next';
   }
-  right: var(--swiper-navigation-offset, 10px);
+  right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
 .swiper-button-lock {