@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/bootstrap5.scss

@@ -0,0 +1,10 @@
+@import 'h-scroll/bootstrap5.scss';
+@import 'v-scroll/bootstrap5.scss';
+@import 'toolbar/bootstrap5.scss';
+@import 'accordion/bootstrap5.scss';
+@import 'context-menu/bootstrap5.scss';
+@import 'tab/bootstrap5.scss';
+@import 'treeview/bootstrap5.scss';
+@import 'sidebar/bootstrap5.scss';
+@import 'menu/bootstrap5.scss';
+@import 'breadcrumb/bootstrap5.scss';

package/styles/breadcrumb/_all.scss

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

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

@@ -0,0 +1,41 @@
+// Size variables
+$breadcrumb-skin: 'bootstrap' !default;
+$breadcrumb-last-item-font-weight: normal !default;
+$breadcrumb-font-size: 14px !default;
+$breadcrumb-bigger-font-size: 16px !default;
+$breadcrumb-icon-font-size: 14px !default;
+$breadcrumb-icon-bigger-font-size: 16px !default;
+$breadcrumb-padding: 10px 0 !default;
+$breadcrumb-padding-left: 16px !default;
+$breadcrumb-padding-right: 16px !default;
+$breadcrumb-bigger-padding: 9px 0 !default;
+$breadcrumb-separator-padding: 10px 6px !default;
+$breadcrumb-separator-bigger-padding: 9px 6px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 6px !default;
+$breadcrumb-collapsed-icon-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -5px !default;
+$breadcrumb-icon-item-padding: 3px 0 !default;
+$breadcrumb-icon-only-item-padding: 10px 11px !default;
+$breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+
+// Color variables
+$breadcrumb-item-color: $brand-primary !default;
+$breadcrumb-icon-color: $grey-cc !default;
+$breadcrumb-separator-color: $grey-cc !default;
+$breadcrumb-item-hover-color: $brand-primary-lighten-15 !default;
+$breadcrumb-item-focus-color: $brand-primary-lighten-15 !default;
+$breadcrumb-item-active-color: $brand-primary-lighten-20 !default;
+$breadcrumb-last-item-font-color: $grey-dark-font !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $grey-88 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $grey-8c !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $grey-ad !default;
+$breadcrumb-collapsed-icon-color: $grey-cc !default;
+$breadcrumb-collapsed-icon-hover-color: $grey-cc !default;
+$breadcrumb-disabled-item-color: $grey-lighter !default;
+$breadcrumb-bgcolor: $gray-dark !default;
+$breadcrumb-icon-interaction-color: $brand-primary !default;

package/styles/breadcrumb/_bootstrap-definition.scss

@@ -0,0 +1,41 @@
+// Size variables
+$breadcrumb-skin: 'bootstrap' !default;
+$breadcrumb-last-item-font-weight: normal !default;
+$breadcrumb-font-size: 14px !default;
+$breadcrumb-bigger-font-size: 16px !default;
+$breadcrumb-icon-font-size: 14px !default;
+$breadcrumb-icon-bigger-font-size: 16px !default;
+$breadcrumb-padding: 10px 0 !default;
+$breadcrumb-padding-left: 16px !default;
+$breadcrumb-padding-right: 16px !default;
+$breadcrumb-bigger-padding: 9px 0 !default;
+$breadcrumb-separator-padding: 10px 6px !default;
+$breadcrumb-separator-bigger-padding: 9px 6px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 6px !default;
+$breadcrumb-collapsed-icon-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -5px !default;
+$breadcrumb-icon-item-padding: 3px 0 !default;
+$breadcrumb-icon-only-item-padding: 10px 11px !default;
+$breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+
+// Color variables
+$breadcrumb-item-color: $brand-primary !default;
+$breadcrumb-icon-color: $gray-light !default;
+$breadcrumb-separator-color: $grey-cc !default;
+$breadcrumb-item-hover-color: $brand-primary-darken-15 !default;
+$breadcrumb-item-focus-color: $brand-primary-darken-15 !default;
+$breadcrumb-item-active-color: $brand-primary-darken-15 !default;
+$breadcrumb-last-item-font-color: $gray-light !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $grey-e6 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $grey-dd !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $grey-e6 !default;
+$breadcrumb-collapsed-icon-color: $gray-light !default;
+$breadcrumb-collapsed-icon-hover-color: $gray-light !default;
+$breadcrumb-disabled-item-color: $grey-ad !default;
+$breadcrumb-bgcolor: $grey-f5 !default;
+$breadcrumb-icon-interaction-color: $brand-primary-darken-15 !default;

package/styles/breadcrumb/_bootstrap4-definition.scss

