@syncfusion/ej2-navigations 20.1.61 → 20.2.36

package/styles/bootstrap5.scss

@@ -1,3 +1,4 @@
+@import 'pager/bootstrap5.scss';
 @import 'h-scroll/bootstrap5.scss';
 @import 'v-scroll/bootstrap5.scss';
 @import 'toolbar/bootstrap5.scss';

package/styles/breadcrumb/_fluent-definition.scss

@@ -9,7 +9,7 @@ $breadcrumb-padding: 2px !default;
 $breadcrumb-padding-left: 0 !default;
 $breadcrumb-padding-right: 0 !default;
 $breadcrumb-bigger-padding: 2px !default;
-$breadcrumb-separator-padding: 0 4px !default;
+$breadcrumb-separator-padding: 0 8px !default;
 $breadcrumb-separator-bigger-padding: 0 8px !default;
 $breadcrumb-icon-color: $icon-color !default;
 $breadcrumb-icon-right-padding: 4px !default;

package/styles/breadcrumb/_fusionnew-definition.scss

@@ -0,0 +1,59 @@
+// Size variables
+$breadcrumb-skin: 'bootstrap5' !default;
+$breadcrumb-last-item-font-weight: $font-weight-normal !default;
+$breadcrumb-font-size: $text-sm !default;
+$breadcrumb-bigger-font-size: $text-base !default;
+$breadcrumb-icon-font-size: $text-sm !default;
+$breadcrumb-icon-bigger-font-size: $text-base !default;
+$breadcrumb-padding: 0 !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 0 !default;
+$breadcrumb-separator-padding: 0 8px !default;
+$breadcrumb-separator-bigger-padding: 0 8px !default;
+$breadcrumb-icon-color: $icon-color !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 8px !default;
+$breadcrumb-collapsed-icon-padding: 4px 4px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 5px 5px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -8px !default;
+$breadcrumb-icon-item-padding: 0 !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-item-focus-padding: 1px !default;
+$breadcrumb-item-focus-bigger-padding: 1px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-next-separator-padding-left: 5px;
+$breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+
+// Color variables
+$breadcrumb-separator-color: $content-text-color-alt3 !default;
+$breadcrumb-item-color: $primary-outline !default;
+$breadcrumb-item-hover-color: darken($primary-outline, 10%) !default;
+$breadcrumb-item-focus-color: $breadcrumb-item-hover-color !default;
+$breadcrumb-item-active-color: darken($primary-outline, 15%) !default;
+$breadcrumb-last-item-font-color: $content-text-color-alt3 !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-hover !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-pressed !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-icon-interaction-color: $icon-color !default;
+$breadcrumb-item-focus-border: 1px solid darken($primary-outline, 10%) !default;
+$breadcrumb-popup-item-color: $content-text-color-alt3 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/_layout.scss

@@ -234,7 +234,7 @@
         }
       }
 
-      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' {
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'FluentUI' {
         margin-top: 2px;
       }
     }

package/styles/breadcrumb/_material3-definition.scss

@@ -0,0 +1,59 @@
+// Size variables
+$breadcrumb-skin: 'bootstrap5' !default;
+$breadcrumb-last-item-font-weight: $font-weight-normal !default;
+$breadcrumb-font-size: $text-sm !default;
+$breadcrumb-bigger-font-size: $text-base !default;
+$breadcrumb-icon-font-size: $text-sm !default;
+$breadcrumb-icon-bigger-font-size: $text-base !default;
+$breadcrumb-padding: 0 !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 0 !default;
+$breadcrumb-separator-padding: 0 8px !default;
+$breadcrumb-separator-bigger-padding: 0 8px !default;
+$breadcrumb-icon-color: $icon-color !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 8px !default;
+$breadcrumb-collapsed-icon-padding: 4px 4px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 5px 5px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -8px !default;
+$breadcrumb-icon-item-padding: 0 !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-item-focus-padding: 1px !default;
+$breadcrumb-item-focus-bigger-padding: 1px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-next-separator-padding-left: 5px;
+$breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+
+// Color variables
+$breadcrumb-separator-color: $content-text-color-alt3 !default;
+$breadcrumb-item-color: $primary-outline !default;
+$breadcrumb-item-hover-color: darken($primary-outline, 10%) !default;
+$breadcrumb-item-focus-color: $breadcrumb-item-hover-color !default;
+$breadcrumb-item-active-color: darken($primary-outline, 15%) !default;
+$breadcrumb-last-item-font-color: $content-text-color-alt3 !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-hover !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-pressed !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-icon-interaction-color: $icon-color !default;
+$breadcrumb-item-focus-border: 1px solid darken($primary-outline, 10%) !default;
+$breadcrumb-popup-item-color: $content-text-color-alt3 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/fluent-dark.css

