@syncfusion/ej2-navigations 21.2.8 → 22.1.34

package/styles/carousel/_fluent-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $primary-text-color !default;
 $carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fusionnew-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $primary-text-color !default;
 $carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 2px !default;
 $carousel-indicator-bar-height: 5px !default;
 $carousel-indicator-bar-width: 20px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_highcontrast-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $message-font !default;
 $carousel-indicator-bar-border: 1px solid rgba($message-font, .4) !default;
 $carousel-indicator-bar-bg-active: $selection-border !default;
 $carousel-indicator-border-color-focus: $shadow !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_highcontrast-light-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $selection-font !default;
 $carousel-indicator-bar-border: 1px solid rgba($selection-font, .4) !default;
 $carousel-indicator-bar-bg-active: $selection-border !default;
 $carousel-indicator-border-color-focus: $message-font !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_layout.scss

@@ -17,6 +17,10 @@
       width: 100%;
     }
 
+    .e-carousel-items.e-swipe-start {
+      cursor: pointer;
+    }
+
     &.e-partial {
       .e-carousel-slide-container {
         padding: 0 100px;
@@ -29,15 +33,15 @@
           padding: 0 50px;
         }
       }
+    }
 
-      .e-carousel-items {
-        width: calc(var(--carousel-items-count) * 100%);
-        display: flex;
-        flex-direction: row;
-        transition-property: transform;
-        transition-duration: $carousel-animation-duration;
-        transition-timing-function: $carousel-animation-timing-function;
-      }
+    .e-carousel-items {
+      width: calc(var(--carousel-items-count) * 100%);
+      display: flex;
+      flex-direction: row;
+      transition-property: transform;
+      transition-duration: $carousel-animation-duration;
+      transition-timing-function: $carousel-animation-timing-function;
 
       .e-carousel-item {
         height: 100%;
@@ -48,77 +52,43 @@
       }
     }
 
