@syncfusion/ej2-react-navigations 20.1.48 → 20.1.56

package/styles/carousel/tailwind-dark.css

@@ -1,27 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! Carousel component tailwind theme definitions and variables */
 .e-carousel .e-previous-icon::before {
-  content: '\e765';
+  content: "\e765";
 }
-
 .e-carousel .e-next-icon::before {
-  content: '\e748';
+  content: "\e748";
 }
-
 .e-carousel .e-play-icon::before {
-  content: '\e70c';
+  content: "\e70c";
 }
-
 .e-carousel .e-pause-icon::before {
-  content: '\e77b';
+  content: "\e77b";
 }
-
 .e-carousel.e-rtl .e-previous-icon::before {
-  content: '\e748';
+  content: "\e748";
 }
-
 .e-carousel.e-rtl .e-next-icon::before {
-  content: '\e765';
+  content: "\e765";
 }
 
 /*! carousel component styles */
@@ -31,7 +26,6 @@
   padding: 0;
   position: relative;
 }
-
 .e-carousel .e-carousel-items {
   height: 100%;
   margin: 0;
@@ -40,8 +34,7 @@
   position: relative;
   width: 100%;
 }
-
-.e-carousel .e-carousel-items .e-carousel-item {
+.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   display: none;
@@ -51,39 +44,45 @@
   position: relative;
   width: 100%;
 }
-
-.e-carousel .e-carousel-items .e-carousel-item.e-active {
+.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;
 }
-
 .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 {
   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 {
   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 {
   transform: translateX(-100%);
 }
-
 .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
   display: block;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   z-index: 0;
 }
-
 .e-carousel .e-carousel-items.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 {
+  display: block;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+  opacity: 1;
+  pointer-events: visible;
+}
 .e-carousel .e-carousel-navigators {
   -ms-flex-align: center;
       align-items: center;
@@ -98,39 +97,33 @@
   width: 100%;
   z-index: 1;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause,
 .e-carousel .e-carousel-navigators .e-previous,
 .e-carousel .e-carousel-navigators .e-next {
-  padding: .5em;
+  padding: 0.5em;
   pointer-events: auto;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
 .e-carousel .e-carousel-navigators .e-previous .e-btn,
 .e-carousel .e-carousel-navigators .e-next .e-btn {
   border: 0;
   box-shadow: none;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
 .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
 .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
   border-radius: 50%;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
 .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
   display: none;
 }
-
 .e-carousel .e-carousel-indicators {
   -ms-flex-align: center;
       align-items: center;
@@ -146,7 +139,6 @@
   width: 100%;
   z-index: 1;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars {
   display: -ms-flexbox;
   display: flex;
@@ -156,11 +148,9 @@
       justify-content: center;
   pointer-events: auto;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
   padding: 0;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
   -ms-flex-align: center;
       align-items: center;
@@ -170,7 +160,6 @@
       justify-content: center;
   padding: 6px;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 50%;
@@ -180,7 +169,6 @@
   transition-timing-function: ease-in-out;
   width: 12px;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
   display: none;
 }
@@ -191,13 +179,11 @@
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
   background-color: transparent;
 }
-
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
   color: #fff;
 }
-
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -208,30 +194,25 @@
   background-color: rgba(255, 255, 255, 0.4);
   outline: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
   background-color: #fff;
   border-color: #fff;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
   outline: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
   border-color: #000;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
   background-color: #22d3ee;
   border-color: #22d3ee;
-}
+}

package/styles/carousel/tailwind.css

@@ -1,27 +1,22 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 /*! Carousel component tailwind theme definitions and variables */
 .e-carousel .e-previous-icon::before {
-  content: '\e765';
+  content: "\e765";
 }
-
 .e-carousel .e-next-icon::before {
-  content: '\e748';
+  content: "\e748";
 }
-
 .e-carousel .e-play-icon::before {
-  content: '\e70c';
+  content: "\e70c";
 }
-
 .e-carousel .e-pause-icon::before {
-  content: '\e77b';
+  content: "\e77b";
 }
-
 .e-carousel.e-rtl .e-previous-icon::before {
-  content: '\e748';
+  content: "\e748";
 }
-
 .e-carousel.e-rtl .e-next-icon::before {
-  content: '\e765';
+  content: "\e765";
 }
 
 /*! carousel component styles */
@@ -31,7 +26,6 @@
   padding: 0;
   position: relative;
 }
-
 .e-carousel .e-carousel-items {
   height: 100%;
   margin: 0;
@@ -40,8 +34,7 @@
   position: relative;
   width: 100%;
 }
-
-.e-carousel .e-carousel-items .e-carousel-item {
+.e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   display: none;
@@ -51,39 +44,45 @@
   position: relative;
   width: 100%;
 }
-
-.e-carousel .e-carousel-items .e-carousel-item.e-active {
+.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;
 }
-
 .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 {
   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 {
   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 {
   transform: translateX(-100%);
 }
-
 .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
   display: block;
   opacity: 0;
   transition: opacity 0.6s ease-in-out;
   z-index: 0;
 }
-
 .e-carousel .e-carousel-items.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 {
+  display: block;
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
+  opacity: 1;
+  pointer-events: visible;
+}
 .e-carousel .e-carousel-navigators {
   -ms-flex-align: center;
       align-items: center;
@@ -98,39 +97,33 @@
   width: 100%;
   z-index: 1;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause,
 .e-carousel .e-carousel-navigators .e-previous,
 .e-carousel .e-carousel-navigators .e-next {
-  padding: .5em;
+  padding: 0.5em;
   pointer-events: auto;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
 .e-carousel .e-carousel-navigators .e-previous .e-btn,
 .e-carousel .e-carousel-navigators .e-next .e-btn {
   border: 0;
   box-shadow: none;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
 .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
 .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
   border-radius: 50%;
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
 .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
 .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
   transform: rotate(180deg);
 }
-
 .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
 .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
   display: none;
 }
-
 .e-carousel .e-carousel-indicators {
   -ms-flex-align: center;
       align-items: center;
@@ -146,7 +139,6 @@
   width: 100%;
   z-index: 1;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars {
   display: -ms-flexbox;
   display: flex;
@@ -156,11 +148,9 @@
       justify-content: center;
   pointer-events: auto;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
   padding: 0;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
   -ms-flex-align: center;
       align-items: center;
@@ -170,7 +160,6 @@
       justify-content: center;
   padding: 6px;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 50%;
@@ -180,7 +169,6 @@
   transition-timing-function: ease-in-out;
   width: 12px;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
   display: none;
 }
@@ -191,13 +179,11 @@
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
   background-color: transparent;
 }
-
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
 .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
   color: #fff;
 }
-
 .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
 .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -208,30 +194,25 @@
   background-color: rgba(255, 255, 255, 0.4);
   outline: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
   background-color: #fff;
   border-color: #fff;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
   outline: none;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
   border-color: #000;
 }
-
 .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
   background-color: #4f46e5;
   border-color: #4f46e5;
-}
+}