@syncfusion/ej2-navigations 19.2.59 → 19.3.44

package/styles/accordion/_tailwind-definition.scss

@@ -1,79 +1,79 @@
-//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-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

package/styles/accordion/_theme.scss

@@ -6,7 +6,7 @@
     background: $acrdn-bg-color;
     border: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
 
-    @if $acrdn-skin == 'bootstrap4' {
+    @if ($acrdn-skin == 'bootstrap4' or $acrdn-skin == 'bootstrap5') {
       border-radius: $acrdn-border-radius;
     }
 
@@ -27,7 +27,7 @@
         border-top: 1px solid $acrdn-item-border-color;
       }
 
-      @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'tailwind-dark' {
+      @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' {
         border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
         border-radius: 4px 4px 0 0;
 
@@ -37,6 +37,18 @@
         }
       }
 
+      @if $acrdn-skin == 'bootstrap5' {
+        border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
+
+        &:first-child .e-acrdn-header:focus {
+          border-radius: 4px 4px 0 0;
+        }
+
+        &:last-child:not(.e-expand-state) .e-acrdn-header:focus {
+          border-radius: 0 0 4px 4px;
+        }
+      }
+
       &.e-item-focus {
         @if $acrdn-skin == 'fabric' {
           border-bottom: 1px solid $acrdn-header-focus-bg;
@@ -120,7 +132,7 @@
           }
         }
 
-        @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'tailwind-dark' {
+        @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
           &.e-overlay.e-select.e-expand-state {
             .e-acrdn-header {
 
@@ -153,7 +165,7 @@
 
       .e-acrdn-panel.e-nested {
 
-        @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'tailwind-dark' {
+        @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
           .e-acrdn-content .e-acrdn-item:last-child {
             border-bottom: $acrdn-border-size $acrdn-selected-border-type $acrdn-default-border;
           }
@@ -220,7 +232,7 @@
           @else if $acrdn-skin == 'highcontrast' {
             border-color: $acrdn-item-exp-hdr-focus-border-color;
           }
-          @else {
+          @else if $acrdn-skin != 'bootstrap5' {
             background: $acrdn-header-focus-bg;
           }
         }
@@ -236,7 +248,9 @@
           @if $acrdn-skin == 'fabric' {
             border: 1px solid $acrdn-header-hover-bg;
           }
-          background: $acrdn-header-hover-bg;
+          @if $acrdn-skin != 'bootstrap5' {
+            background: $acrdn-header-hover-bg;
+          }
           @if $acrdn-skin == 'highcontrast' {
             border-color: $acrdn-item-header-hover-border-color;
           }
@@ -253,10 +267,15 @@
         }
 
         &:focus {
-          @if $acrdn-skin == 'fabric' {
-            border: 1px solid $acrdn-header-focus-bg;
+          @if ($acrdn-skin == 'fabric') {
+            border: 1px solid $acrdn-item-header-focus-border-color;
+          }
+          @if $acrdn-skin == 'bootstrap5' {
+            box-shadow: $shadow-focus-ring1;
+          }
+          @else {
+            background: $acrdn-header-focus-bg;
           }
-          background: $acrdn-header-focus-bg;
           @if $acrdn-skin == 'highcontrast' {
             background: $acrdn-item-header-focus-bg-color;
             border: 2px dashed $acrdn-item-header-focus-border-color;
@@ -300,7 +319,10 @@
           @if $acrdn-skin == 'fabric' {
             border: 1px solid $acrdn-selected-header-color;
           }
-          background: $acrdn-selected-header-color;
+
+          @if $acrdn-skin != 'bootstrap5' {
+            background: $acrdn-selected-header-color;
+          }
 
           @if $acrdn-skin == 'bootstrap4' {
             &:hover {
@@ -340,13 +362,15 @@
             }
           }
 
-          > .e-toggle-icon {
-            color: $acrdn-selected-icon-color;
-          }
+          @if $acrdn-skin != 'bootstrap5' {
+            > .e-toggle-icon {
+              color: $acrdn-selected-icon-color;
+            }
 
-          .e-acrdn-header-icon,
-          .e-acrdn-header-content {
-            color: $acrdn-selected-header-font-color;
+            .e-acrdn-header-icon,
+            .e-acrdn-header-content {
+              color: $acrdn-selected-header-font-color;
+            }
           }
         }
 
@@ -391,7 +415,7 @@
             border-bottom: $acrdn-selected-border-size $acrdn-selected-border-type  $acrdn-selected-border-color;
             border-top: $acrdn-selected-border-size $acrdn-selected-border-type  $acrdn-selected-border-color;
 
-            @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'tailwind-dark' {
+            @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
               border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
 
               &.e-select:last-child {
@@ -401,6 +425,22 @@
           }
         }
 
+        @if $acrdn-skin == 'bootstrap5' {
+          > .e-acrdn-header {
+            background: $acrdn-header-focus-bg;
+            border-bottom: $acrdn-border-size $acrdn-border-type $acrdn-default-border;
+
+            > .e-toggle-icon,
+            > .e-acrdn-header-content {
+              color: $acrdn-selected-header-font-color;
+            }
+
+            &:focus {
+              box-shadow: $shadow-focus-ring1;
+            }
+          }
+        }
+
         + .e-selected {
           @if $acrdn-skin == 'bootstrap' {
             border:  $acrdn-border-size solid $acrdn-default-border;