@syncfusion/ej2-navigations 20.1.47 → 20.1.51-10460

package/styles/appbar/_bootstrap-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $brand-primary !default;
+$appbar-color-primary: $brand-primary-font !default;
+$appbar-border-color-primary: $brand-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap4-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap5-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: none !default;

package/styles/appbar/_bootstrap5.3-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: none !default;

package/styles/appbar/_fabric-dark-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $theme-primary !default;
+$appbar-color-primary: $theme-primary-font !default;
+$appbar-border-color-primary: $theme-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fabric-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $theme-primary !default;
+$appbar-color-primary: $theme-primary-font !default;
+$appbar-border-color-primary: $theme-primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_fluent-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: none !default;

package/styles/appbar/_fluent2-definition.scss

@@ -0,0 +1,24 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: $appbar-border-color-alt1 !default;
+
+/* stylelint-disable */
+.e-appbar {
+  &.e-light {
+    border-bottom: 1px solid $appbar-border !important;
+  }
+  &.e-horizontal-bottom {
+    border-top: 1px solid $appbar-border !important;
+  }
+}
+
+.e-bigger .e-appbar,
+.e-appbar.e-bigger {
+  padding: 16px !important;
+  &.e-prominent {
+    height: 132px;
+  }
+}

package/styles/appbar/_fusionnew-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: none !default;

package/styles/appbar/_highcontrast-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $selection-bg !default;
+$appbar-color-primary: $selection-font !default;
+$appbar-border-color-primary: $selection-bg !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: 1px solid !default;

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

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $selection-bg !default;
+$appbar-color-primary: $selection-font !default;
+$appbar-border-color-primary: $selection-bg !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 16px !default;
+$appbar-border: 1px solid !default;

package/styles/appbar/_layout.scss

