@syncfusion/ej2-navigations 19.4.56 → 20.1.51

package/styles/breadcrumb/tailwind.css

@@ -2,11 +2,20 @@
 /*! breadcrumb icons */
 .e-breadcrumb .e-breadcrumb-collapsed::before,
 .e-breadcrumb .e-breadcrumb-menu::before {
-  content: '\e76f';
+  content: '\e71c';
 }
 
 .e-breadcrumb .e-home::before {
-  content: '\e927';
+  content: '\e87b';
+}
+
+.e-breadcrumb .e-home {
+  height: 18px;
+}
+
+.e-bigger .e-breadcrumb .e-home,
+.e-bigger.e-breadcrumb .e-home {
+  height: 21px;
 }
 
 /*! breadcrumb layout */
@@ -96,7 +105,15 @@
   text-decoration: none;
 }
 
-.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus, .e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:hover {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:focus {
+  text-decoration: underline;
+}
+
+.e-breadcrumb .e-breadcrumb-item a.e-breadcrumb-text:active {
   text-decoration: underline;
 }
 
@@ -390,12 +407,12 @@
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
   background-color: #f3f4f6;
-  color: #6b7280;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
   background-color: #e5e7eb;
-  color: #6b7280;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -423,19 +440,19 @@
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
   background-color: #f3f4f6;
-  color: #6b7280;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
   background-color: #e5e7eb;
-  color: #6b7280;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
   background-color: #f3f4f6;
-  color: #6b7280;
+  color: #374151;
 }
 
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -455,7 +472,7 @@
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text {
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text:hover {

package/styles/carousel/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

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

@@ -0,0 +1,22 @@
+/*! Carousel component bootstrap-dark theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($brand-primary-font, .4) !default;
+$carousel-navigator-icon-color: $brand-primary-font !default;
+$carousel-indicator-bar-bg: $brand-primary-font !default;
+$carousel-indicator-bar-border: 1px solid rgba($brand-primary-font, .4) !default;
+$carousel-indicator-bar-bg-active: $brand-primary !default;
+$carousel-indicator-border-color-focus: $base-font !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-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component bootstrap theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($brand-primary-font, .4) !default;
+$carousel-navigator-icon-color: $brand-primary-font !default;
+$carousel-indicator-bar-bg: $brand-primary-font !default;
+$carousel-indicator-bar-border: 1px solid rgba($brand-primary-font, .4) !default;
+$carousel-indicator-bar-bg-active: $brand-primary !default;
+$carousel-indicator-border-color-focus: $base-font !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/_bootstrap4-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component bootstrap4 theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($primary-font, .4) !default;
+$carousel-navigator-icon-color: $primary-font !default;
+$carousel-indicator-bar-bg: $primary-font !default;
+$carousel-indicator-bar-border: 1px solid rgba($primary-font, .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/_bootstrap5-dark-definition.scss

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

package/styles/carousel/_bootstrap5-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/_fabric-dark-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component fabric-dark theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($neutral-primary, .4) !default;
+$carousel-navigator-icon-color: $neutral-primary !default;
+$carousel-indicator-bar-bg: $neutral-primary !default;
+$carousel-indicator-bar-border: 1px solid rgba($neutral-primary, .4) !default;
+$carousel-indicator-bar-bg-active: $theme-primary !default;
+$carousel-indicator-border-color-focus: $shadow !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: 6px !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;

package/styles/carousel/_fabric-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component fabric theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($neutral-white, .4) !default;
+$carousel-navigator-icon-color: $neutral-white !default;
+$carousel-indicator-bar-bg: $neutral-white !default;
+$carousel-indicator-bar-border: 1px solid rgba($neutral-white, .4) !default;
+$carousel-indicator-bar-bg-active: $theme-primary !default;
+$carousel-indicator-border-color-focus: $neutral-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: 6px !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;

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

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

package/styles/carousel/_fluent-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component FluentUI 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: 6px !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;

package/styles/carousel/_highcontrast-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component highcontrast theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($message-font, .4) !default;
+$carousel-navigator-icon-color: $message-font !default;
+$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;
+
+// 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: 6px !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;

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

@@ -0,0 +1,22 @@
+/*! Carousel component highcontrast-light theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($selection-font, .4) !default;
+$carousel-navigator-icon-color: $selection-font !default;
+$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;
+
+// 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: 6px !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;

package/styles/carousel/_layout.scss

@@ -0,0 +1,150 @@
+@include export-module('carousel-layout') {
+
+  /*! carousel component styles */
+  .e-carousel {
+    display: block;
+    margin: 0;
+    padding: 0;
+    position: relative;
+
+    .e-carousel-items {
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+      position: relative;
+      width: 100%;
+
+      .e-carousel-item {
+        backface-visibility: hidden;
+        display: none;
+        float: left;
+        height: 100%;
+        margin-right: -100%;
+        position: relative;
+        width: 100%;
+
+        &.e-active {
+          display: block;
+        }
+      }
+
+      &.e-carousel-slide-animation {
+        .e-carousel-item {
+          transition: transform $carousel-animation-duration $carousel-animation-timing-function;
+
+          &.e-prev,
+          &.e-next,
+          &.e-active {
+            display: block;
+          }
+
+          &.e-next:not(.e-transition-start),
+          &.e-active.e-transition-end {
+            transform: translateX(100%);
+          }
+
+          &.e-prev:not(.e-transition-end),
+          &.e-active.e-transition-start {
+            transform: translateX(-100%);
+          }
+        }
+      }
+
+      &.e-carousel-fade-animation {
+        .e-carousel-item {
+          display: block;
+          opacity: 0;
+          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
+          z-index: 0;
+
+          &.e-active {
+            opacity: 1;
+            z-index: 1;
+          }
+        }
+      }
+    }
+
+    .e-carousel-navigators {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: space-between;
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 1;
+
+      .e-play-pause,
+      .e-previous,
+      .e-next {
+        padding: .5em;
+        pointer-events: auto;
+
+        .e-btn {
+          border: 0;
+          box-shadow: none;
+
+          &:hover {
+            border-radius: $carousel-navigator-btn-border-radius-hover;
+          }
+
+          &.e-rtl {
+            transform: rotate(180deg);
+          }
+        }
+
+        &.e-hover-arrows {
+          display: none;
+        }
+      }
+    }
+
+    .e-carousel-indicators {
+      align-items: center;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      min-height: $carousel-indicator-height;
+      padding: 0;
+      pointer-events: none;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+
+      .e-indicator-bars {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        pointer-events: auto;
+
+        .e-indicator-bar {
+          padding: 0;
+
+          .e-indicator {
+            align-items: center;
+            display: flex;
+            justify-content: center;
+            padding: $carousel-indicator-padding;
+          }
+
+          .e-indicator div {
+            border: $carousel-indicator-bar-border;
+            border-radius: $carousel-indicator-bar-border-radius;
+            height: $carousel-indicator-bar-height;
+            transition-duration: $carousel-animation-duration;
+            transition-property: background-color, border-color;
+            transition-timing-function: $carousel-animation-timing-function;
+            width: $carousel-indicator-bar-width;
+          }
+
+          .e-indicator .e-ripple-element {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/*! Carousel component material-dark theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
+$carousel-navigator-icon-color: $grey-white !default;
+$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;
+
+// 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: 6px !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;

package/styles/carousel/_material-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component material theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
+$carousel-navigator-icon-color: $grey-white !default;
+$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;
+
+// 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: 6px !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;

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

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

package/styles/carousel/_tailwind-definition.scss

@@ -0,0 +1,22 @@
+/*! Carousel component tailwind theme definitions and variables */
+
+// COLORS VARIABLES
+$carousel-navigator-btn-bg: transparent !default;
+$carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
+$carousel-navigator-icon-color: $white !default;
+$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;
+
+// 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: 6px !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;

package/styles/carousel/_theme.scss

@@ -0,0 +1,56 @@
+@include export-module('carousel-theme') {
+
+  /*! carousel component theme */
+  .e-carousel {
+    .e-carousel-navigators {
+
+      .e-previous .e-btn:not(:disabled),
+      .e-next .e-btn:not(:disabled),
+      .e-play-pause .e-btn:not(:disabled) {
+        background-color: $carousel-navigator-btn-bg;
+
+        .e-btn-icon {
+          color: $carousel-navigator-icon-color;
+        }
+
+        &:active,
+        &:focus,
+        &:hover {
+          background-color: $carousel-navigator-btn-bg-hover;
+          outline: none;
+        }
+      }
+    }
+
+    .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 {
+          background-color: transparent;
+          border-color: transparent;
+          box-shadow: none;
+          outline: none;
+        }
+
+        &: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;
+      }
+    }
+  }
+}