@syncfusion/ej2-navigations 20.4.53 → 21.1.37

package/styles/treeview/_bootstrap5-definition.scss

@@ -1,8 +1,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 $treeview-font-size: $text-sm !default;
-$treeview-icon-font-size: 20px !default;
-$treeview-image-font-size: 20px !default;
+$treeview-icon-font-size: $text-xl !default;
+$treeview-image-font-size: $text-xl !default;
 $treeview-item-height: 36px !default;
 $treeview-text-height: 34px !default;
 $treeview-input-height: 30px !default;
@@ -44,7 +44,7 @@ $treeview-icon-wrap-width: calc(100% - 32px) !default;
 $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-font-size: $text-base !default;
-$treeview-big-icon-font-size: 24px !default;
+$treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 42px !default;
 $treeview-big-text-height: 40px !default;
 $treeview-big-input-height: 40px !default;
@@ -68,7 +68,7 @@ $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
 $treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
-$treeview-big-drag-icon-font-size: 24px !default;
+$treeview-big-drag-icon-font-size: $text-2xl !default;
 $treeview-big-drag-item-text-padding-left: 24px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
 $treeview-big-check-text-padding: 0 12px !default;
@@ -79,7 +79,7 @@ $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
 
 $treeview-font-family: $font-family !default;
-$treeview-drag-icon-font-size: 20px !default;
+$treeview-drag-icon-font-size: $text-xl !default;
 $treeview-drag-icon-padding: 12px !default;
 
 //treeview ripple effect variables

package/styles/treeview/_fluent-definition.scss

@@ -1,8 +1,8 @@
 /*! TreeView's bootstrap5 theme wise override definitions and variables */
 /* stylelint-disable */
 $treeview-font-size: $text-sm !default;
-$treeview-icon-font-size: 20px !default;
-$treeview-image-font-size: 20px !default;
+$treeview-icon-font-size: $text-xl !default;
+$treeview-image-font-size: $text-xl !default;
 $treeview-item-height: 38px !default;
 $treeview-text-height: 36px !default;
 $treeview-input-height: 30px !default;
@@ -44,7 +44,7 @@ $treeview-icon-wrap-width: calc(100% - 32px) !default;
 $treeview-icon-img-wrap-width: calc(100% - 60px) !default;
 
 $treeview-big-font-size: $text-base !default;
-$treeview-big-icon-font-size: 24px !default;
+$treeview-big-icon-font-size: $text-2xl !default;
 $treeview-big-item-height: 44px !default;
 $treeview-big-text-height: 40px !default;
 $treeview-big-input-height: 40px !default;
@@ -68,7 +68,7 @@ $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
 $treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
-$treeview-big-drag-icon-font-size: 14px !default;
+$treeview-big-drag-icon-font-size: $text-sm !default;
 $treeview-big-drag-item-text-padding-left: 16px !default;
 $treeview-big-drag-before-icon-padding: 14px !default;
 $treeview-big-check-text-padding: 0 16px !default;
@@ -79,7 +79,7 @@ $treeview-big-icon-wrap-width: calc(100% - 36px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 69px) !default;
 
 $treeview-font-family: $font-family !default;
-$treeview-drag-icon-font-size: 12px !default;
+$treeview-drag-icon-font-size: $text-xs !default;
 $treeview-drag-icon-padding: 12px !default;
 
 //treeview ripple effect variables

package/styles/treeview/_layout.scss

@@ -67,7 +67,7 @@
       }
     }
 
-    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
+    @if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3' {
       .e-ul {
         padding: $treeview-big-root-ul-padding;
       }
@@ -142,7 +142,9 @@
       }
 
       .e-list-text {
-        padding: 0;
+        @if ($skin-name != 'Material3') {
+          padding: 0;
+        }
         width: 100%;
       }
 
@@ -263,7 +265,7 @@
       @if $skin-name == 'bootstrap4' {
         font-size: $treeview-big-image-font-size;
       }