@@ -0,0 +1,41 @@
+// Size variables
+$breadcrumb-skin: 'bootstrap' !default;
+$breadcrumb-last-item-font-weight: normal !default;
+$breadcrumb-font-size: 14px !default;
+$breadcrumb-bigger-font-size: 16px !default;
+$breadcrumb-icon-font-size: 14px !default;
+$breadcrumb-icon-bigger-font-size: 16px !default;
+$breadcrumb-padding: 10px 0 !default;
+$breadcrumb-padding-left: 16px !default;
+$breadcrumb-padding-right: 16px !default;
+$breadcrumb-bigger-padding: 9px 0 !default;
+$breadcrumb-separator-padding: 10px 8px !default;
+$breadcrumb-separator-bigger-padding: 9px 8px !default;
+$breadcrumb-icon-right-padding: 8px !default;
+$breadcrumb-icon-bigger-right-padding: 8px !default;
+$breadcrumb-collapsed-icon-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 8px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -7px !default;
+$breadcrumb-icon-item-padding: 3px 0 !default;
+$breadcrumb-icon-only-item-padding: 10px 11px !default;
+$breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+
+// Color variables
+$breadcrumb-item-color: $primary !default;
+$breadcrumb-separator-color: $gray-600 !default;
+$breadcrumb-icon-color: $gray-700 !default;
+$breadcrumb-item-hover-color: darken($primary, 15%) !default;
+$breadcrumb-item-focus-color: darken($primary, 15%) !default;
+$breadcrumb-item-active-color: darken($primary, 20%) !default;
+$breadcrumb-last-item-font-color: $gray-600 !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $gray-300 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $gray-400 !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $gray-300 !default;
+$breadcrumb-collapsed-icon-color: $gray-700 !default;
+$breadcrumb-collapsed-icon-hover-color: $gray-700 !default;
+$breadcrumb-disabled-item-color: $gray-500 !default;
+$breadcrumb-bgcolor: $gray-200 !default;
+$breadcrumb-icon-interaction-color: $indigo !default;

package/styles/breadcrumb/_bootstrap5-dark-definition.scss

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

package/styles/breadcrumb/_bootstrap5-definition.scss

@@ -0,0 +1,46 @@
+// 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: 2px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 2px !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;
+
+// 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;

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

@@ -0,0 +1,46 @@
+// Size variables
+$breadcrumb-skin: 'fabric' !default;
+$breadcrumb-last-item-font-weight: 400 !default;
+$breadcrumb-font-size: 18px !default;
+$breadcrumb-bigger-font-size: 20px !default;
+$breadcrumb-icon-font-size: 18px !default;
+$breadcrumb-icon-bigger-font-size: 20px !default;
+$breadcrumb-padding: 4px 4px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 4px 4px !default;
+$breadcrumb-separator-padding: 4px 3px !default;
+$breadcrumb-separator-bigger-padding: 4px 5px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 4px !default;
+$breadcrumb-collapsed-icon-padding: 5px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 21px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 21px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 6px 8px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 3px 3px !default;
+$breadcrumb-collapsed-icon-focus-padding: 4px 7px !default;
+$breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px !default;
+$breadcrumb-item-focus-padding: 3px 3px !default;
+$breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+
+// Color variables
+$breadcrumb-item-color: $neutral-light-font !default;
+$breadcrumb-icon-color: $neutral-light-font !default;
+$breadcrumb-separator-color: $neutral-light-font !default;
+$breadcrumb-item-hover-color: $neutral-black !default;
+$breadcrumb-item-focus-color: $neutral-black !default;
+$breadcrumb-item-active-color: $neutral-black !default;
+$breadcrumb-last-item-font-color: $neutral-light-font !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $neutral-quintenaryalt !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $neutral-tertiary-alt !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: transparent !default;
+$breadcrumb-collapsed-icon-color: $theme-tertiary !default;
+$breadcrumb-collapsed-icon-hover-color: $theme-tertiary !default;
+$breadcrumb-disabled-item-color: $neutral-tertiary !default;
+$breadcrumb-collapsed-icon-focus-color: $neutral-secondary !default;
+$breadcrumb-collapsed-icon-focus-border: 1px solid $neutral-secondary-alt !default;
+$breadcrumb-item-hover-bgcolor: $neutral-quintenaryalt !default;
+$breadcrumb-item-active-bgcolor: $neutral-tertiary-alt !default;
+$breadcrumb-item-focus-border: 1px solid $neutral-secondary-alt !default;

package/styles/breadcrumb/_fabric-definition.scss

