benivo-ui-library 1.2.5

package/swiper-navigation.less

@@ -0,0 +1,102 @@
+.navigation-color-loop(@ruleset) when (length( @colors ) >= 1) {
+    @length: length(@colors);
+    .looper( 1 );
+    .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
+      @navPair: extract(@colors, @index);
+      @navColorName: extract(@navPair, 1);
+      @navColorValue: extract(@navPair, 2);
+      @ruleset();
+      .looper( @index + 1 );
+    }
+  }
+  
+  :root {
+    --swiper-navigation-size: 44px;
+    /*
+    --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);
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--swiper-navigation-color, var(--swiper-theme-color));
+
+    &.swiper-button-disabled {
+        opacity: 0.35;
+        cursor: auto;
+        pointer-events: none;
+    }
+
+    &:after {
+        font-family: swiper-icons;
+        font-size: var(--swiper-navigation-size);
+        text-transform: none !important;
+        letter-spacing: 0;
+        text-transform: none;
+        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 {
+    &: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 {
+    &: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 {
+    display: none;
+  }

package/swiper-pagination.less

@@ -0,0 +1,164 @@
+.pagination-color-loop(@ruleset) when (length( @colors ) >= 1) {
+    @length: length(@colors);
+    .looper( 1 );
+    .looper( @index ) when ( @index <= @length ) and (length(extract( @colors, @index )) = 2) {
+      @paginationPair: extract(@colors, @index);
+      @paginationColorName: extract(@paginationPair, 1);
+      @paginationColorValue: extract(@paginationPair, 2);
+      @ruleset();
+      .looper( @index + 1 );
+    }
+  }
+  
+  :root {
+    /*
+    --swiper-pagination-color: var(--swiper-theme-color);
+    */
+  }
+  .swiper-pagination {
+    position: absolute;
+    text-align: center;
+    transition: 300ms opacity;
+    transform: translate3d(0, 0, 0);
+    z-index: 10;
+    &.swiper-pagination-hidden {
+      opacity: 0;
+    }
+  }
+  /* Common Styles */
+  .swiper-pagination-fraction,
+  .swiper-pagination-custom,
+  .swiper-container-horizontal > .swiper-pagination-bullets {
+    bottom: 10px;
+    left: 0;
+    width: 100%;
+  }
+  /* Bullets */
+  .swiper-pagination-bullets-dynamic {
+    overflow: hidden;
+    font-size: 0;
+    .swiper-pagination-bullet {
+      transform: scale(0.33);
+      position: relative;
+    }
+    .swiper-pagination-bullet-active {
+      transform: scale(1);
+    }
+    .swiper-pagination-bullet-active-main {
+      transform: scale(1);
+    }
+    .swiper-pagination-bullet-active-prev {
+      transform: scale(0.66);
+    }
+    .swiper-pagination-bullet-active-prev-prev {
+      transform: scale(0.33);
+    }
+    .swiper-pagination-bullet-active-next {
+      transform: scale(0.66);
+    }
+    .swiper-pagination-bullet-active-next-next {
+      transform: scale(0.33);
+    }
+  }
+.swiper-pagination-bullet {
+    width: 8px;
+    height: 8px;
+    display: inline-block;
+    border-radius: 100%;
+    background: #ced0da;
+
+    button& {
+        border: none;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        appearance: none;
+    }
+
+    .swiper-pagination-clickable & {
+        cursor: pointer;
+    }
+}
+  .swiper-pagination-bullet-active {
+    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;
+        display: block;
+      }
+      &.swiper-pagination-bullets-dynamic {
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        .swiper-pagination-bullet {
+          display: inline-block;
+          transition: 200ms transform, 200ms top;
+        }
+      }
+    }
+  }
+  .swiper-container-horizontal {
+    > .swiper-pagination-bullets {
+      .swiper-pagination-bullet {
+        margin: 0 4px;
+      }
+      &.swiper-pagination-bullets-dynamic {
+        left: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+        .swiper-pagination-bullet {
+          transition: 200ms transform, 200ms left;
+        }
+      }
+    }
+    &.swiper-container-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;
+    }
+  }
+  .pagination-color-loop({
+    .swiper-pagination-@{paginationColorName} {
+      --swiper-pagination-color: @paginationColorValue;
+    }
+  });
+  .swiper-pagination-lock {
+    display: none;
+  }

