@syncfusion/ej2-navigations 19.3.57 → 19.4.47

package/styles/accordion/_highcontrast-definition.scss

@@ -2,9 +2,11 @@
 /*! component's theme wise override fabric-definitions and variables */
 $acrdn-skin: 'highcontrast' !default;
 $acrdn-disable-color: $disable !default;
-$acrdn-header-font-bgr-size: 16px !default;
+$acrdn-header-font-bgr-size: 14px !default;
 $acrdn-content-font-bgr-size: 14px !default;
 $acrdn-nest-header-font-size: 14px !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: 600 !default;
 $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-slct-header-font-weight: 600 !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
@@ -74,7 +76,9 @@ $acrdn-selected-border-type: $border-type !default;
 $acrdn-selected-border-color: $border-default !default;
 
 $acrdn-bg: $bg-base-0 !default;
+$acrdn-default-bg-color: $acrdn-bg !default;
 $acrdn-active-item-bg: $bg-base-0 !default;
+$acrdn-active-bg-color: $acrdn-active-item-bg !default;
 $acrdn-focus-hdr-focus-border-color: $bg-base-100 !default;
 $acrdn-focus-exp-hdr-focus-border-color: $bg-base-100 !default;
 $acrdn-focus-exp-hdr-hover-focus-color: $selection-font !default;

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

@@ -5,10 +5,13 @@ $acrdn-icon-font-size: $font-size !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;
 $acrdn-nest-header-font-size: 14px !default;
+$acrdn-nest-header-content-font-size: $acrdn-nest-header-font-size !default;
+$acrdn-nest-header-content-font-weight: normal !default;
 $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-slct-header-font-weight: normal !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bg-color: $default-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-bg: $bg-base-0 !default;
 $acrdn-active-item-bg: $bg-base-0 !default;
 $acrdn-focus-hdr-focus-border-color: $bg-base-100 !default;
@@ -42,6 +45,7 @@ $acrdn-selected-hdr-hover-color: $hover-border !default;
 $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-active-bg: $default-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-nested-header-font: $header-font-color !default;
 $acrdn-nrml-header-minheight: 40px !default;
 $acrdn-bgr-header-minheight: 50px !default;

package/styles/accordion/_layout.scss

@@ -12,10 +12,6 @@
           line-height: $acrdn-bgr-item-header-content-line-height;
           vertical-align: middle;
         }
-
-        @if $acrdn-skin == 'highcontrast' {
-          font-size: 14px;
-        }
       }
     }
 
@@ -273,6 +269,10 @@
         text-overflow: ellipsis;
         white-space: nowrap;
 
+        @if $acrdn-skin == 'bootstrap5' {
+          margin-bottom: 4px;
+        }
+
         > * {
           display: inline-block;
         }
@@ -352,11 +352,7 @@
           }
 
           .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-            font-weight: normal;
-
-            @if $acrdn-skin == 'highcontrast' {
-              font-weight: 600;
-            }
+            font-weight: $acrdn-nest-header-content-font-weight;
           }
 
           .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
@@ -394,11 +390,7 @@
           }
 
           .e-acrdn-header-content {
-            font-size: $acrdn-nest-header-font-size;
-
-            @if $acrdn-skin == 'bootstrap4' {
-              font-size: $acrdn-content-font-size;
-            }
+            font-size: $acrdn-nest-header-content-font-size;
           }
         }
       }

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

@@ -8,6 +8,7 @@ $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-slct-header-font-weight: normal !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bg-color: $grey-dark !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
 $acrdn-content-line-height: 1.5 !default;
 $acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !default;
 $acrdn-nrml-header-minheight: 36px !default;
@@ -47,6 +48,7 @@ $acrdn-bgr-header-icon-padding: 14px !default;
 $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-active-bg: $grey-dark !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-bg-color: $grey-dark !default;
 $acrdn-selected-header-font-color: $grey-dark-font !default;
 $acrdn-selected-header-color: none !default;
@@ -58,6 +60,8 @@ $acrdn-nested-header-font:  rgba($grey-dark-font, .7) !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-header-font-size: 15px !default;
 $acrdn-nest-header-font-size: 14px !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: 13px !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;

package/styles/accordion/_material-definition.scss

@@ -45,6 +45,8 @@ $acrdn-nrml-icn-minwidth: 24px !default;
 $acrdn-bgr-icn-minwidth: 30px !default;
 $acrdn-active-bg: $default-bg-color !default;
 $acrdn-bg-color: $default-bg-color !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
 $acrdn-selected-header-font-color: $accent !default;
 $acrdn-selected-header-color: $header-bg-color !default;
 $acrdn-icon-color: rgba($grey-light-font, .54) !default;
@@ -55,6 +57,8 @@ $acrdn-nested-header-font:  rgba($grey-light-font, .54) !default;
 $acrdn-header-font-weight: normal !default;
 $acrdn-header-font-size: 15px !default;
 $acrdn-nest-header-font-size: 14px !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: 13px !default;
 $acrdn-header-font-bgr-size: 16px !default;
 $acrdn-content-font-bgr-size: 14px !default;