@@ -7,12 +7,12 @@
   content: "\e87b";
 }
 .e-breadcrumb .e-home {
-  height: 18px;
+  height: 16px;
 }
 
 .e-bigger .e-breadcrumb .e-home,
 .e-bigger.e-breadcrumb .e-home {
-  height: 21px;
+  height: 18px;
 }
 
 /*! breadcrumb layout */
@@ -120,7 +120,7 @@
   display: -ms-flexbox;
   display: flex;
   font-size: 16px;
-  padding: 0 4px;
+  padding: 0 8px;
 }
 .e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
   margin-left: -8px;
@@ -129,7 +129,7 @@
 .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
   margin-left: 0;
   margin-right: -8px;
-  padding-left: 4px;
+  padding-left: 8px;
   padding-right: 0;
 }
 .e-breadcrumb .e-breadcrumb-collapsed,
@@ -138,6 +138,7 @@
   font-size: 16px;
   padding: 4px 4px;
   vertical-align: bottom;
+  margin-top: 2px;
 }
 .e-breadcrumb .e-breadcrumb-menu {
   display: inline-block;

package/styles/breadcrumb/fluent.css

@@ -7,12 +7,12 @@
   content: "\e87b";
 }
 .e-breadcrumb .e-home {
-  height: 18px;
+  height: 16px;
 }
 
 .e-bigger .e-breadcrumb .e-home,
 .e-bigger.e-breadcrumb .e-home {
-  height: 21px;
+  height: 18px;
 }
 
 /*! breadcrumb layout */
@@ -120,7 +120,7 @@
   display: -ms-flexbox;
   display: flex;
   font-size: 16px;
-  padding: 0 4px;
+  padding: 0 8px;
 }
 .e-breadcrumb .e-breadcrumb-separator + .e-breadcrumb-separator {
   margin-left: -8px;
@@ -129,7 +129,7 @@
 .e-breadcrumb.e-rtl .e-breadcrumb-separator + .e-breadcrumb-separator {
   margin-left: 0;
   margin-right: -8px;
-  padding-left: 4px;
+  padding-left: 8px;
   padding-right: 0;
 }
 .e-breadcrumb .e-breadcrumb-collapsed,
@@ -138,6 +138,7 @@
   font-size: 16px;
   padding: 4px 4px;
   vertical-align: bottom;
+  margin-top: 2px;
 }
 .e-breadcrumb .e-breadcrumb-menu {
   display: inline-block;

package/styles/breadcrumb/icons/_fluent.scss

@@ -12,14 +12,14 @@
     }
 
     .e-home {
-      height: 18px;
+      height: 16px;
     }
   }
 
   .e-bigger .e-breadcrumb,
   .e-bigger.e-breadcrumb {
     .e-home {
-      height: 21px;
+      height: 18px;
     }
   }
 }

package/styles/breadcrumb/icons/_fusionnew.scss

@@ -0,0 +1,25 @@
+
+@include export-module('breadcrumb-fusionnew-icons') {
+  /*! breadcrumb icons */
+  .e-breadcrumb {
+    .e-breadcrumb-collapsed::before,
+    .e-breadcrumb-menu::before {
+      content: '\e71c';
+    }
+
+    .e-home::before {
+      content: '\e87b';
+    }
+
+    .e-home {
+      height: 18px;
+    }
+  }
+
+  .e-bigger .e-breadcrumb,
+  .e-bigger.e-breadcrumb {
+    .e-home {
+      height: 21px;
+    }
+  }
+}

package/styles/breadcrumb/icons/_material3.scss

@@ -0,0 +1,25 @@
+
+@include export-module('breadcrumb-material3-icons') {
+  /*! breadcrumb icons */
+  .e-breadcrumb {
+    .e-breadcrumb-collapsed::before,
+    .e-breadcrumb-menu::before {
+      content: '\e71c';
+    }
+
+    .e-home::before {
+      content: '\e87b';
+    }
+
+    .e-home {
+      height: 18px;
+    }
+  }
+
+  .e-bigger .e-breadcrumb,
+  .e-bigger.e-breadcrumb {
+    .e-home {
+      height: 21px;
+    }
+  }
+}

package/styles/carousel/_fusionnew-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component bootstrap5 theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
+$carousel-navigator-icon-color: $primary-text-color !default;
+$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;
+
+// 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: 4px !default;
+$carousel-indicator-height: 48px !default;
+$carousel-indicator-bar-border-radius: 2px !default;
+$carousel-indicator-bar-height: 5px !default;
+$carousel-indicator-bar-width: 20px !default;