@@ -0,0 +1,46 @@
+// Size variables
+$breadcrumb-skin: 'fabric' !default;
+$breadcrumb-last-item-font-weight: 400 !default;
+$breadcrumb-font-size: 18px !default;
+$breadcrumb-bigger-font-size: 20px !default;
+$breadcrumb-icon-font-size: 18px !default;
+$breadcrumb-icon-bigger-font-size: 20px !default;
+$breadcrumb-padding: 4px 4px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 4px 4px !default;
+$breadcrumb-separator-padding: 4px 3px !default;
+$breadcrumb-separator-bigger-padding: 4px 5px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 4px !default;
+$breadcrumb-collapsed-icon-padding: 5px 8px 3px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 6px 8px 4px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 21px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 21px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 3px 3px !default;
+$breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
+$breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
+$breadcrumb-item-focus-padding: 3px 3px !default;
+$breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+
+// Color variables
+$breadcrumb-item-color: $theme-light-font !default;
+$breadcrumb-icon-color: $neutral-secondary !default;
+$breadcrumb-separator-color: $neutral-secondary !default;
+$breadcrumb-item-hover-color: $theme-light-font !default;
+$breadcrumb-item-focus-color: $theme-light-font !default;
+$breadcrumb-item-active-color: $theme-light-font !default;
+$breadcrumb-last-item-font-color: $theme-light-font !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $neutral-lighter !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $neutral-tertiary-alt !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: transparent !default;
+$breadcrumb-collapsed-icon-color: $theme-primary !default;
+$breadcrumb-collapsed-icon-hover-color: $theme-primary !default;
+$breadcrumb-disabled-item-color: $neutral-tertiary !default;
+$breadcrumb-collapsed-icon-focus-color: $neutral-black !default;
+$breadcrumb-collapsed-icon-focus-border: 1px solid $neutral-secondary-alt !default;
+$breadcrumb-item-hover-bgcolor: $neutral-lighter !default;
+$breadcrumb-item-active-bgcolor: $neutral-tertiary-alt !default;
+$breadcrumb-item-focus-border: 1px solid $neutral-secondary-alt !default;

package/styles/breadcrumb/_highcontrast-definition.scss

@@ -0,0 +1,48 @@
+// Size variables
+$breadcrumb-skin: 'highcontrast' !default;
+$breadcrumb-last-item-font-weight: 400 !default;
+$breadcrumb-font-size: 18px !default;
+$breadcrumb-bigger-font-size: 20px !default;
+$breadcrumb-icon-font-size: 18px !default;
+$breadcrumb-icon-bigger-font-size: 20px !default;
+$breadcrumb-padding: 4px 4px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 4px 4px !default;
+$breadcrumb-separator-padding: 4px 3px !default;
+$breadcrumb-separator-bigger-padding: 4px 5px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 4px !default;
+$breadcrumb-collapsed-icon-padding: 5px 8px 3px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 6px 8px 4px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 21px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 21px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 3px 3px !default;
+$breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
+$breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
+$breadcrumb-item-focus-padding: 3px 3px !default;
+$breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+
+// Color variables
+$breadcrumb-item-color: $content-font !default;
+$breadcrumb-icon-color: $content-font !default;
+$breadcrumb-separator-color: $content-font !default;
+$breadcrumb-item-hover-color: $content-font !default;
+$breadcrumb-item-focus-color: $content-font !default;
+$breadcrumb-item-active-color: $selection-font !default;
+$breadcrumb-last-item-font-color: $content-font !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $hover-bg !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $selection-bg !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: transparent !default;
+$breadcrumb-collapsed-icon-color: $content-font !default;
+$breadcrumb-collapsed-icon-hover-color: $content-font !default;
+$breadcrumb-disabled-item-color: $disable !default;
+$breadcrumb-collapsed-icon-focus-color: $content-font !default;
+$breadcrumb-collapsed-icon-focus-border: 1px solid $selection-border !default;
+$breadcrumb-item-hover-bgcolor: $hover-bg !default;
+$breadcrumb-item-active-bgcolor: $selection-bg !default;
+$breadcrumb-item-focus-border: 1px solid $selection-border !default;
+$breadcrumb-icon-hover-color: $content-font !default;
+$breadcrumb-icon-active-color: $selection-font !default;

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

