benivo-ui-library 1.2.8 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "benivo-ui-library",
-  "version": "1.2.8",
+  "version": "1.3.2",
   "description": "Benivo UI library",
   "main": "index.js",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^4.3.1",
     "rimraf": "^3.0.2",
-    "swiper": "4.3.3",
+    "swiper": "^6.8.3",
     "terser-webpack-plugin": "^4.2.3"
   }
 }

package/swiper-a11y.less

@@ -1,5 +1,5 @@
 /* a11y */
-.swiper-container .swiper-notification {
+.swiper .swiper-notification {
     position: absolute;
     left: 0;
     top: 0;

package/swiper-effect-cube.less

@@ -1,50 +1,66 @@
-.swiper-container-cube {
+.swiper-cube {
     overflow: visible;
+
     .swiper-slide {
-      pointer-events: none;
-      backface-visibility: hidden;
-      z-index: 1;
-      visibility: hidden;
-      transform-origin: 0 0;
-      width: 100%;
-      height: 100%;
-      .swiper-slide {
         pointer-events: none;
-      }
+        backface-visibility: hidden;
+        z-index: 1;
+        visibility: hidden;
+        transform-origin: 0 0;
+        width: 100%;
+        height: 100%;
+
+        .swiper-slide {
+            pointer-events: none;
+        }
     }
-    &.swiper-container-rtl .swiper-slide {
-      transform-origin: 100% 0;
+
+    &.swiper-rtl .swiper-slide {
+        transform-origin: 100% 0;
     }
+
     .swiper-slide-active {
-      &,
-      & .swiper-slide-active {
-        pointer-events: auto;
-      }
+        &,
+        & .swiper-slide-active {
+            pointer-events: auto;
+        }
     }
+
     .swiper-slide-active,
     .swiper-slide-next,
     .swiper-slide-prev,
     .swiper-slide-next + .swiper-slide {
-      pointer-events: auto;
-      visibility: visible;
+        pointer-events: auto;
+        visibility: visible;
     }
+
     .swiper-slide-shadow-top,
     .swiper-slide-shadow-bottom,
     .swiper-slide-shadow-left,
     .swiper-slide-shadow-right {
-      z-index: 0;
-      backface-visibility: hidden;
+        z-index: 0;
+        backface-visibility: hidden;
     }
+
     .swiper-cube-shadow {
-      position: absolute;
-      left: 0;
-      bottom: 0px;
-      width: 100%;
-      height: 100%;
-      background: #000;
-      opacity: 0.6;
-      -webkit-filter: blur(50px);
-      filter: blur(50px);
-      z-index: 0;
+        position: absolute;
+        left: 0;
+        bottom: 0px;
+        width: 100%;
+        height: 100%;
+        opacity: 0.6;
+        z-index: 0;
+
+        &:before {
+            content: '';
+            background: #000;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            -webkit-filter: blur(50px);
+            filter: blur(50px);
+        }
     }
-  }
+}

package/swiper-effect-fade.less

@@ -1,5 +1,5 @@
-.swiper-container-fade {
-    &.swiper-container-free-mode {
+.swiper-fade {
+    &.swiper-free-mode {
         .swiper-slide {
             transition-timing-function: ease-out;
         }
@@ -15,7 +15,6 @@
     }
 
     .swiper-slide-active {
-
         &,
         & .swiper-slide-active {
             pointer-events: auto;

package/swiper-effect-flip.less

@@ -1,4 +1,4 @@
-.swiper-container-flip {
+.swiper-flip {
     overflow: visible;
 
     .swiper-slide {
@@ -12,7 +12,6 @@
     }
 
     .swiper-slide-active {
-
         &,
         & .swiper-slide-active {
             pointer-events: auto;

package/swiper-lazy.less

@@ -1,10 +1,10 @@
 /* Preloader */
 :root {
     /*
-    --swiper-preloader-color: var(--swiper-theme-color);
-    */
-  }
-  .swiper-lazy-preloader {
+  --swiper-preloader-color: var(--swiper-theme-color);
+  */
+}
+.swiper-lazy-preloader {
     width: 42px;
     height: 42px;
     position: absolute;
@@ -19,16 +19,16 @@
     border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
     border-radius: 50%;
     border-top-color: transparent;
-  }
-  
-  .swiper-lazy-preloader-white {
+}
+
+.swiper-lazy-preloader-white {
     --swiper-preloader-color: #fff;
-  }
-  .swiper-lazy-preloader-black {
+}
+.swiper-lazy-preloader-black {
     --swiper-preloader-color: #000;
-  }
-  @keyframes swiper-preloader-spin {
+}
+@keyframes swiper-preloader-spin {
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
+}

package/swiper-navigation.less

@@ -9,20 +9,20 @@
       .looper( @index + 1 );
     }
   }
-  
-  :root {
+
+:root {
     --swiper-navigation-size: 44px;
     /*
-    --swiper-navigation-color: var(--swiper-theme-color);
-    */
-  }
+  --swiper-navigation-color: var(--swiper-theme-color);
+  */
+}
 .swiper-button-prev,
 .swiper-button-next {
     position: absolute;
     top: 50%;
     width: calc(var(--swiper-navigation-size) / 44 * 27);
     height: var(--swiper-navigation-size);
-    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
+    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
     z-index: 10;
     cursor: pointer;
     display: flex;
@@ -45,58 +45,28 @@
         font-variant: initial;
         line-height: 1;
     }
-
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        width: 13px;
-        height: 8px;
-        background-position: center;
-        background-size: cover;
-        z-index: 11;
-        background-image: url("https://gpresource.blob.core.windows.net/assets/img/icons/arrow-up-gray.png");
-    }
 }
+
 .swiper-button-prev,
-.swiper-container-rtl .swiper-button-next {
+.swiper-rtl .swiper-button-next {
     &:after {
         content: 'prev';
     }
 
     left: 10px;
     right: auto;
-
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {        
-        -webkit-transform: rotate(-90deg);
-        -moz-transform: rotate(-90deg);
-        -ms-transform: rotate(-90deg);
-        -o-transform: rotate(-90deg);
-        transform: rotate(-90deg);
-    }
 }
+
 .swiper-button-next,
-.swiper-container-rtl .swiper-button-prev {
+.swiper-rtl .swiper-button-prev {
     &:after {
         content: 'next';
     }
 
     right: 10px;
     left: auto;
-
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-        -webkit-transform: rotate(90deg);
-        -moz-transform: rotate(90deg);
-        -ms-transform: rotate(90deg);
-        -o-transform: rotate(90deg);
-        transform: rotate(90deg);
-    }
 }
-  .navigation-color-loop({
-    .swiper-button-prev,
-    .swiper-button-next {
-      &.swiper-button-@{navColorName} {
-        --swiper-navigation-color: @navColorValue;
-      }
-    }
-  });
-  .swiper-button-lock {
+
+.swiper-button-lock {
     display: none;
-  }
+}

package/swiper-pagination.less

@@ -9,63 +9,83 @@
       .looper( @index + 1 );
     }
   }
-  
-  :root {
+
+:root {
     /*
-    --swiper-pagination-color: var(--swiper-theme-color);
-    */
-  }
-  .swiper-pagination {
+  --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 {
     position: absolute;
     text-align: center;
     transition: 300ms opacity;
     transform: translate3d(0, 0, 0);
     z-index: 10;
+
     &.swiper-pagination-hidden {
-      opacity: 0;
+        opacity: 0;
     }
-  }
-  /* Common Styles */
-  .swiper-pagination-fraction,
-  .swiper-pagination-custom,
-  .swiper-container-horizontal > .swiper-pagination-bullets {
+}
+/* Common Styles */
+.swiper-pagination-fraction,
+.swiper-pagination-custom,
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal {
     bottom: 10px;
     left: 0;
     width: 100%;
-  }
-  /* Bullets */
-  .swiper-pagination-bullets-dynamic {
+}
+/* Bullets */
+.swiper-pagination-bullets-dynamic {
     overflow: hidden;
     font-size: 0;
+
     .swiper-pagination-bullet {
-      transform: scale(0.33);
-      position: relative;
+        transform: scale(0.33);
+        position: relative;
     }
+
     .swiper-pagination-bullet-active {
-      transform: scale(1);
+        transform: scale(1);
     }
+
     .swiper-pagination-bullet-active-main {
-      transform: scale(1);
+        transform: scale(1);
     }
+
     .swiper-pagination-bullet-active-prev {
-      transform: scale(0.66);
+        transform: scale(0.66);
     }
+
     .swiper-pagination-bullet-active-prev-prev {
-      transform: scale(0.33);
+        transform: scale(0.33);
     }
+
     .swiper-pagination-bullet-active-next {
-      transform: scale(0.66);
+        transform: scale(0.66);
     }
+
     .swiper-pagination-bullet-active-next-next {
-      transform: scale(0.33);
+        transform: scale(0.33);
     }
-  }
+}
+
 .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: 100%;
-    background: #ced0da;
+    border-radius: 50%;
+    background: var(--swiper-pagination-bullet-inactive-color, #000);
+    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
 
     button& {
         border: none;
@@ -78,87 +98,101 @@
     .swiper-pagination-clickable & {
         cursor: pointer;
     }
+
+    &:only-child {
+        display: none !important;
+    }
 }
-  .swiper-pagination-bullet-active {
-    opacity: 1;
+
+.swiper-pagination-bullet-active {
+    opacity: var(--swiper-pagination-bullet-opacity, 1);
     background: var(--swiper-pagination-color, var(--swiper-theme-color));
-  }
-  
-  .swiper-container-vertical {
-    > .swiper-pagination-bullets {
-      right: 10px;
-      top: 50%;
-      transform: translate3d(0px, -50%, 0);
-      .swiper-pagination-bullet {
-        margin: 6px 0;
+}
+
+.swiper-vertical > .swiper-pagination-bullets,
+.swiper-pagination-vertical.swiper-pagination-bullets {
+    right: 10px;
+    top: 50%;
+    transform: translate3d(0px, -50%, 0);
+
+    .swiper-pagination-bullet {
+        margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
         display: block;
-      }
-      &.swiper-pagination-bullets-dynamic {
+    }
+
+    &.swiper-pagination-bullets-dynamic {
         top: 50%;
         transform: translateY(-50%);
         width: 8px;
+
         .swiper-pagination-bullet {
-          display: inline-block;
-          transition: 200ms transform, 200ms top;
+            display: inline-block;
+            transition: 200ms transform, 200ms top;
         }
-      }
     }
-  }
-  .swiper-container-horizontal {
-    > .swiper-pagination-bullets {
-      .swiper-pagination-bullet {
-        margin: 0 4px;
-      }
-      &.swiper-pagination-bullets-dynamic {
+}
+
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-horizontal.swiper-pagination-bullets {
+    .swiper-pagination-bullet {
+        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+    }
+
+    &.swiper-pagination-bullets-dynamic {
         left: 50%;
         transform: translateX(-50%);
         white-space: nowrap;
+
         .swiper-pagination-bullet {
-          transition: 200ms transform, 200ms left;
+            transition: 200ms transform, 200ms left;
         }
-      }
-    }
-    &.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-      transition: 200ms transform, 200ms right;
     }
-  }
-  /* Progress */
-  .swiper-pagination-progressbar {
+}
+
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    transition: 200ms transform, 200ms right;
+}
+/* Progress */
+.swiper-pagination-progressbar {
     background: rgba(0, 0, 0, 0.25);
     position: absolute;
+
     .swiper-pagination-progressbar-fill {
-      background: var(--swiper-pagination-color, var(--swiper-theme-color));
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      transform: scale(0);
-      transform-origin: left top;
-    }
-    .swiper-container-rtl & .swiper-pagination-progressbar-fill {
-      transform-origin: right top;
-    }
-    .swiper-container-horizontal > &,
-    .swiper-container-vertical > &.swiper-pagination-progressbar-opposite {
-      width: 100%;
-      height: 4px;
-      left: 0;
-      top: 0;
-    }
-    .swiper-container-vertical > &,
-    .swiper-container-horizontal > &.swiper-pagination-progressbar-opposite {
-      width: 4px;
-      height: 100%;
-      left: 0;
-      top: 0;
+        background: var(--swiper-pagination-color, var(--swiper-theme-color));
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        transform: scale(0);
+        transform-origin: left top;
     }
-  }
-  .pagination-color-loop({
-    .swiper-pagination-@{paginationColorName} {
-      --swiper-pagination-color: @paginationColorValue;
+
+    .swiper-rtl & .swiper-pagination-progressbar-fill {
+        transform-origin: right top;
     }
-  });
-  .swiper-pagination-lock {
+
+    .swiper-horizontal > &,
+    &.swiper-pagination-horizontal,
+    .swiper-vertical > &.swiper-pagination-progressbar-opposite,
+    &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+        width: 100%;
+        height: 4px;
+        left: 0;
+        top: 0;
+    }
+
+    .swiper-vertical > &,
+    &.swiper-pagination-vertical,
+    .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
+    &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+        width: 4px;
+        height: 100%;
+        left: 0;
+        top: 0;
+    }
+}
+
+.swiper-pagination-lock {
     display: none;
-  }
+}

package/swiper-scrollbar.less

@@ -4,24 +4,27 @@
     position: relative;
     -ms-touch-action: none;
     background: rgba(0, 0, 0, 0.1);
-    .swiper-container-horizontal > & {
-      position: absolute;
-      left: 1%;
-      bottom: 3px;
-      z-index: 50;
-      height: 5px;
-      width: 98%;
+
+    .swiper-horizontal > & {
+        position: absolute;
+        left: 1%;
+        bottom: 3px;
+        z-index: 50;
+        height: 5px;
+        width: 98%;
     }
-    .swiper-container-vertical > & {
-      position: absolute;
-      right: 3px;
-      top: 1%;
-      z-index: 50;
-      width: 5px;
-      height: 98%;
+
+    .swiper-vertical > & {
+        position: absolute;
+        right: 3px;
+        top: 1%;
+        z-index: 50;
+        width: 5px;
+        height: 98%;
     }
-  }
-  .swiper-scrollbar-drag {
+}
+
+.swiper-scrollbar-drag {
     height: 100%;
     width: 100%;
     position: relative;
@@ -29,10 +32,12 @@
     border-radius: 10px;
     left: 0;
     top: 0;
-  }
-  .swiper-scrollbar-cursor-drag {
+}
+
+.swiper-scrollbar-cursor-drag {
     cursor: move;
-  }
-  .swiper-scrollbar-lock {
+}
+
+.swiper-scrollbar-lock {
     display: none;
-  }
+}

package/swiper-thumb.less

@@ -1,5 +1,5 @@
-.swiper-container-thumbs {
+.swiper-thumbs {
     .swiper-slide-thumb-active {
-      // Styles for active thumb slide
+        // Styles for active thumb slide
     }
-  }
+}

package/swiper-zoom.less

@@ -5,16 +5,16 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-  
+
     > img,
     > svg,
     > canvas {
-      max-width: 100%;
-      max-height: 100%;
-      object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
     }
-  }
-  
-  .swiper-slide-zoomed {
+}
+
+.swiper-slide-zoomed {
     cursor: move;
-  }
+}

package/swiper.less

@@ -150,7 +150,7 @@
   }
 }
 
-.swiper-container-vertical.swiper-container-css-mode {
+.swiper-vertical.swiper-css-mode {
   >.swiper-wrapper {
     scroll-snap-type: y mandatory;
   }