feat(pagination): more pagination bullet CSS variables (#4927)

* feat(pagination): add pagination bullet CSS variables

* feat(pagination): add horizontal & vertical gaps variables

Co-authored-by: Vladimir Kharlampidi <nolimits4web@gmail.com>

src/modules/pagination/pagination.less

@@ -1,6 +1,14 @@
 :root {
   /*
   --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
   */
 }
 .swiper-pagination {
@@ -50,12 +58,12 @@
   }
 }
 .swiper-pagination-bullet {
-  width: 8px;
-  height: 8px;
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
   display: inline-block;
   border-radius: 50%;
-  background: #000;
-  opacity: 0.2;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
   button& {
     border: none;
     margin: 0;
@@ -72,7 +80,7 @@
   }
 }
 .swiper-pagination-bullet-active {
-  opacity: 1;
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
 }
 
@@ -82,7 +90,7 @@
   top: 50%;
   transform: translate3d(0px, -50%, 0);
   .swiper-pagination-bullet {
-    margin: 6px 0;
+    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
     display: block;
   }
   &.swiper-pagination-bullets-dynamic {
@@ -98,7 +106,7 @@
 .swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-horizontal.swiper-pagination-bullets {
   .swiper-pagination-bullet {
-    margin: 0 4px;
+    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
   }
   &.swiper-pagination-bullets-dynamic {
     left: 50%;

src/modules/pagination/pagination.scss

@@ -3,6 +3,14 @@
 :root {
   /*
   --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
   */
 }
 .swiper-pagination {
@@ -52,12 +60,12 @@
   }
 }
 .swiper-pagination-bullet {
-  width: 8px;
-  height: 8px;
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
   display: inline-block;
   border-radius: 50%;
-  background: #000;
-  opacity: 0.2;
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
   @at-root button#{&} {
     border: none;
     margin: 0;
@@ -74,7 +82,7 @@
   }
 }
 .swiper-pagination-bullet-active {
-  opacity: 1;
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
   background: var(--swiper-pagination-color, var(--swiper-theme-color));
 }
 
@@ -84,7 +92,7 @@
   top: 50%;
   transform: translate3d(0px, -50%, 0);
   .swiper-pagination-bullet {
-    margin: 6px 0;
+    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
     display: block;
   }
   &.swiper-pagination-bullets-dynamic {
@@ -100,7 +108,7 @@
 .swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-horizontal.swiper-pagination-bullets {
   .swiper-pagination-bullet {
-    margin: 0 4px;
+    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
   }
   &.swiper-pagination-bullets-dynamic {
     left: 50%;