-      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI') {
+      @if ($skin-name == 'bootstrap4' or $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' or $skin-name == 'Material3') {
         & + .e-list-text {
           padding: $treeview-big-image-text-padding;
         }
@@ -800,7 +802,9 @@
       }
 
       .e-list-url {
-        padding: 0;
+        @if ($skin-name != 'Material3') {
+          padding: 0;
+        }
         width: 100%;
       }
 

package/styles/treeview/_tailwind-definition.scss

@@ -1,10 +1,10 @@
 /*! TreeView's tailwind theme wise override definitions and variables */
 /* stylelint-disable */
 $treeview-font-size: $text-sm !default;
-$treeview-icon-font-size: 20px !default;
-$treeview-image-font-size: 20px !default;
+$treeview-icon-font-size: $text-xl !default;
+$treeview-image-font-size: $text-xl !default;
 $treeview-big-font-size: $text-base !default;
-$treeview-big-icon-font-size: 24px !default;
+$treeview-big-icon-font-size: $text-2xl !default;
 $treeview-item-height: 38px !default;
 $treeview-text-height: 36px !default;
 $treeview-input-height: 30px !default;
@@ -72,7 +72,7 @@ $treeview-big-icon-margin: 0 0 0 -24px !default;
 $treeview-big-rtl-icon-margin: 0 -24px 0 0 !default;
 $treeview-big-text-wrap-padding: 0 0 0 24px !default;
 $treeview-big-rtl-text-wrap-padding: 0 24px 0 0 !default;
-$treeview-big-drag-icon-font-size: 24px !default;
+$treeview-big-drag-icon-font-size: $text-2xl !default;
 $treeview-big-drag-item-text-padding-left: 12px !default;
 $treeview-big-drag-icon-margin:-6px 0px 5px -9px !default;
 $treeview-big-drag-before-icon-padding: 6px !default;
@@ -84,7 +84,7 @@ $treeview-big-icon-wrap-width: calc(100% - 35px) !default;
 $treeview-big-icon-img-wrap-width: calc(100% - 71px) !default;
 
 $treeview-font-family: $font-family !default;
-$treeview-drag-icon-font-size: 20px !default;
+$treeview-drag-icon-font-size: $text-xl !default;
 $treeview-drag-icon-padding: 6px !default;
 $treeview-drag-icon-margin: 0 8px 10px -20px;
 $treeview-drag-icon-padding-right: 4px !default;

package/styles/treeview/_theme.scss

@@ -224,12 +224,12 @@
       }
     }
 