package/styles/accordion/_tailwind-definition.scss

@@ -1,79 +1,83 @@
-//default
-/*! component's theme wise override tailwind-definitions and variables */
-$acrdn-skin: 'tailwind' !default;
-$acrdn-slct-header-font-weight: $font-weight-medium;
-
-$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-icon-font-size: $text-lg !default;
-$acrdn-content-line-height: 1.5 !default;
-$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !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: 7px 12px !default;
-$acrdn-bgr-header-padding: 11px 17px !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 !default;
-$acrdn-nest-bgr-content-padding: 20px !default;
-$acrdn-nest-second-nrml-content-padding: 20px !default;
-$acrdn-nest-second-bgr-content-padding: 24px !default;
-$acrdn-rtl-nest-nrml-content-padding: 16px !default;
-$acrdn-rtl-nest-bgr-content-padding: 20px !default;
-$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
-$acrdn-rtl-nest-second-bgr-content-padding: 24px !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-active-bg: $content-bg-color !default;
-$acrdn-bg-color: $content-bg-color-alt1 !default;
-$acrdn-selected-header-font-color: $primary !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-header-font: $content-text-color !default;
-$acrdn-nested-header-font: $content-text-color !default;
-$acrdn-header-font-weight: $font-weight-medium !default;
-$acrdn-header-font-size: $text-sm !default;
-$acrdn-nest-header-font-size: $text-sm !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-selected-border-size: 1px !default;
-$acrdn-item-padding-size: 0 !default;
-$acrdn-selected-border-type: none !default;
-$acrdn-selected-border-color: $border-light !default;
-$acrdn-default-border: $acrdn-selected-border-color !default;
-$acrdn-header-focus-bg: $content-bg-color-focus !default;
-$acrdn-header-hover-bg: $content-bg-color-hover !default;
-$acrdn-header-active-bg: $content-bg-color-pressed !default;
-
-$acrdn-border-type: solid !default;
-$acrdn-border-size: 1px !default;
-$acrdn-bgr-arrow-icon-font-size: 22px;
-$acrdn-bgr-icon-font-size: 20px !default;
-$acrdn-icon-font-size: 18px !default;
-$acrdn-icon-disable-color: $icon-color-disabled;
-$acrdn-text-disable-color: $content-text-color-disabled;
-
-
-//enddefault
+//default
+/*! component's theme wise override tailwind-definitions and variables */
+$acrdn-skin: 'tailwind' !default;
+$acrdn-slct-header-font-weight: $font-weight-medium;
+
+$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-icon-font-size: $text-lg !default;
+$acrdn-content-line-height: 1.5 !default;
+$acrdn-tab-highlight-color:  rgba(0, 0, 0, 0) !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: 7px 12px !default;
+$acrdn-bgr-header-padding: 11px 17px !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 !default;
+$acrdn-nest-bgr-content-padding: 20px !default;
+$acrdn-nest-second-nrml-content-padding: 20px !default;
+$acrdn-nest-second-bgr-content-padding: 24px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 20px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 20px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 24px !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-active-bg: $content-bg-color !default;
+$acrdn-bg-color: $content-bg-color-alt1 !default;
+$acrdn-default-bg-color: $acrdn-bg-color !default;
+$acrdn-active-bg-color: $acrdn-active-bg !default;
+$acrdn-selected-header-font-color: $primary !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-header-font: $content-text-color !default;
+$acrdn-nested-header-font: $content-text-color !default;
+$acrdn-header-font-weight: $font-weight-medium !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-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: none !default;
+$acrdn-selected-border-color: $border-light !default;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+$acrdn-header-focus-bg: $content-bg-color-focus !default;
+$acrdn-header-hover-bg: $content-bg-color-hover !default;
+$acrdn-header-active-bg: $content-bg-color-pressed !default;
+
+$acrdn-border-type: solid !default;
+$acrdn-border-size: 1px !default;
+$acrdn-bgr-arrow-icon-font-size: 22px;
+$acrdn-bgr-icon-font-size: 20px !default;
+$acrdn-icon-font-size: 18px !default;
+$acrdn-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+
+
+//enddefault

package/styles/accordion/_theme.scss

@@ -3,22 +3,15 @@
   // sass-lint:disable no-vendor-prefixes
   .e-accordion {
     -webkit-tap-highlight-color: $acrdn-tab-highlight-color;
-    background: $acrdn-bg-color;
+    background: $acrdn-default-bg-color;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
 
     @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5') {
       border-radius: $acrdn-border-radius;
     }
 
-    @if $acrdn-skin == 'highcontrast' {
-      background: $acrdn-bg;
-    }
-
     .e-active {
-      background: $acrdn-active-bg;
-      @if $acrdn-skin == 'highcontrast' {
-        background: $acrdn-active-item-bg;
-      }
+      background: $acrdn-active-bg-color;
     }
 
     .e-acrdn-item {
@@ -44,8 +37,16 @@
           border-radius: 4px 4px 0 0;
         }
 