@@ -0,0 +1,76 @@
+@include export-module('appbar-layout') {
+  .e-appbar {
+    display: flex;
+    width: 100%;
+    height: 48px;
+    flex-shrink: 0;
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+    padding: 8px;
+    overflow: hidden;
+    font-size: $appbar-font-size;
+    @if ($skin-name == 'fluent2') {
+      border-radius: 4px;
+    }
+
+    > div:first-child {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    &.e-sticky {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+
+    &.e-prominent {
+      height: 94px;
+      align-items: flex-start;
+
+      > div:first-child {
+        align-items: flex-start;
+      }
+    }
+
+    &.e-dense {
+      height: 40px;
+    }
+
+    &.e-horizontal-bottom {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+
+      &.e-sticky {
+        position: fixed;
+        top: auto;
+        max-width: inherit;
+        left: auto;
+        right: auto;
+      }
+    }
+
+    .e-appbar-separator {
+      height: 24px;
+    }
+
+    .e-appbar-spacer {
+      flex-grow: 1;
+    }
+
+    .e-btn,
+    .e-css.e-btn {
+      border-image: unset;
+    }
+  }
+
+  .e-inherit.e-menu-wrapper.e-scrollable .e-menu,
+  .e-inherit.e-menu-container.e-scrollable .e-menu {
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 14px !default;
+$appbar-border: none !default;

package/styles/appbar/_material-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-font !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: 14px !default;
+$appbar-bigger-font-size: 14px !default;
+$appbar-border: none !default;

package/styles/appbar/_material3-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: rgba($primary) !default;
+$appbar-color-primary: rgba($primary-text-color) !default;
+$appbar-border-color-primary: rgba($primary) !default;
+$appbar-font-size: $text-base !default;
+$appbar-bigger-font-size: $text-lg !default;
+$appbar-border: 1px solid !default;

package/styles/appbar/_tailwind-definition.scss

@@ -0,0 +1,6 @@
+$appbar-bg-color-primary: $primary !default;
+$appbar-color-primary: $primary-text-color !default;
+$appbar-border-color-primary: $primary !default;
+$appbar-font-size: $text-sm !default;
+$appbar-bigger-font-size: $text-base !default;
+$appbar-border: none !default;

package/styles/appbar/_theme.scss

@@ -0,0 +1,216 @@
+@include export-module('appbar-theme') {
+  .e-appbar {
+    box-shadow: $appbar-bottom-shadow;
+
+    &.e-light {
+      background: $appbar-bg-color-alt1;
+      color: $appbar-color-alt1;
+      border: $appbar-border;
+      @if ($skin-name == 'Material3') {
+        border-image: $appbar-border-color-alt1;
+      }
+      @else {
+        border-color: $appbar-border-color-alt1;
+      }
+
+      .e-appbar-separator {
+        border-left: 1px solid $appbar-color-alt1;
+      }
+
+      .e-btn,
+      .e-css.e-btn,
+      .e-dropdown-btn,
+      .e-dropdown-btn.e-btn {
+        &.e-inherit {
+          &:hover,
+          &:focus,
+          &:active,
+          &.e-active {
+            background: $appbar-hover-bg-color-alt1;
+          }
+        }
+      }
+
+      .e-menu-wrapper,
+      .e-menu-container {
+        &.e-inherit {
+          background: $appbar-bg-color-alt1;
+          color: $appbar-color-alt1;
+          box-shadow: none;
+          @if ($skin-name == 'Material3') {
+            border-image: $appbar-border-color-alt1;
+          }
+          @else {
+            border-color: $appbar-border-color-alt1;
+          }
+
+          & .e-menu .e-menu-item.e-selected,
+          & .e-menu .e-menu-item.e-focused {
+            background: $appbar-hover-bg-color-alt1;
+          }
+        }
+      }
+    }
+
+    &.e-dark {
+      background: $appbar-bg-color-alt2;
+      color: $appbar-color-alt2;
+      border-color: $appbar-border-color-alt2;
+
+      .e-appbar-separator {
+        border-left: 1px solid $appbar-color-alt2;
+      }
+
+      .e-btn,
+      .e-css.e-btn,
+      .e-dropdown-btn,
+      .e-dropdown-btn.e-btn {
+        &.e-inherit {
+          &:hover,
+          &:focus,
+          &:active,
+          &.e-active {
+            background: $appbar-hover-bg-color-alt2;
+          }
+        }
+      }
+
+      .e-menu-wrapper,
+      .e-menu-container {
+        &.e-inherit {
+          background: $appbar-bg-color-alt2;
+          color: $appbar-color-alt2;
+          border-color: $appbar-border-color-alt2;
+          box-shadow: none;
+
+          & .e-menu .e-menu-item.e-selected,
+          & .e-menu .e-menu-item.e-focused {
+            background: $appbar-hover-bg-color-alt2;
+          }
+        }
+      }
+    }
+
+    &.e-primary {
+      background: $appbar-bg-color-primary;
+      color: $appbar-color-primary;
+      border-color: $appbar-border-color-primary;
+
+      .e-appbar-separator {
+        border-left: 1px solid $appbar-color-primary;
+      }
+
+      .e-menu-wrapper,
+      .e-menu-container {
+        &.e-inherit {
+          background: $appbar-bg-color-primary;
+          color: $appbar-color-primary;
+          border-color: $appbar-border-color-primary;
+          box-shadow: none;
+        }
+      }
+    }
+
+    &.e-inherit {
+      background: inherit;
+      color: inherit;
+      border-color: inherit;
+      border: 1px solid;
+
+      .e-appbar-separator {
+        border-left: 1px solid;
+      }
+
+      .e-menu-wrapper,
+      .e-menu-container {
+        &.e-inherit {
+          background: inherit;
+          color: inherit;
+          border-color: inherit;
+          box-shadow: none;
+        }
+      }
+    }
+
+    &.e-horizontal-bottom {
+      box-shadow: $appbar-top-shadow;
+    }
+  }
+
+  .e-light {
+    &.e-inherit.e-input-group,
+    &.e-inherit.e-input-group.e-control-wrapper,
+    &.e-inherit.e-float-input,
+    &.e-inherit.e-float-input.e-input-group,
+    &.e-inherit.e-float-input.e-control-wrapper,
+    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
+    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
+    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+      background: $appbar-bg-color-alt1;
+      color: $appbar-color-alt1;
+    }
+  }
+
+  .e-dark {
+    &.e-inherit.e-input-group,
+    &.e-inherit.e-input-group.e-control-wrapper,
+    &.e-inherit.e-float-input,
+    &.e-inherit.e-float-input.e-input-group,
+    &.e-inherit.e-float-input.e-control-wrapper,
+    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
+    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
+    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+      background: $appbar-bg-color-alt2;
+      color: $appbar-color-alt2;
+    }
+  }
+
+  .e-primary {
+    &.e-inherit.e-input-group,
+    &.e-inherit.e-input-group.e-control-wrapper,
+    &.e-inherit.e-float-input,
+    &.e-inherit.e-float-input.e-input-group,
+    &.e-inherit.e-float-input.e-control-wrapper,
+    &.e-inherit.e-float-input.e-input-group.e-control-wrapper,
+    &.e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
+    &.e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+      background: $appbar-bg-color-primary;
+      color: $appbar-color-primary;
+    }
+  }
+
+  .e-inherit.e-input-group,
+  .e-inherit.e-input-group.e-control-wrapper,
+  .e-inherit.e-float-input,
+  .e-inherit.e-float-input.e-input-group,
+  .e-inherit.e-float-input.e-control-wrapper,
+  .e-inherit.e-float-input.e-input-group.e-control-wrapper,
+  .e-inherit.e-input-group:not(.e-disabled) .e-input-group-icon:hover,
+  .e-inherit.e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
+    color: inherit;
+    background: rgba(transparent, .056);
+  }
+
+  .e-inherit.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
+  .e-inherit.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
+  .e-inherit.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
+  .e-inherit.e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
+    box-shadow: none;
+  }
+
+  .e-inherit.e-input-group.e-control-wrapper .e-searchinput::placeholder {
+    color: inherit;
+    opacity: .8;
+  }
+
+  .e-inherit.e-input-group .e-input-group-icon,
+  .e-inherit.e-input-group.e-control-wrapper .e-input-group-icon {
+    border: none;
+    color: inherit;
+  }
+
+  .e-inherit.e-input-group .e-clear-icon,
+  .e-inherit.e-input-group.e-control-wrapper .e-clear-icon {
+    color: inherit;
+  }
+}