package/swiper-scrollbar.less

@@ -0,0 +1,38 @@
+/* Scrollbar */
+.swiper-scrollbar {
+    border-radius: 10px;
+    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-container-vertical > & {
+      position: absolute;
+      right: 3px;
+      top: 1%;
+      z-index: 50;
+      width: 5px;
+      height: 98%;
+    }
+  }
+  .swiper-scrollbar-drag {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    left: 0;
+    top: 0;
+  }
+  .swiper-scrollbar-cursor-drag {
+    cursor: move;
+  }
+  .swiper-scrollbar-lock {
+    display: none;
+  }

package/swiper-thumb.less

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

package/swiper-zoom.less

@@ -0,0 +1,20 @@
+.swiper-zoom-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  
+    > img,
+    > svg,
+    > canvas {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: contain;
+    }
+  }
+  
+  .swiper-slide-zoomed {
+    cursor: move;
+  }

package/swiper.less

@@ -0,0 +1,168 @@
+//@themeColor: #007aff;
+@themeColor: @primary-color;
+@colors: white #ffffff, black #000000;
+
+@font-face {
+  @fontBase64: 'd09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA';
+  font-family: 'swiper-icons';
+  src: url('data:application/font-woff;charset=utf-8;base64, @{fontBase64}') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+:root {
+  --swiper-theme-color: @themeColor;
+}
+
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  /* Fix of Webkit flickering */
+  z-index: 1;
+}
+
+.swiper-container-vertical>.swiper-wrapper {
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: flex;
+  transition-property: transform;
+  box-sizing: content-box;
+}
+
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+  transform: translate3d(0px, 0, 0);
+}
+
+.swiper-container-multirow>.swiper-wrapper {
+  flex-wrap: wrap;
+}
+
+.swiper-container-multirow-column>.swiper-wrapper {
+  flex-wrap: wrap;
+  flex-direction: column;
+}
+
+.swiper-container-free-mode>.swiper-wrapper {
+  transition-timing-function: ease-out;
+  margin: 0 auto;
+}
+
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transition-property: transform;
+}
+
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+
+/* Auto Height */
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+  height: auto;
+}
+
+.swiper-container-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+
+/* 3D Effects */
+.swiper-container-3d {
+  perspective: 1200px;
+
+  .swiper-wrapper,
+  .swiper-slide,
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom,
+  .swiper-cube-shadow {
+    transform-style: preserve-3d;
+  }
+
+  .swiper-slide-shadow-left,
+  .swiper-slide-shadow-right,
+  .swiper-slide-shadow-top,
+  .swiper-slide-shadow-bottom {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .swiper-slide-shadow-left {
+    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+
+  .swiper-slide-shadow-right {
+    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+
+  .swiper-slide-shadow-top {
+    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+
+  .swiper-slide-shadow-bottom {
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+  }
+}
+
+/* CSS Mode */
+.swiper-container-css-mode {
+  >.swiper-wrapper {
+    overflow: auto;
+    scrollbar-width: none;
+    /* For Firefox */
+    -ms-overflow-style: none;
+
+    /* For Internet Explorer and Edge */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  >.swiper-wrapper>.swiper-slide {
+    scroll-snap-align: start start;
+  }
+}
+
+.swiper-container-horizontal.swiper-container-css-mode {
+  >.swiper-wrapper {
+    scroll-snap-type: x mandatory;
+  }
+}
+
+.swiper-container-vertical.swiper-container-css-mode {
+  >.swiper-wrapper {
+    scroll-snap-type: y mandatory;
+  }
+}
+
+@import "./swiper-a11y.less";
+@import "./swiper-effect-cube.less";
+@import "./swiper-effect-fade.less";
+@import "./swiper-effect-flip.less";
+@import "./swiper-lazy.less";
+@import "./swiper-navigation.less";
+@import "./swiper-pagination.less";
+@import "./swiper-scrollbar.less";
+@import "./swiper-thumb.less";
+@import "./swiper-zoom.less";

package/tooltip.less

@@ -0,0 +1,168 @@
+@tooltip-border-color: rgba(79, 90, 101, 0.27);
+@tooltip-bg: @white;
+@tooltip-border: solid 0.5px @tooltip-border-color;
+@tooltip-box-shadow: 0 1px 4px 0 rgba(79, 90, 101, 0.3);
+@tooltip-font-size: @small-font-size;
+
+.tooltip {
+    background: @tooltip-bg;
+    border: @tooltip-border;
+    padding: @spacer;
+    font-size: @tooltip-font-size;
+    font-weight: @font-weight-normal;
+    width: 210px;
+    position: absolute;
+    z-index: 2;
+    right: 64px;
+    top: 18px;
+    .border-radius(@border-radius);
+    .box-shadow (@tooltip-box-shadow);
+    border-top-right-radius: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.35s, opacity 0.35s ease-in-out;
+
+    .tooltip-inner {
+        position: relative;
+
+        .triangle-box {
+            position: absolute;
+            right: -55px;
+            top: -16px;
+
+            .triangle-with-shadow {
+                width: 40px;
+                height: 40px;
+                position: relative;
+                overflow: hidden;
+
+                &:before, &:after {
+                    content: "";
+                    position: absolute;
+                    width: 31px;
+                    height: 85px;
+                    background: @tooltip-bg;
+                    border: @tooltip-border;
+                }
+
+                &:before {
+                    transform: rotate(90deg);
+                    top: -57px;
+                    left: -37px;
+                    z-index: 2;
+                }
+
+                &:after {
+                    transform: rotate(38deg);
+                    top: -34px;
+                    left: -19px;
+                    .box-shadow (@tooltip-box-shadow);
+                    z-index: 1;
+                }
+            }
+        }
+    }
+
+    &-right {
+        .border-radius(@border-radius);
+        border-top-left-radius: 0;
+        left: 64px;
+        right: unset;
+        top: 7px;
+
+        .tooltip-inner {
+            position: relative;
+
+            .triangle-box {
+                left: -55px;
+                right: unset;
+
+                .triangle-with-shadow {
+                    &:before {
+                        left: 42px;
+                    }
+
+                    &:after {
+                        transform: rotate(148deg);
+                        left: 21px;
+                    }
+                }
+            }
+        }
+    }
+
+    &-bottom {
+        padding: 0;
+        top: inherit;
+        bottom: 25px;
+        right: 0;
+
+        .tooltip-inner {
+            padding: 1rem;
+
+            &:after {
+                content: '';
+                display: block;
+                width: 15px;
+                height: 15px;
+                position: absolute;
+                bottom: -7px;
+                right: 10px;
+                background-color: @tooltip-bg;
+                .box-shadow(-1px -1px 0 @tooltip-border-color);
+                .transform(rotate(-135deg));
+            }
+
+            .triangle-box {
+                display: none;
+            }
+        }
+    }
+
+    &-top {
+        padding: 0;
+        top: 25px;
+        right: 0;
+
+        .tooltip-inner {
+            padding: 1rem;
+
+            &:after {
+                content: '';
+                display: block;
+                width: 15px;
+                height: 15px;
+                position: absolute;
+                top: -7px;
+                right: 10px;
+                background-color: @tooltip-bg;
+                .box-shadow(-1px -1px 0 @tooltip-border-color);
+                .transform(rotate(45deg));
+            }
+
+            .triangle-box {
+                display: none;
+            }
+        }
+    }
+}
+
+.has-tooltip {
+    &.locked {
+        .info {
+            display: none;
+        }
+
+        &:hover {
+            .tooltip {
+                visibility: visible;
+                opacity: 1;
+            }
+        }
+    }
+
+    .info:hover ~ .tooltip {
+        visibility: visible;
+        opacity: 1;
+    }
+}