Merge remote-tracking branch 'origin/epic/esl-carousel' into main-beta

exadel-inc · Jul 18, 2023 · 9088365 · 9088365
2 parents d71cd10 + 3e77a60
commit 9088365
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 27 deletions.
diff --git a/pages/src/common/card.less b/pages/src/common/card.less
@@ -4,7 +4,7 @@
   height: 100%;
   flex-direction: column;
   background: #fff;
-  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, .3);
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
 
   &-image {
     flex: 0 0 auto;

diff --git a/pages/src/esl-carousel-demo/test-carousel.less b/pages/src/esl-carousel-demo/test-carousel.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) '../common/variables.less';
 
 .marquee-carousel [esl-carousel-container] {
   esl-carousel {
@@ -22,7 +22,8 @@
       background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fff'%3E%3Cpath d='M31 40 16 25l15-15 2 2-13 13 13 13z'/%3E%3C/svg%3E");
     }
   }
-  button.arrow-prev::before, button.arrow-next::before {
+  button.arrow-prev::before,
+  button.arrow-next::before {
     width: 60px;
     height: 60px;
   }
@@ -38,14 +39,15 @@
   }
 
   &.main-carousel {
-   div[data-slides-area] {
-     min-height: 500px;
-     gap: 0;
-   }
-   esl-carousel-slide {
-     padding: 0;
-   }
-    button.arrow-prev, button.arrow-next {
+    div[data-slides-area] {
+      min-height: 500px;
+      gap: 0;
+    }
+    esl-carousel-slide {
+      padding: 0;
+    }
+    button.arrow-prev,
+    button.arrow-next {
       @media @lg-xl {
         display: none;
       }

diff --git a/src/modules/esl-carousel/all.less b/src/modules/esl-carousel/all.less
@@ -1,4 +1,4 @@
-@import "./core";
+@import './core';
 
-@import "./plugin/nav/esl-carousel.nav.arrows.less";
-@import "./plugin/nav/esl-carousel.nav.dots.less";
+@import './plugin/nav/esl-carousel.nav.arrows.less';
+@import './plugin/nav/esl-carousel.nav.dots.less';
diff --git a/src/modules/esl-carousel/core.less b/src/modules/esl-carousel/core.less
@@ -1,4 +1,4 @@
-@import "./core/esl-carousel";
+@import './core/esl-carousel';
 
 // Renderer Default
-@import "./renderers/multi/esl-multi-carousel.less";
+@import './renderers/multi/esl-multi-carousel.less';
diff --git a/src/modules/esl-carousel/core/esl-carousel.less b/src/modules/esl-carousel/core/esl-carousel.less
@@ -9,7 +9,6 @@ esl-carousel {
   padding: 5px;
   overflow: hidden;
 
-
   [data-slides-area] {
     position: relative;
     width: 100%;

diff --git a/src/modules/esl-carousel/plugin/nav/esl-carousel.nav.arrows.less b/src/modules/esl-carousel/plugin/nav/esl-carousel.nav.arrows.less
@@ -1,7 +1,11 @@
 /** Arrow navigation styles */
 [esl-carousel-container] {
   --esl-carousel-arrow-size: 40px;
-  --esl-carousel-arrow-offset: clamp(-40px, calc(40px - 40 * 100% / 700), -25px);
+  --esl-carousel-arrow-offset: clamp(
+    -40px,
+    calc(40px - 40 * 100% / 700),
+    -25px
+  );
 
   .esl-carousel-arrow {
     display: flex;
@@ -17,7 +21,7 @@
     appearance: none;
 
     &[disabled] {
-      opacity: .25;
+      opacity: 0.25;
     }
   }
 
@@ -50,8 +54,9 @@
     width: 100%;
     height: 100%;
     margin: auto;
-    opacity: .75;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='5 5 40 40'%3E%3Cpolygon points='31 40 16 25 31 10 33 12 20 25 33 38'/%3E%3C/svg%3E") no-repeat center center;
+    opacity: 0.75;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='5 5 40 40'%3E%3Cpolygon points='31 40 16 25 31 10 33 12 20 25 33 38'/%3E%3C/svg%3E")
+      no-repeat center center;
 
     filter: drop-shadow(0 0 4px #fff);
   }

diff --git a/src/modules/esl-carousel/plugin/nav/esl-carousel.nav.dots.less b/src/modules/esl-carousel/plugin/nav/esl-carousel.nav.dots.less
@@ -4,7 +4,7 @@
   display: block;
   text-align: center;
   opacity: 1;
-  transition: opacity .5s ease-out;
+  transition: opacity 0.5s ease-out;
   cursor: default;
 
   .carousel-dot {
@@ -13,7 +13,7 @@
     height: 9px;
     margin: 0 5px;
     vertical-align: middle;
-    background: rgba(118, 118, 118, .5);
+    background: rgba(118, 118, 118, 0.5);
     border: none;
     border-radius: 24px;
     cursor: pointer;
@@ -22,7 +22,7 @@
   .active-dot {
     width: 11px;
     height: 11px;
-    background: rgba(255, 255, 255, .5);
+    background: rgba(255, 255, 255, 0.5);
     border: 1px solid #bababa;
   }
 }
diff --git a/src/modules/esl-carousel/renderers/multi/esl-multi-carousel.less b/src/modules/esl-carousel/renderers/multi/esl-multi-carousel.less
@@ -1,5 +1,5 @@
 esl-carousel.multi-carousel {
-  @SLIDE_CAROUSEL_ANIMATION: .25s linear;
+  @SLIDE_CAROUSEL_ANIMATION: 0.25s linear;
   &[animating] {
     [data-slides-area] {
       // animation

diff --git a/src/modules/esl-carousel/renderers/multi/esl-multi-carousel.ts b/src/modules/esl-carousel/renderers/multi/esl-multi-carousel.ts
@@ -150,7 +150,7 @@ export class ESLMultiCarouselRenderer extends ESLCarouselRenderer {
       const slideWidth = this.slideWidth + this.gapWidth;
       // calculate offset to move to
       const shiftCount = Math.abs(offset) % slideWidth >= slideWidth / 4 ? 1 : 0;
-      const stageOffset = offset < 0 ? -shiftCount * slideWidth : (shiftCount - 1) * slideWidth;
+      const stageOffset = offset < 0 ? -shiftCount * slideWidth : (shiftCount - 1) * slideWidth - this.gapWidth;
 
       this.carousel.toggleAttribute('animating', true);
       this.$area.style.transform = `translateX(${stageOffset}px)`;

diff --git a/src/modules/esl-footnotes/core/esl-note.less b/src/modules/esl-footnotes/core/esl-note.less
@@ -22,7 +22,8 @@ esl-note {
   }
 
   .esl-note-link {
-    &, &:hover {
+    &,
+    &:hover {
       color: inherit;
       text-decoration: none;
     }