-    &.e-blazor-carousel.e-partial {
+    &.e-blazor-carousel {
       .e-carousel-items {
-        transform: translateX(calc(-100% / var(--carousel-items-count) * (var(--carousel-items-current))));
-        transition: transform $carousel-animation-duration $carousel-animation-timing-function;
+        transform: translateX(calc((-100%/var(--carousel-items-count)) * var(--carousel-items-current)));
+        transition: transform;
       }
     }
 
-    &.e-blazor-carousel.e-partial.e-rtl {
+    &.e-blazor-carousel.e-rtl {
       .e-carousel-items {
-        transform: translateX(calc(100% / var(--carousel-items-count) * (var(--carousel-items-current))));
-        transition: transform $carousel-animation-duration $carousel-animation-timing-function;
+        transform: translateX(calc((100%/var(--carousel-items-count)) * var(--carousel-items-current)));
+        transition: transform;
       }
     }
 
-    &.e-carousel-slide-animation:not(.e-partial) {
-      .e-carousel-item {
-        backface-visibility: hidden;
-        display: none;
-        float: left;
-        height: 100%;
-        margin-right: -100%;
-        position: relative;
-        transition: transform $carousel-animation-duration $carousel-animation-timing-function;
-        width: 100%;
-
-        &.e-prev,
-        &.e-next,
-        &.e-active {
-          display: block;
-        }
-
-        &.e-next:not(.e-transition-start),
-        &.e-active.e-transition-end {
-          transform: translateX(100%);
+    &.e-carousel-fade-animation {
+      .e-carousel-items {
+        &.e-fade-in-out {
+          transition-property: none;
+          animation: fade-in-out $carousel-animation-duration $carousel-animation-timing-function;
         }
 
-        &.e-prev:not(.e-transition-end),
-        &.e-active.e-transition-start {
-          transform: translateX(-100%);
-        }
-      }
-    }
-
-    &.e-carousel-fade-animation:not(.e-partial) {
-      .e-carousel-item {
-        backface-visibility: hidden;
-        display: block;
-        float: left;
-        height: 100%;
-        margin-right: -100%;
-        opacity: 0;
-        position: relative;
-        transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
-        width: 100%;
-        z-index: 0;
+        @keyframes fade-in-out {
+          0% {
+            opacity: 0;
+          }
 
-        &.e-active {
-          opacity: 1;
-          z-index: 1;
+          100% {
+            opacity: 1;
+          }
         }
       }
     }
 
-    &.e-carousel-animation-none:not(.e-partial) {
-      .e-carousel-item {
-        display: none;
-        height: 100%;
-        width: 100%;
-
-        &.e-active {
-          display: block;
+    &.e-carousel-slide-animation {
+      .e-carousel-items {
+        &.e-slide {
+          transition-duration: $carousel-animation-duration;
         }
       }
     }
@@ -130,9 +100,7 @@
         left: 0;
         opacity: 0;
         pointer-events: none;
-        position: absolute;
         top: 0;
-        width: 100%;
 
         &.e-active {
           opacity: 1;
@@ -189,7 +157,7 @@
       width: 100%;
       z-index: 1;
 
-      .e-indicator-bars {
+      &.e-default .e-indicator-bars {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
@@ -220,6 +188,67 @@
           }
         }
       }
+
+      &.e-dynamic {
+        min-height: $carousel-indicator-dynamic-minheight;
+
+        .e-indicator-bars {
+          display: block;
+          overflow: hidden;
+          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
+          white-space: nowrap;
+          width: 80px;
+
+          .e-indicator-bar {
+            border-radius: 50%;
+            display: inline-block;
+            height: 8px;
+            left: calc(32px - calc(16px * var(--carousel-items-current)));
+            margin: 0 4px;
+            opacity: 1;
+            position: relative;
+            transform: scale(.33);
+            transition-duration: $carousel-animation-duration;
+            transition-property: transform, left;
+            transition-timing-function: $carousel-animation-timing-function;
+            white-space: nowrap;
+            width: 8px;
+
+            &.e-active {
+              transform: scale(1);
+            }
+
+            &.e-prev,
+            &.e-next {
+              transform: scale(.66);
+            }
+          }
+        }
+      }
+
+      &.e-fraction {
+        min-height: $carousel-indicator-fraction-minheight;
+      }
+
+      &.e-progress {
+        min-height: $carousel-indicator-progress-minheight;
+
+        .e-indicator-bars {
+          height: $carousel-indicator-progress-height;
+          width: 100%;
+
+          .e-indicator-bar {
+            height: 100%;
+            left: 0;
+            position: absolute;
+            top: 0;
+            transform: translate3d(0, 0, 0) scaleX(calc(var(--carousel-items-current) / var(--carousel-items-count))) scaleY(1);
+            transition-duration: $carousel-animation-duration;
+            transform-origin: left top;
+            width: 100%;
+          }
+        }
+      }
     }
   }
 }

package/styles/carousel/_material-dark-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $grey-white !default;
 $carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
 $carousel-indicator-bar-bg-active: $accent !default;
 $carousel-indicator-border-color-focus: $grey-black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_material-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $grey-white !default;
 $carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
 $carousel-indicator-bar-bg-active: $accent !default;
 $carousel-indicator-border-color-focus: $grey-black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/carousel/_material3-definition.scss

@@ -0,0 +1,28 @@
+/*! Carousel component bootstrap5 theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
+$carousel-navigator-icon-color: rgba($icon-color) !default;
+$carousel-indicator-bar-bg: $content-bg-color-alt5 !default;
+$carousel-indicator-bar-border: 1px solid rgba($content-text-color, .4) !default;
+$carousel-indicator-bar-border-bg: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)) !default;
+$carousel-indicator-bar-bg-active: rgba($primary) !default;
+$carousel-indicator-border-color-focus: rgba($content-text-color) !default;
+$carousel-indicator-progress-bg: rgba($primary, .4) !default;
+
+// ANIMATION VARIABLES
+$carousel-animation-duration: .6s !default;
+$carousel-animation-timing-function: ease-in-out !default;
+
+// DIMENSION VARIABLES
+$carousel-navigator-btn-border-radius-hover: 50% !default;
+$carousel-indicator-padding: 8px !default;
+$carousel-indicator-height: 48px !default;
+$carousel-indicator-bar-border-radius: 50% !default;
+$carousel-indicator-bar-height: 12px !default;
+$carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_tailwind-definition.scss

@@ -8,6 +8,7 @@ $carousel-indicator-bar-bg: $white !default;
 $carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
 $carousel-indicator-bar-bg-active: $primary !default;
 $carousel-indicator-border-color-focus: $black !default;
+$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
 
 // ANIMATION VARIABLES
 $carousel-animation-duration: .6s !default;
@@ -20,3 +21,7 @@ $carousel-indicator-height: 48px !default;
 $carousel-indicator-bar-border-radius: 50% !default;
 $carousel-indicator-bar-height: 12px !default;
 $carousel-indicator-bar-width: 12px !default;
+$carousel-indicator-dynamic-minheight: 36px !default;
+$carousel-indicator-fraction-minheight: 36px !default;
+$carousel-indicator-progress-minheight: 4px !default;
+$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_theme.scss

@@ -22,34 +22,63 @@
       }
     }
 
-    .e-carousel-indicators .e-indicator-bar {
-      .e-indicator {
-        background-color: transparent;
-        border-color: transparent;
-        box-shadow: none;
-
-        div {
-          background-color: $carousel-indicator-bar-bg;
-          border-color: $carousel-indicator-bar-bg;
-        }
-
-        &:active,
-        &:focus,
-        &:hover {
+    .e-carousel-indicators {
+      &.e-default .e-indicator-bar {
+        .e-indicator {
           background-color: transparent;
           border-color: transparent;
           box-shadow: none;
-          outline: none;
+
+          div {
+            background: $carousel-indicator-bar-bg;
+            @if ($skin-name == 'Material3') {
+              border-image: $carousel-indicator-bar-border-bg;
+            }
+            @else {
+              border-color: $carousel-indicator-bar-bg;
+            }
+          }
+
+          &:active,
+          &:focus,
+          &:hover {
+            background: transparent;
+            border-color: transparent;
+            box-shadow: none;
+            outline: none;
+          }
+
+          &:focus-visible {
+            border-color: $carousel-indicator-border-color-focus;
+          }
         }
 
-        &:focus-visible {
-          border-color: $carousel-indicator-border-color-focus;
+        &.e-active .e-indicator div {
+          background-color: $carousel-indicator-bar-bg-active;
+          border-color: $carousel-indicator-bar-bg-active;
         }
       }
 
-      &.e-active .e-indicator div {
-        background-color: $carousel-indicator-bar-bg-active;
-        border-color: $carousel-indicator-bar-bg-active;
+      &.e-dynamic .e-indicator-bars {
+        .e-indicator-bar {
+          background-color: $carousel-navigator-icon-color;
+
+          &.e-active {
+            background-color: $carousel-indicator-bar-bg-active;
+          }
+        }
+      }
+
+      &.e-fraction .e-indicator-bars {
+        color: $carousel-navigator-icon-color;
+      }
+
+      &.e-progress .e-indicator-bars {
+        background-color: $carousel-indicator-progress-bg;
+
+        .e-indicator-bar {
+          background-color: $carousel-indicator-bar-bg-active;
+        }
       }
     }
   }