-    .e-list-item.e-active.e-hover > .e-fullrow {
+    .e-list-item.e-active.e-hover > .e-fullrow{
       @include active-hover-theme;
     }
 
     .e-list-item.e-editing.e-active > .e-fullrow,
-    .e-list-item.e-editing.e-hover > .e-fullrow {
+    .e-list-item.e-editing.e-hover > .e-fullrow{
       @include active-editing-theme;
     }
 
@@ -295,7 +295,7 @@
 
     &:not(.e-fullrow-wrap) {
 
-      .e-list-item.e-hover > .e-text-content {
+      .e-list-item.e-hover > .e-text-content{
         background-color: $treeview-item-hover-bg;
         border-color: $treeview-item-hover-border-color;
       }
@@ -325,6 +325,9 @@
     &.e-drag-item {
       background-color: $treeview-drag-item-bg;
       font-family: $treeview-font-family;
+      @if ($skin-name == 'Material3') {
+        background: $treeview-drag-item-bg;
+      }
 
       .e-icon-collapsible::before,
       .e-icon-expandable::before {

package/styles/accordion/_material3-definition.scss

@@ -1,181 +0,0 @@
-/*! Accordion's bootstrap5 theme wise override definitions and variables */
-/* stylelint-disable */
-$acrdn-skin: 'bootstrap5' !default;
-
-// font definitions
-$acrdn-icon-font-size: $text-lg !default;
-$acrdn-slct-header-font-weight: $font-weight-normal;
-$acrdn-header-font: $content-text-color !default;
-$acrdn-nested-header-font: $content-text-color !default;
-$acrdn-header-font-weight: $font-weight-normal !default;
-$acrdn-header-font-size: $text-sm !default;
-$acrdn-nest-header-font-size: $text-sm !default;
-$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
-$acrdn-nest-header-content-font-weight: normal !default;
-$acrdn-content-font-size: $text-sm !default;
-$acrdn-header-font-bgr-size: $text-base !default;
-$acrdn-content-font-bgr-size: $text-base !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-item-header-content-font-size: 16px !default;
-$acrdn-icon-font-size: 18px !default;
-$acrdn-selected-header-font-color: $primary !default;
-
-// Header, Nested header and RTL mode Padding
-$acrdn-nest-nrml-header-padding: 8px 0 8px 26px !default;
-$acrdn-nest-bgr-header-padding: 12px 0 12px 28px !default;
-$acrdn-nest-second-nrml-header-padding: 8px 0 8px 38px !default;
-$acrdn-nest-second-bgr-header-padding: 12px 0 12px 40px !default;
-$acrdn-nrml-header-padding: 10px 16px !default;
-$acrdn-bgr-header-padding: 13px 20px !default;
-$acrdn-rtl-nrml-header-padding: 7px 12px !default;
-$acrdn-rtl-bgr-header-padding: 11px 17px !default;
-$acrdn-rtl-nest-nrml-header-padding: 8px 26px 8px 0 !default;
-$acrdn-rtl-nest-bgr-header-padding: 12px 28px 12px 0 !default;
-$acrdn-rtl-nest-second-nrml-header-padding: 8px 38px 8px 0 !default;
-$acrdn-rtl-nest-second-bgr-header-padding: 12px 40px 12px 0 !default;
-
-// Content, Nested content and RTL mode Padding
-$acrdn-nrml-content-padding: 12px !default;
-$acrdn-bgr-content-padding: 16px !default;
-$acrdn-nest-nrml-content-padding: 16px 16px 16px 26px !default;
-$acrdn-nest-bgr-content-padding: 20px 20px 20px 28px !default;
-$acrdn-nest-second-nrml-content-padding: 20px 20px 20px 38px !default;
-$acrdn-nest-second-bgr-content-padding: 24px 24px 24px 40px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px 26px 16px 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 20px 28px 20px 20px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 20px 38px 20px 20px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 24px 40px 24px 24px !default;
-
-// dimension definitions
-$acrdn-border-radius: 4px !default;
-$acrdn-nrml-header-minheight: 38px !default;
-$acrdn-bgr-header-minheight: 48px !default;
-$acrdn-nrml-header-lineheight: 22px !default;
-$acrdn-bgr-header-lineheight: 24px !default;
-$acrdn-nrml-header-paddingpix: 16px !default;
-$acrdn-bgr-header-paddingpix: 16px !default;
-$acrdn-content-line-height: 1.5 !default;
-$acrdn-nrml-header-icon-padding: 8px !default;
-$acrdn-bgr-header-icon-padding: 12px !default;
-$acrdn-nrml-icn-minwidth: 22px !default;
-$acrdn-bgr-icn-minwidth: 24px !default;
-$acrdn-selected-border-size: 1px !default;
-$acrdn-item-padding-size: 0 !default;
-$acrdn-selected-border-type: none !default;
-$acrdn-border-type: solid !default;
-$acrdn-border-size: 1px !default;
-
-$acrdn-item-hdr-con-lineheight: 22px !default;
-$acrdn-item-selected-first-child-border-top: 1px none $border-light !default;
-$acrdn-item-selected-last-child-border-bottom: 1px solid $border-light !default;
-$acrdn-item-border-radius: 0 !default;
-$acrdn-item-margin-top: 0 !default;
-$acrdn-item-nested-panel-item-select-margin: 0 !default;
-$acrdn-item-overflow: visible !default;
-$acrdn-item-hover-focus-hdr-con-text-decoration: none !default;
-$acrdn-item-hdr-border-radius: 0 !default;
-$acrdn-item-hdr-margin-bottom: 4px !default;
-$acrdn-item-tgl-icon-display: table !default;
-$acrdn-item-arrow-icon-font-size: 18px !default;
-$acrdn-opacity: .5 !default;
-
-// color definitions
-$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
-$acrdn-active-bg: $content-bg-color !default;
-$acrdn-bg-color: $content-bg-color !default;
-$acrdn-default-bg-color: $acrdn-bg-color !default;
-$acrdn-active-bg-color: $acrdn-active-bg !default;
-$acrdn-selected-header-color: $content-bg-color !default;
-$acrdn-icon-color: $icon-color !default;
-$acrdn-selected-icon-color: $primary !default;
-$acrdn-content-color: $content-text-color !default;
-$acrdn-selected-border-color: $border-light !default;
-$acrdn-header-focus-bg: $primary-lighter !default;
-$acrdn-header-hover-bg: $primary-lighter !default;
-$acrdn-header-active-bg: $primary-lighter !default;
-$acrdn-item-header-focus-border-color: $primary !default;
-$acrdn-item-icon-disable-color: $icon-color-disabled;
-$acrdn-text-disable-color: $content-text-color-disabled;
-$acrdn-default-border: $acrdn-selected-border-color !default;
-
-$acrdn-item-border-color: $acrdn-default-border !default;
-$acrdn-item-border-nav-type: solid !default;
-$acrdn-item-border-size: 0 0 1px 0 !default;
-$acrdn-item-select-last-child-border-bottom: 0 !default;
-$acrdn-item-select-last-child-border-radius: 0 !default;
-$acrdn-item-first-child-hdr-focus-border-radius: 4px 4px 0 0 !default;
-$acrdn-item-last-child-border-bottom: 0 !default;
-$acrdn-item-last-child-not-exp-hdr-focus-border-radius: 0 0 4px 4px !default;
-$acrdn-item-focus-border-color: $acrdn-default-border !default;
-$acrdn-item-focus-border-size: 0 0 1px 0 !default;
-$acrdn-item-focus-selected-exp-border-top: 1px none $acrdn-default-border !default;
-$acrdn-item-focus-selected-exp-hdr-focus-border-color: $acrdn-default-border !default;
-$acrdn-item-focus-selected-exp-hdr-focus-border-type: solid !default;
-$acrdn-item-focus-selected-exp-hdr-focus-border-size:  0 0 1px 0 !default;
-$acrdn-item-focus-exp-hdr-hover-focus-bg-color: $primary-lighter !default;
-$acrdn-item-focus-exp-hdr-hover-focus-color: $acrdn-selected-header-font-color !default;
-$acrdn-item-focus-selected-hdr-icons-font: $acrdn-selected-header-font-color !default;
-$acrdn-item-focus-exp-hdricon-hover-font: $acrdn-icon-color !default;
-$acrdn-item-focus-selected-exp-border-color: $acrdn-default-border !default;
-$acrdn-item-exp-select-border-color: $acrdn-default-border !default;
-$acrdn-item-exp-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-header-border: 0 !default;
-$acrdn-item-select-exp-hdr-con-disable-font: $content-text-color-disabled !default;
-$acrdn-item-header-content-disable-color: $content-text-color !default;
-$acrdn-item-hdr-con-text-disabled-font: $content-text-color-disabled !default;
-$acrdn-item-selected-exp-hdr-focus-border-color: $border-light !default;
-$acrdn-item-selected-exp-hdr-focus-border-type: solid !default;
-$acrdn-item-selected-exp-hdr-focus-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-exp-hdr-focus-bg: $primary-lighter !default;
-$acrdn-item-selected-exp-hdr-hover-bg: $primary-lighter !default;
-$acrdn-item-selected-exp-hdr-active-bg: $primary-lighter !default;
-$acrdn-item-nes-pan-con-last-child-border-bottom: 1px none $acrdn-selected-border-color !default;
-$acrdn-item-select-bg: none !default;
-$acrdn-item-select-border-color: $border-light !default;
-$acrdn-item-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-panel-content-select-bg: none !default;
-$acrdn-item-panel-content-select-border-top: 0 !default;
-$acrdn-item-header-hover-border: 0 !default;
-$acrdn-item-header-hover-bg: none !default;
-$acrdn-item-header-hover-border-color: initial !default;
-$acrdn-item-header-active-border: 0 !default;
-$acrdn-item-header-active-border-color: initial !default;
-$acrdn-item-header-focus-border: 0 !default;
-$acrdn-item-header-focus-box-shadow: $shadow-focus-ring1 !default;
-$acrdn-item-header-focus-bg: none !default;
-$acrdn-item-header-focus-active-color: $content-text-color !default;
-$acrdn-item-select-exp-hdr-hover-color: $primary !default;
-$acrdn-item-selected-exp-hdr-border-color: $border-light !default;
-$acrdn-item-selected-exp-hdr-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-exp-hdr-bg: $primary-lighter !default;
-$acrdn-item-selected-exp-hdr-hover-color: $primary !default;
-$acrdn-item-selected-exp-hdr-hover-focus-color: $primary !default;
-$acrdn-item-selected-exp-hdr-icon-color: $icon-color !default;
-$acrdn-item-selected-exp-hdr-hover-border-color: $border-light !default;
-$acrdn-item-selected-tgl-icon-color: $primary !default;
-$acrdn-item-selected-hdr-font: $primary !default;
-$acrdn-item-select-hdr-focus-border-color: $border-light !default;
-$acrdn-item-selected-border-color: $border-light !default;
-$acrdn-item-selected-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-select-last-border-bottom: 1px none $border-light !default;
-$acrdn-item-selected-selected-border-color: $border-light !default;
-$acrdn-item-selected-selected-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-header-background: $primary-lighter !default;
-$acrdn-item-selected-hdr-border-color: $border-light !default;
-$acrdn-item-selected-hdr-border-size:  0 0 1px 0 !default;
-$acrdn-item-selected-header-border-radius: 0 !default;
-$acrdn-item-selected-hdr-con-font: $primary !default;
-$acrdn-item-selected-select-border-color: $border-light !default;
-$acrdn-item-selected-select-border-size: 0 0 1px 0 !default;
-$acrdn-item-selected-hdr-icon-font: $primary !default;
-$acrdn-item-selected-exp-hdr-con-hover-color: $primary !default;
-$acrdn-item-selected-exp-hdr-icon-hover-color: $icon-color !default;
-$acrdn-item-selected-select-active-bg: $content-bg-color !default;
-$acrdn-item-nes-pan-exp-hdr-color: $content-text-color !default;
-$acrdn-item-selected-hdr-hover-border-color: $border-light !default;
-$acrdn-item-selected-hdr-tgl-icon-hover-font: $primary !default;
-$acrdn-item-nes-selected-exp-hover-hdr-icons-font: $primary !default;
-$acrdn-item-nes-selected-exp-hover-hdr-con-font: $content-text-color !default;
-$acrdn-item-exp-not-selected-hdr-focus-bg: none !default;
-$acrdn-item-exp-not-selected-hdr-focus-border: 0 !default;
-$acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;

package/styles/appbar/_material3-definition.scss

@@ -1,8 +0,0 @@
-/*! AppBar component bootstrap5 theme definitions and variables */
-
-$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/breadcrumb/_material3-definition.scss

@@ -1,59 +0,0 @@
-// 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/carousel/_material3-definition.scss

@@ -1,22 +0,0 @@
-/*! 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/context-menu/_material3-definition.scss

@@ -1,52 +0,0 @@
-//layout variables
-$cmenu-back-icon: '\e977' !default;
-$cmenu-back-icon-margin: 8px !default;
-$cmenu-bigger-caret-font-size: 16px !default;
-$cmenu-bigger-font-size: $text-base !default;
-$cmenu-bigger-li-height: 32px !default;
-$cmenu-bigger-li-padding: 0 16px !default;
-$cmenu-bigger-max-width: 280px !default;
-$cmenu-bigger-min-width: 112px !default;
-$cmenu-caret-blank-icon: 14px !default;
-$cmenu-caret-font-size: 16px !default;
-$cmenu-caret-icon: '\e956' !default;
-$cmenu-caret-icon-rtl: '\e937' !default;
-$cmenu-caret-li-padding: 36px !default;
-$cmenu-caret-right: 7px !default;
-$cmenu-icon-margin-right: 8px !default;
-$cmenu-li-height: 30px !default;
-$cmenu-li-padding: 0 12px !default;
-$cmenu-li-right-padding: 12px !default;
-$cmenu-li-border-width: 1px !default;
-$cmenu-max-width: 240px !default;
-$cmenu-icon-font-size: 18px !default;
-$cmenu-icon-bigger-font-size: 22px !default;
-$cmenu-min-width: 120px !default;
-$cmenu-parent-ul-box-shadow: $shadow-lg !default;
-$cmenu-seperator-bigger-padding: 4px 0 !default;
-$cmenu-seperator-padding: 4px 0 !default;
-$cmenu-ul-border: 1px solid $border-light !default;
-$cmenu-ul-border-radius: 4px !default;
-$cmenu-ul-padding: 0 !default;
-$cmenu-ul-bigger-padding: 4px 0 !default;
-$cmenu-caret-color: $icon-color !default;
-$cmenu-color: $content-text-color !default;
-$cmenu-disable-text: rgba($content-text-color, .65) !default;
-$cmenu-font-size: $text-sm !default;
-$cmenu-font-weight: $font-weight-normal !default;
-$cmenu-li-bgcolor: $flyout-bg-color-hover !default;
-$cmenu-li-border-color: $border-light !default;
-$cmenu-li-border-style: solid !default;
-$cmenu-li-selection-bgcolor: $flyout-bg-color-pressed !default;
-$cmenu-li-selection-font-color: $content-text-color-focus !default;
-$cmenu-li-hover-outline-offset: 0 !default;
-$cmenu-li-selected-outline: 0 solid $cmenu-li-selection-bgcolor !default;
-$cmenu-li-selected-outline-offset: 0 !default;
-$cmenu-icon-color: $icon-color !default;
-$cmenu-icon-disabled-color: rgba($icon-color, .65) !default;
-$cmenu-selected-color: $flyout-text-color-pressed !default;
-$cmenu-sub-ul-box-shadow: $shadow-lg !default;
-$cmenu-ul-bgcolor: $flyout-bg-color !default;
-$cmenu-li-hover-outline: 0 solid $cmenu-li-border-color !default;
-$cmenu-caret-hover-color: $flyout-text-color-pressed !default;
-$cmenu-hover-icon-color: $flyout-text-color-pressed !default;

package/styles/h-scroll/_material3-definition.scss

@@ -1,84 +0,0 @@
-/*! component's theme wise override definitions and variables */
-$hscroll-skin: 'bootstrap5' !default;
-$border-type: solid;
-$hscroll-hover-font: $icon-color !default;
-$hscroll-active-font-color: $content-text-color-alt2 !default;
-$hscroll-default-bg: $content-bg-color-alt2 !default;
-$hscroll-press-bg: $content-bg-color-alt2 !default;
-$hscroll-active-bg: $content-bg-color-alt2 !default;
-$hscroll-border-size: 1px !default;
-$hscroll-nav-nrml-minheight: 38px !default;
-$hscroll-nav-bgr-minheight: 46px !default;
-$hscroll-mob-nav-nrml-width: 40px !default;
-$hscroll-nav-nrml-width: 32px !default;
-$hscroll-nav-bgr-width: 38px !default;
-$hscroll-nrml-padding: 0 $hscroll-nav-nrml-width !default;
-$hscroll-bgr-padding: 0 $hscroll-nav-bgr-width !default;
-$hscroll-border-type: $border-type !default;
-$hscroll-box-shadow: none !default;
-$hscroll-hover-bg: $content-bg-color-alt3 !default;
-$hscroll-hover-border-color: $border-light !default;
-$hscroll-default-icon-color: $icon-color !default;
-$hscroll-focus-border: 0 !default;
-$hscroll-active-border: 0 !default;
-$hscroll-hover-border: 0 !default;
-$hscroll-active-box-shadow: none !default;
-$hscroll-overlay-opacity: .5 !default;
-$hscroll-overlay-bg: $content-bg-color-alt2 !default;
-$hscroll-overlay-start: rgba($hscroll-overlay-bg, 0) !default;
-$hscroll-overlay-end: rgba($hscroll-overlay-bg, 1) !default;
-$hscroll-right-bg: linear-gradient(-270deg, $hscroll-overlay-start 0%, $hscroll-overlay-end 100%) !default;
-$hscroll-left-bg:  linear-gradient(-270deg, $hscroll-overlay-end 0%, $hscroll-overlay-start 100%) !default;
-
-$hscroll-device-arrow-box-shadow: $shadow !default;
-$hscroll-device-arrow-rtl-box-shadow: $shadow !default;
-$hscroll-device-arrow-bg: $content-bg-color-alt2 !default;
-$hscroll-device-arrow-border-size: 1px !default;
-$hscroll-device-arrow-border-color: $border-light !default;
-$hscroll-device-arrow-color: $icon-color !default;
-$hscroll-device-arrow-size: 18px !default;
-$hscroll-device-arrow-icon-size: 18px !default;
-$hscroll-device-arrow-size-bigger: 22px !default;
-$hscroll-device-arrow-width: 48px !default;
-
-$hscroll-default-border: $hscroll-hover-border-color !default;
-$hscroll-ribble-animation-border-frame: rgba(255, 255, 255, .5) !default;
-$hscroll-ribble-animation-shadow-frame: 0 0 0 0 $hscroll-ribble-animation-border-frame !default;
-$hscroll-ribble-animation-shadow-frame-end: 0 0 0 200px rgba(255, 255, 255, .12) !default;
-
-$hscroll-nav-hover-press-bg: $hscroll-hover-bg !default;
-$hscroll-nav-hover-icons-color: $hscroll-default-icon-color !default;
-$hscroll-nav-hover-border: $hscroll-hover-border !default;
-$hscroll-nav-focus-bg-color: $hscroll-hover-bg !default;
-$hscroll-nav-focus-border: $hscroll-focus-border !default;
-$hscroll-nav-active-color: $hscroll-default-icon-color !default;
-
-@mixin hscroll-btn-animation {
-  background-color: transparent;
-  border-radius: 50%;
-  border-width: 1px;
-  box-sizing: border-box;
-  content: '';
-  height: 1px;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  visibility: hidden;
-  width: 1px;
-}
-
-@mixin hscroll-btn-animation-after {
-  animation: hscroll-popup-shadow .6s ease-out 0ms;
-  visibility: visible;
-}
-
-@keyframes hscroll-popup-shadow {
-  0% {
-    border-color: $hscroll-ribble-animation-border-frame;
-    box-shadow: $hscroll-ribble-animation-shadow-frame;
-  }
-
-  100% {
-    box-shadow: $hscroll-ribble-animation-shadow-frame-end;
-  }
-}

package/styles/menu/_material3-definition.scss

@@ -1,67 +0,0 @@
-//layout variables
-$menu-bigger-caret-font-size: $cmenu-bigger-caret-font-size !default;
-$menu-bigger-caret-li-padding: 32px !default;
-$menu-bigger-caret-right: 12px !default;
-$menu-bigger-font-size: $text-base !default;
-$menu-bigger-li-height: 38px !default;
-$menu-bigger-li-icon-height: 40px !default;
-$menu-bigger-li-padding: 0 16px !default;
-$menu-bigger-li-text-indent: 15px !default;
-$menu-bigger-li-right-padding: 12px !default;
-$menu-bigger-icon-margin-right: 12px !default;
-$menu-icon-width: 1em !default;
-$menu-blank-icon: 34px !default;
-$menu-blank-icon-bigger: 41px !default;
-$menu-caret-font-size: 14px !default;
-$menu-caret-icon: '\e706' !default;
-$menu-caret-icon-rtl: '\e70f' !default;
-$menu-caret-right: 8px !default;
-$menu-caret-li-padding: 26px !default;
-$menu-ul-padding: 0 !default;
-$menu-separator-bigger-padding: 0 !default;
-$menu-ul-bigger-header-padding: 0 !default;
-$menu-caret-padding-left: 8px !default;
-$menu-disable-opacity: .65 !default;
-$menu-font-size: $text-sm !default;
-$menu-icon-margin-right: 8px !default;
-$menu-li-hover-outline-offset: 0 !default;
-$menu-li-border-style: solid !default;
-$menu-li-border-width: 1px !default;
-$menu-li-height: 32px !default;
-$menu-li-padding: 0 12px !default;
-$menu-li-text-indent: 12px !default;
-$menu-li-right-padding: 12px !default;
-$menu-separator-padding: 0 !default;
-$menu-icon-font-size: 18px !default;
-$menu-icon-bigger-font-size: 22px !default;
-$menu-li-selected-outline-offset: 0 !default;
-$menu-hscroll-nav-size: 28px !default;
-$menu-vscroll-nav-size: 28px !default;
-$menu-scroll-nav-icon-size: 16px !default;
-$menu-bigger-hscroll-nav-size: 40px !default;
-$menu-bigger-vscroll-nav-size: 32px !default;
-$menu-bigger-scroll-nav-icon-size: 18px !default;
-$menu-header-icon-padding: 0 16px !default;
-$menu-icon-li-height: 35px !default;
-$menu-li-bgcolor: $content-bg-color-alt3 !default;
-$menu-li-border-color: $border-light !default;
-$menu-li-selection-bgcolor: $content-bg-color-alt3 !default;
-$menu-li-selected-outline: 0 solid $menu-li-selection-bgcolor !default;
-$menu-li-selection-font-color: $content-text-color !default;
-$menu-ul-header-padding: $menu-ul-padding !default;
-$menu-color: $content-text-color !default;
-$menu-seperator-border-color: $border-light !default;
-$menu-selected-color: $content-text-color !default;
-$menu-sub-ul-bgcolor: $content-bg-color-alt2 !default;
-$menu-sub-li-border-color: $border-light !default;
-$menu-ul-bgcolor: $content-bg-color-alt1 !default;
-$menu-ul-border: none !default;
-$menu-li-hover-outline: 0 solid $menu-li-border-color !default;
-$menu-srollbar-ul-border: none !default;
-$submenu-caret-font-size: $menu-caret-font-size !default;
-$submenu-bigger-caret-font-size: $submenu-caret-font-size !default;
-$submenu-color: $content-text-color !default;
-$menu-icon-color: $icon-color !default;
-$menu-icon-hover-color: $content-text-color !default;
-$menu-icon-focussed-color: $cmenu-caret-color !default;
-$menu-caret-color: $cmenu-caret-color !default;