@@ -0,0 +1,48 @@
+// Size variables
+$breadcrumb-skin: 'highcontrast' !default;
+$breadcrumb-last-item-font-weight: 400 !default;
+$breadcrumb-font-size: 18px !default;
+$breadcrumb-bigger-font-size: 20px !default;
+$breadcrumb-icon-font-size: 18px !default;
+$breadcrumb-icon-bigger-font-size: 20px !default;
+$breadcrumb-padding: 4px 4px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 4px 4px !default;
+$breadcrumb-separator-padding: 4px 3px !default;
+$breadcrumb-separator-bigger-padding: 4px 5px !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 4px !default;
+$breadcrumb-collapsed-icon-padding: 5px 8px 3px 8px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 6px 8px 4px 8px !default;
+$breadcrumb-collapsed-icon-font-size: 21px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 21px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -4px !default;
+$breadcrumb-icon-item-padding: 3px 3px !default;
+$breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
+$breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
+$breadcrumb-item-focus-padding: 3px 3px !default;
+$breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+
+// Color variables
+$breadcrumb-item-color: $content-font !default;
+$breadcrumb-icon-color: $content-font !default;
+$breadcrumb-separator-color: $content-font !default;
+$breadcrumb-item-hover-color: $content-font !default;
+$breadcrumb-item-focus-color: $content-font !default;
+$breadcrumb-item-active-color: $selection-font !default;
+$breadcrumb-last-item-font-color: $content-font !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $hover-bg !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $selection-bg !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: transparent !default;
+$breadcrumb-collapsed-icon-color: $content-font !default;
+$breadcrumb-collapsed-icon-hover-color: $content-font !default;
+$breadcrumb-disabled-item-color: $disable !default;
+$breadcrumb-collapsed-icon-focus-color: $content-font !default;
+$breadcrumb-collapsed-icon-focus-border: 1px solid $selection-border !default;
+$breadcrumb-item-hover-bgcolor: $hover-bg !default;
+$breadcrumb-item-active-bgcolor: $selection-bg !default;
+$breadcrumb-item-focus-border: 1px solid $selection-border !default;
+$breadcrumb-icon-hover-color: $content-font !default;
+$breadcrumb-icon-active-color: $selection-font !default;

package/styles/breadcrumb/_layout.scss