package/styles/bootstrap-dark.css

@@ -9937,7 +9937,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/bootstrap.css

@@ -9956,7 +9956,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/bootstrap4.css

@@ -10265,7 +10265,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/bootstrap5-dark.css

@@ -10237,7 +10237,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/bootstrap5.css

@@ -10237,7 +10237,7 @@ ejs-sidebar {
   -ms-flex-positive: 1;
       flex-grow: 1;
   -ms-flex-pack: end;
-      justify-content: end;
+      justify-content: flex-end;
 }
 
 .e-breadcrumb-popup.e-rtl.e-icon-right .e-breadcrumb-icon,

package/styles/breadcrumb/_bds-definition.scss

@@ -0,0 +1,60 @@
+// Size variables
+$breadcrumb-skin: $skin-name !default;
+$breadcrumb-last-item-font-weight: $font-weight-medium !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: 3px 8px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 2px 12px !default;
+$breadcrumb-separator-padding: 3px 4px !default;
+$breadcrumb-separator-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-color: $icon-color !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 12px !default;
+$breadcrumb-collapsed-icon-padding: 4px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 3px 8px !default;
+$breadcrumb-collapsed-icon-font-size: $text-base !default;
+$breadcrumb-collapsed-icon-bigger-font-size: $text-lg !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 2px 0 !default;
+$breadcrumb-item-focus-padding: 2px 11px !default;
+$breadcrumb-item-focus-bigger-padding: 1px 15px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
+$breadcrumb-scroll-mode-lineheight: 26px !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-item-color: $content-text-color-alt1 !default;
+$breadcrumb-separator-color: $icon-color-disabled !default;
+$breadcrumb-item-hover-color: $content-text-color-alt2 !default;
+$breadcrumb-item-focus-color: $content-text-color-alt2 !default;
+$breadcrumb-item-active-color: $content-text-color !default;
+$breadcrumb-item-hover-bgcolor: $content-bg-color-hover !default;
+$breadcrumb-item-active-bgcolor: $transparent !default;
+$breadcrumb-item-focus-bgcolor: $primary-lighter !default;
+$breadcrumb-last-item-font-color: $primary_alt !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color-hover !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
+$breadcrumb-popup-item-color: $content-text-color !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: $content-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-hover !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;