package/styles/carousel/_layout.scss

@@ -14,72 +14,83 @@
       padding: 0;
       position: relative;
       width: 100%;
+    }
 
-      &:not(.e-carousel-custom-animation) .e-carousel-item {
+    &.e-carousel-slide-animation {
+      .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-carousel-slide-animation {
-        .e-carousel-item {
-          transition: transform $carousel-animation-duration $carousel-animation-timing-function;
+        &.e-next:not(.e-transition-start),
+        &.e-active.e-transition-end {
+          transform: translateX(100%);
+        }
 
-          &.e-prev,
-          &.e-next,
-          &.e-active {
-            display: block;
-          }
+        &.e-prev:not(.e-transition-end),
+        &.e-active.e-transition-start {
+          transform: translateX(-100%);
+        }
+      }
+    }
 
-          &.e-next:not(.e-transition-start),
-          &.e-active.e-transition-end {
-            transform: translateX(100%);
-          }
+    &.e-carousel-fade-animation {
+      .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;
 
-          &.e-prev:not(.e-transition-end),
-          &.e-active.e-transition-start {
-            transform: translateX(-100%);
-          }
+        &.e-active {
+          opacity: 1;
+          z-index: 1;
         }
       }
+    }
 
-      &.e-carousel-fade-animation {
-        .e-carousel-item {
-          display: block;
-          opacity: 0;
-          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
-          z-index: 0;
+    &.e-carousel-animation-none {
+      .e-carousel-item {
+        display: none;
+        height: 100%;
+        width: 100%;
 
-          &.e-active {
-            opacity: 1;
-            z-index: 1;
-          }
+        &.e-active {
+          display: block;
         }
       }
+    }
 
-      &.e-carousel-custom-animation {
-        .e-carousel-item {
-          display: block;
-          height: 100%;
-          left: 0;
-          opacity: 0;
-          pointer-events: none;
-          position: absolute;
-          top: 0;
-          width: 100%;
-
-          &.e-active {
-            opacity: 1;
-            pointer-events: visible;
-          }
+    &.e-carousel-custom-animation {
+      .e-carousel-item {
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 100%;
+
+        &.e-active {
+          opacity: 1;
+          pointer-events: visible;
         }
       }
     }

package/styles/carousel/_material3-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component bootstrap5 theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
+$carousel-navigator-icon-color: $primary-text-color !default;
+$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;
+
+// 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: 4px !default;
+$carousel-indicator-height: 48px !default;
+$carousel-indicator-bar-border-radius: 2px !default;
+$carousel-indicator-bar-height: 5px !default;
+$carousel-indicator-bar-width: 20px !default;

package/styles/carousel/bootstrap-dark.css

@@ -33,41 +33,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -77,7 +86,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }

package/styles/carousel/bootstrap.css

@@ -33,41 +33,50 @@
   position: relative;
   width: 100%;
 }
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
+.e-carousel.e-carousel-slide-animation .e-carousel-item {
   backface-visibility: hidden;
   display: none;
   float: left;
   height: 100%;
   margin-right: -100%;
   position: relative;
-  width: 100%;
-}
-.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
-  display: block;
-}
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
   transition: transform 0.6s ease-in-out;
+  width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active {
   display: block;
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
   transform: translateX(100%);
 }
-.e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
+.e-carousel.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
   transform: translateX(-100%);
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
+.e-carousel.e-carousel-fade-animation .e-carousel-item {
+  backface-visibility: hidden;
   display: block;
+  float: left;
+  height: 100%;
+  margin-right: -100%;
   opacity: 0;
+  position: relative;
   transition: opacity 0.6s ease-in-out;
+  width: 100%;
   z-index: 0;
 }
-.e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-fade-animation .e-carousel-item.e-active {
   opacity: 1;
   z-index: 1;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
+.e-carousel.e-carousel-animation-none .e-carousel-item {
+  display: none;
+  height: 100%;
+  width: 100%;
+}
+.e-carousel.e-carousel-animation-none .e-carousel-item.e-active {
+  display: block;
+}
+.e-carousel.e-carousel-custom-animation .e-carousel-item {
   display: block;
   height: 100%;
   left: 0;
@@ -77,7 +86,7 @@
   top: 0;
   width: 100%;
 }
-.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+.e-carousel.e-carousel-custom-animation .e-carousel-item.e-active {
   opacity: 1;
   pointer-events: visible;
 }