@@ -0,0 +1,291 @@
+@include export-module('breadcrumb-layout') {
+  /*! breadcrumb layout */
+  .e-breadcrumb {
+    ol {
+      align-items: center;
+      display: inline-flex;
+      line-height: normal;
+      margin: 0;
+      padding: 0;
+      padding-left: $breadcrumb-padding-left;
+      padding-right: $breadcrumb-padding-right;
+    }
+
+    @if $breadcrumb-skin == 'bootstrap' {
+      background-color: $breadcrumb-bgcolor;
+      border-radius: 4px;
+    }
+
+    li {
+      list-style-type: none;
+      white-space: nowrap;
+    }
+
+    .e-breadcrumb-item {
+      align-items: center;
+      display: flex;
+      padding: $breadcrumb-padding;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+        &.e-focus {
+          padding: $breadcrumb-item-focus-padding;
+
+          @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+            &.e-icon-item {
+              padding: $breadcrumb-icon-only-item-focus-padding;
+            }
+          }
+        }
+      }
+
+      .e-breadcrumb-text {
+        align-items: center;
+        display: flex;
+        font-size: $breadcrumb-font-size;
+
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+          font-weight: $breadcrumb-last-item-font-weight;
+        }
+
+        .e-anchor-wrap {
+          align-items: inherit;
+          display: inherit;
+        }
+      }
+
+      a.e-breadcrumb-text {
+        cursor: pointer;
+        text-decoration: none;
+
+        @if $breadcrumb-skin == 'bootstrap5' {
+          text-decoration: underline;
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: underline;
+        }
+
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'tailwind' {
+          &:hover,
+          &:focus,
+          &:active {
+            text-decoration: none;
+          }
+        }
+      }
+
+      span.e-breadcrumb-text {
+        cursor: default;
+      }
+
+      .e-breadcrumb-icon {
+        font-size: $breadcrumb-icon-font-size;
+        padding-right: $breadcrumb-icon-right-padding;
+
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+          padding-left: $breadcrumb-icon-right-padding;
+        }
+
+        &:hover {
+          text-decoration: none;
+        }
+
+        &::before {
+          display: inline-block;
+          text-decoration: none;
+        }
+
+        @if $breadcrumb-skin == 'bootstrap5' {
+          &::before {
+            vertical-align: middle;
+          }
+
+          &.e-home::before {
+            vertical-align: sub;
+          }
+        }
+
+        &.e-icons.e-home {
+          @if $breadcrumb-skin == 'bootstrap' {
+            font-size: 12px;
+            margin-top: -1px;
+          }
+        }
+      }
+
+      &.e-icon-item .e-breadcrumb-icon {
+        padding: $breadcrumb-icon-item-padding;
+      }
+
+      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
+        &.e-icon-item {
+          padding: $breadcrumb-icon-only-item-padding;
+
+          @if $breadcrumb-skin == 'bootstrap' {
+            margin-left: -16px;
+            margin-right: -6px;
+          }
+        }
+      }
+
+      &.e-disabled {
+        opacity: 1;
+        pointer-events: none;
+      }
+    }
+
+    .e-breadcrumb-separator {
+      display: flex;
+      font-size: $breadcrumb-font-size;
+      padding: $breadcrumb-separator-padding;
+
+      + .e-breadcrumb-separator {
+        margin-left: $breadcrumb-sibling-separator-margin-left;
+        padding-left: $breadcrumb-sibling-separator-padding;
+      }
+    }
+
+    @if $breadcrumb-skin == 'bootstrap5' {
+      .e-icon-item  + .e-breadcrumb-separator {
+        padding-left: $breadcrumb-icon-only-item-next-separator-padding-left;
+      }
+    }
+
+    .e-breadcrumb-collapsed {
+      cursor: pointer;
+      font-size: $breadcrumb-collapsed-icon-font-size;
+      padding: $breadcrumb-collapsed-icon-padding;
+      vertical-align: bottom;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+        &:focus {
+          padding: $breadcrumb-collapsed-icon-focus-padding;
+        }
+      }
+    }
+
+    &.e-icon-right,
+    .e-icon-right,
+    &.e-rtl {
+      .e-breadcrumb-icon {
+        padding-left: $breadcrumb-icon-right-padding;
+        padding-right: 0;
+
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+          padding-right: $breadcrumb-icon-right-padding;
+        }
+      }
+    }
+
+    &.e-rtl .e-icon-right {
+      padding-left: 0;
+      padding-right: $breadcrumb-icon-right-padding;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+        padding-left: $breadcrumb-icon-right-padding;
+      }
+    }
+
+    &.e-disabled {
+      opacity: 1;
+
+      .e-breadcrumb-item,
+      .e-breadcrumb-separator,
+      .e-breadcrumb-collapsed {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .e-bigger.e-breadcrumb,
+  .e-bigger .e-breadcrumb {
+    .e-breadcrumb-item {
+      padding: $breadcrumb-bigger-padding;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+        &.e-focus {
+          padding: $breadcrumb-item-focus-bigger-padding;
+
+          @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+            &.e-icon-item {
+              padding: $breadcrumb-icon-only-item-focus-bigger-padding;
+            }
+          }
+        }
+      }
+
+      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
+        &.e-icon-item {
+          padding: $breadcrumb-icon-only-item-bigger-padding;
+        }
+      }
+
+      .e-breadcrumb-text {
+        font-size: $breadcrumb-bigger-font-size;
+
+        .e-breadcrumb-icon {
+          font-size: $breadcrumb-icon-bigger-font-size;
+          padding-right: $breadcrumb-icon-bigger-right-padding;
+
+          @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+            padding-left: $breadcrumb-icon-bigger-right-padding;
+          }
+        }
+
+        .e-breadcrumb-icon.e-icons.e-home {
+          @if $breadcrumb-skin == 'bootstrap' {
+            font-size: 13px;
+          }
+        }
+      }
+
+      &.e-icon-item .e-breadcrumb-text .e-breadcrumb-icon {
+        padding: $breadcrumb-icon-item-padding;
+      }
+    }
+
+    .e-breadcrumb-separator {
+      font-size: $breadcrumb-bigger-font-size;
+      padding: $breadcrumb-separator-bigger-padding;
+
+      + .e-breadcrumb-separator {
+        padding-left: $breadcrumb-sibling-separator-padding;
+      }
+    }
+
+    .e-breadcrumb-collapsed {
+      font-size: $breadcrumb-collapsed-icon-bigger-font-size;
+      padding: $breadcrumb-collapsed-icon-bigger-padding;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+        &:focus {
+          padding: $breadcrumb-collapsed-icon-focus-bigger-padding;
+        }
+      }
+    }
+
+    &.e-icon-right,
+    .e-icon-right,
+    &.e-rtl {
+      .e-breadcrumb-text .e-breadcrumb-icon {
+        padding-left: $breadcrumb-icon-bigger-right-padding;
+        padding-right: 0;
+
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+          padding-right: $breadcrumb-icon-bigger-right-padding;
+        }
+      }
+    }
+
+    &.e-rtl .e-icon-right .e-breadcrumb-text .e-breadcrumb-icon {
+      padding-left: 0;
+      padding-right: $breadcrumb-icon-bigger-right-padding;
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' {
+        padding-left: $breadcrumb-icon-bigger-right-padding;
+      }
+    }
+  }
+}