-        &:last-child:not(.e-expand-state) .e-acrdn-header:focus {
-          border-radius: 0 0 4px 4px;
+        &:last-child {
+          border-bottom: 0;
+
+          &:not(.e-expand-state) .e-acrdn-header:focus {
+            border-radius: 0 0 4px 4px;
+          }
+
+          &.e-selected .e-acrdn-header:focus {
+            border-radius: 0;
+          }
         }
       }
 

package/styles/accordion/bootstrap4.css

@@ -287,7 +287,6 @@
 }
 
 .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content .e-acrdn-header-content {
-  font-size: 16px;
   font-size: 14px;
 }
 
@@ -327,7 +326,7 @@
 /*! accordion theme */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background: #f8f9fa;
+  background: #fff;
   border: 1px solid rgba(0, 0, 0, 0.13);
   border-radius: 4px;
 }

package/styles/accordion/bootstrap5-dark.css

@@ -1,4 +1,4 @@
-/*! component's theme wise override bootstrap5-definitions and variables */
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: '\e729';
@@ -179,10 +179,11 @@
   line-height: 22px;
   min-height: 38px;
   overflow: hidden;
-  padding: 7px 12px;
+  padding: 7px 12px 3px;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 4px;
 }
 
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
@@ -331,10 +332,18 @@
   border-radius: 4px 4px 0 0;
 }
 
+.e-accordion .e-acrdn-item:last-child {
+  border-bottom: 0;
+}
+
 .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
   border-radius: 0 0 4px 4px;
 }
 
+.e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
+  border-radius: 0;
+}
+
 .e-accordion .e-acrdn-item.e-overlay {
   background: #212529;
 }

package/styles/accordion/bootstrap5.css

@@ -1,4 +1,4 @@
-/*! component's theme wise override bootstrap5-definitions and variables */
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
 /*! accordion icons */
 .e-accordion .e-tgl-collapse-icon::before {
   content: '\e729';
@@ -179,10 +179,11 @@
   line-height: 22px;
   min-height: 38px;
   overflow: hidden;
-  padding: 7px 12px;
+  padding: 7px 12px 3px;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 4px;
 }
 
 .e-accordion .e-acrdn-item .e-acrdn-header > * {
@@ -331,10 +332,18 @@
   border-radius: 4px 4px 0 0;
 }
 
+.e-accordion .e-acrdn-item:last-child {
+  border-bottom: 0;
+}
+
 .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
   border-radius: 0 0 4px 4px;
 }
 
+.e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
+  border-radius: 0;
+}
+
 .e-accordion .e-acrdn-item.e-overlay {
   background: #fff;
 }

package/styles/accordion/highcontrast-light.css

@@ -11,7 +11,6 @@
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
   font-size: 16px;
-  font-size: 14px;
 }
 
 .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel,
@@ -236,7 +235,6 @@
 
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
   font-weight: normal;
-  font-weight: 600;
 }
 
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
@@ -309,12 +307,10 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   background: #ccc;
   border: 1px solid #757575;
-  background: #fff;
 }
 
 .e-accordion .e-active {
   background: #ccc;
-  background: #fff;
 }
 
 .e-accordion .e-acrdn-item.e-item-focus .e-acrdn-header:focus {

package/styles/accordion/highcontrast.css

@@ -11,7 +11,6 @@
 /*! accordion layout */
 .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
 .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
-  font-size: 16px;
   font-size: 14px;
 }
 
@@ -236,7 +235,6 @@
 }
 
 .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-  font-weight: normal;
   font-weight: 600;
 }
 
@@ -308,13 +306,11 @@
 /*! accordion theme */
 .e-accordion {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  background: #333;
-  border: 1px solid #969696;
   background: #000;
+  border: 1px solid #969696;
 }
 
 .e-accordion .e-active {
-  background: #333;
   background: #000;
 }
 

package/styles/accordion/icons/_fluent.scss

@@ -0,0 +1,17 @@
+
+@include export-module('accordion-fluent-icons') {
+  /*! accordion icons */
+  #{&}.e-accordion {
+
+    .e-tgl-collapse-icon {
+
+      &::before {
+        content: '\e7c3';
+      }
+
+      &.e-expand-icon {
+        transform: rotate(-180deg);
+      }
+  }
+  }
+}

package/styles/accordion/icons/_tailwind.scss

@@ -1,17 +1,17 @@
-
-@include export-module('accordion-tailwind-icons') {
-  /*! accordion icons */
-  #{&}.e-accordion {
-
-    .e-tgl-collapse-icon {
-
-      &::before {
-        content: '\e706';
-      }
-
-      &.e-expand-icon {
-        transform: rotate(-180deg);
-      }
-  }
-  }
-}
+
+@include export-module('accordion-tailwind-icons') {
+  /*! accordion icons */
+  #{&}.e-accordion {
+
+    .e-tgl-collapse-icon {
+
+      &::before {
+        content: '\e706';
+      }
+
+      &.e-expand-icon {
+        transform: rotate(-180deg);
+      }
+  }
+  }
+}