@syncfusion/ej2-angular-navigations 20.1.60 → 20.2.36

package/styles/accordion/_layout.scss

@@ -0,0 +1,417 @@
+@include export-module('accordion-layout') {
+  /*! accordion layout */
+  .e-bigger .e-accordion,
+  .e-accordion.e-bigger {
+
+    .e-acrdn-item {
+
+      .e-acrdn-header .e-acrdn-header-content {
+        font-size: $acrdn-header-font-bgr-size;
+
+        @if $acrdn-skin == 'bootstrap4' {
+          line-height: $acrdn-bgr-item-header-content-line-height;
+          vertical-align: middle;
+        }
+      }
+    }
+
+    .e-acrdn-item.e-select {
+
+      .e-acrdn-panel {
+        font-size: $acrdn-content-font-bgr-size;
+
+        &.e-nested {
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-nest-bgr-content-padding;
+          }
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-nest-bgr-header-padding;
+          }
+
+          > .e-acrdn-content {
+            padding: 0;
+
+            > .e-accordion {
+              border: 0;
+            }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+              padding: $acrdn-nest-second-bgr-header-padding;
+            }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+              padding: $acrdn-nest-second-bgr-content-padding;
+            }
+          }
+        }
+
+        .e-acrdn-header .e-acrdn-header-content {
+          font-size: $acrdn-nest-header-font-size;
+        }
+      }
+
+      .e-acrdn-header {
+        line-height: $acrdn-bgr-header-lineheight;
+        min-height: $acrdn-bgr-header-minheight;
+        padding: $acrdn-bgr-header-padding;
+
+        .e-toggle-icon {
+          height: $acrdn-bgr-header-minheight;
+          min-height: $acrdn-bgr-header-minheight;
+          min-width: $acrdn-bgr-icn-minwidth;
+          right: $acrdn-bgr-header-paddingpix;
+
+          @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
+            font-size: $acrdn-bgr-arrow-icon-font-size;
+          }
+        }
+
+        .e-acrdn-header-icon {
+          display: inline-block;
+          padding: 0 $acrdn-bgr-header-icon-padding 0 0;
+
+          @if $acrdn-skin == 'bootstrap4' or $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
+            .e-acrdn-icons.e-icons {
+              font-size: $acrdn-bgr-icon-font-size;
+            }
+          }
+        }
+      }
+
+      .e-acrdn-panel .e-acrdn-content {
+        padding: $acrdn-bgr-content-padding;
+
+        @if $acrdn-skin == 'bootstrap4' {
+          font-size: $acrdn-bgr-item-header-content-font-size;
+          line-height: $acrdn-bgr-item-header-content-line-height;
+        }
+
+        @if $acrdn-skin == 'highcontrast' {
+          font-size: 13px;
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-acrdn-item.e-select {
+
+        .e-acrdn-panel.e-nested  {
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-rtl-nest-bgr-content-padding;
+          }
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-rtl-nest-bgr-header-padding;
+          }
+
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-second-bgr-header-padding;
+          }
+
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-second-bgr-content-padding;
+          }
+        }
+      }
+
+      .e-acrdn-item {
+
+        .e-acrdn-header {
+          padding: $acrdn-rtl-bgr-header-padding;
+
+          .e-toggle-icon {
+            left: $acrdn-bgr-header-paddingpix;
+            right: auto;
+          }
+
+          .e-acrdn-header-icon {
+            padding: 0 0 0 $acrdn-bgr-header-icon-padding;
+        }
+
+       }
+      }
+    }
+  }
+
+  .e-accordion {
+    display: block;
+    position: relative;
+
+    .e-acrdn-item {
+
+      @if $acrdn-skin == 'material' {
+        &.e-select.e-selected:first-child {
+          border-top: 0;
+        }
+
+        &.e-select.e-selected:last-child {
+          border-bottom: 0;
+        }
+      }
+      @if $acrdn-skin == 'bootstrap' {
+        border-radius: 4px;
+        margin-top: 5px;
+
+        .nested .e-acrdn-item + .e-acrdn-item {
+          margin-top: 0;
+        }
+
+        &:not(.e-select) {
+          margin-top: 5px;
+        }
+
+        &:not(.e-select) + .e-acrdn-item:not(.e-select) {
+          margin-bottom: 0;
+          margin-top: 0;
+        }
+
+        &:not(.e-select) + .e-acrdn-item.e-select {
+          margin-top: 5px;
+        }
+      }
+
+      .e-acrdn-panel.e-nested .e-acrdn-header {
+
+        @if $acrdn-skin == 'bootstrap' {
+          border: 0;
+        }
+      }
+
+      @if $acrdn-skin == 'bootstrap' {
+        .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
+          margin: 2px;
+       }
+      }
+
+      > .e-acrdn-header .e-acrdn-header-content {
+        font-weight: $acrdn-header-font-weight;
+      }
+
+      &.e-selected {
+        padding-top: 0;
+
+        > .e-acrdn-header .e-acrdn-header-content {
+          font-weight: $acrdn-slct-header-font-weight;
+        }
+
+      }
+
+      &.e-overlay {
+        height: auto;
+      }
+    }
+
+    .e-acrdn-item {
+      @if $acrdn-skin != 'bootstrap5' {
+        overflow: hidden;
+      }
+      padding-top: $acrdn-item-padding-size;
+      position: relative;
+
+      &.e-hide {
+        display: none;
+      }
+
+      .e-acrdn-header {
+
+        .e-acrdn-header-content {
+          font-size: $acrdn-header-font-size;
+        }
+      }
+
+      &.e-select {
+
+        > .e-acrdn-header {
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            .e-acrdn-header-content {
+              @if $acrdn-skin == 'bootstrap' or $acrdn-skin == 'bootstrap4'  {
+                text-decoration: underline;
+              }
+            }
+          }
+       }
+      }
+
+      .e-acrdn-header {
+        @if $acrdn-skin == 'bootstrap' {
+          border-radius: 4px;
+        }
+        line-height: $acrdn-nrml-header-lineheight;
+        min-height: $acrdn-nrml-header-minheight;
+        overflow: hidden;
+        padding: $acrdn-nrml-header-padding;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        @if $acrdn-skin == 'bootstrap5' {
+          margin-bottom: 4px;
+        }
+
+        > * {
+          display: inline-block;
+        }
+
+        @if $acrdn-skin == 'bootstrap4' {
+          .e-acrdn-header-content {
+            line-height: $acrdn-content-line-height;
+          }
+        }
+
+        .e-toggle-icon {
+          @if $acrdn-skin == 'bootstrap' {
+            display: none;
+          }
+          @else {
+            display: table;
+          }
+          font-size: $acrdn-icon-font-size;
+          height: $acrdn-nrml-header-minheight;
+          min-height: $acrdn-nrml-header-minheight;
+          min-width: $acrdn-nrml-icn-minwidth;
+          position: absolute;
+          right: $acrdn-nrml-header-paddingpix;
+          top: 0;
+
+          .e-tgl-collapse-icon.e-icons {
+            display: table-cell;
+            text-align: center;
+            vertical-align: middle;
+          }
+        }
+
+        .e-toggle-animation {
+          transition: .5s ease 0s;
+        }
+
+        .e-acrdn-header-icon {
+          display: inline-block;
+          padding: 0 $acrdn-nrml-header-icon-padding 0 0;
+
+          @if $acrdn-skin == 'bootstrap4' {
+            .e-acrdn-icons.e-icons {
+              font-size: $acrdn-bgr-arrow-icon-font-size;
+            }
+          }
+
+          @if $acrdn-skin == 'tailwind' or $acrdn-skin == 'bootstrap5' {
+            .e-acrdn-icons.e-icons {
+              font-size: $acrdn-icon-font-size;
+            }
+          }
+        }
+      }
+
+      .e-acrdn-panel {
+        font-size: $acrdn-content-font-size;
+        overflow-y: hidden;
+        text-decoration: none;
+        width: 100%;
+
+        &.e-nested {
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-nest-nrml-content-padding;
+          }
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-nest-nrml-header-padding;
+          }
+
+          > .e-acrdn-content {
+            padding: 0;
+
+            .e-acrdn-panel.e-nested > .e-acrdn-content {
+              padding: 0;
+            }
+
+            > .e-accordion {
+              border: 0;
+            }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+              padding: $acrdn-nest-second-nrml-header-padding;
+            }
+
+            .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+              padding: $acrdn-nest-second-nrml-content-padding;
+            }
+          }
+
+          .e-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
+            font-weight: $acrdn-nest-header-content-font-weight;
+          }
+
+          .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
+            font-weight: normal;
+          }
+        }
+
+        .e-acrdn-content {
+          line-height: $acrdn-content-line-height;
+          overflow: hidden;
+          padding: $acrdn-nrml-content-padding;
+          text-overflow: ellipsis;
+
+          > * {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        .e-acrdn-header-content {
+          font-size: $acrdn-nest-header-content-font-size;
+        }
+      }
+
+      .e-content-hide {
+        display: none;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-acrdn-item {
+
+        .e-acrdn-panel.e-nested {
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
+            padding: $acrdn-rtl-nest-nrml-content-padding;
+          }
+
+          > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-header {
+            padding: $acrdn-rtl-nest-nrml-header-padding;
+          }
+
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-second-nrml-header-padding;
+          }
+
+          > .e-acrdn-content .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-second-nrml-content-padding;
+          }
+        }
+
+        .e-acrdn-header {
+          padding: $acrdn-rtl-nrml-header-padding;
+
+          .e-toggle-icon {
+            left: $acrdn-nrml-header-paddingpix;
+            right: auto;
+          }
+
+          .e-acrdn-header-icon {
+            padding: 0 0 0 $acrdn-nrml-header-icon-padding;
+         }
+       }
+      }
+    }
+}
+}

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

@@ -0,0 +1,79 @@
+//default 
+$acrdn-skin: 'material' !default;
+$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-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;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 35px !default;
+$acrdn-bgr-header-lineheight: 47px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+// Header, Nested header and RTL mode Padding
+$acrdn-nest-nrml-header-padding: 0 40px 0 32px !default;
+$acrdn-nest-bgr-header-padding: 0 46px 0 32px !default;
+$acrdn-nest-second-nrml-header-padding: 0 40px 0 48px !default;
+$acrdn-nest-second-bgr-header-padding: 0 46px 0 48px !default;
+$acrdn-nrml-header-padding: 0 40px 0 16px !default;
+$acrdn-bgr-header-padding: 0 46px 0 16px !default;
+$acrdn-rtl-nrml-header-padding: 0 16px 0 40px !default;
+$acrdn-rtl-bgr-header-padding: 0 16px 0 46px !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 32px 0 40px !default;
+$acrdn-rtl-nest-bgr-header-padding: 0 32px 0 46px !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0 48px 0 40px !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 16px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-bgr-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 48px !default;
+$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 48px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 16px 48px 16px 16px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 16px 48px 16px 16px !default;
+
+$acrdn-nrml-header-icon-padding: 8px !default;
+$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;
+$acrdn-icon-color: rgba($grey-dark-font, .7) !default;
+$acrdn-selected-icon-color: rgba($grey-dark-font, .7) !default;
+$acrdn-content-color: $grey-dark-font !default;
+$acrdn-header-font: $accent !default;
+$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;
+$acrdn-selected-border-size: 1px !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: $border-type !default;
+$acrdn-selected-border-color: $grey-700 !default;
+$acrdn-default-border: $grey-700 !default;
+$acrdn-header-focus-bg:  rgba($grey-white, .05) !default;
+$acrdn-header-hover-bg: rgba($grey-white, .1) !default;
+$acrdn-header-active-bg: none !default;
+
+$acrdn-border-type: solid !default;
+$acrdn-border-size: $border-size !default;
+//enddefault

package/styles/accordion/_material-definition.scss

@@ -0,0 +1,76 @@
+//default
+/*! component's theme wise override material-definitions and variables */
+$acrdn-skin: 'material' !default;
+$acrdn-slct-header-font-weight: normal;
+
+$acrdn-nrml-header-minheight: 36px !default;
+$acrdn-bgr-header-minheight: 48px !default;
+$acrdn-nrml-header-lineheight: 35px !default;
+$acrdn-bgr-header-lineheight: 47px !default;
+$acrdn-nrml-header-paddingpix: 16px !default;
+$acrdn-bgr-header-paddingpix: 16px !default;
+$acrdn-icon-font-size: $font-size !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: 0 40px 0 32px !default;
+$acrdn-nest-bgr-header-padding: 0 46px 0 32px !default;
+$acrdn-nest-second-nrml-header-padding: 0 40px 0 48px !default;
+$acrdn-nest-second-bgr-header-padding: 0 46px 0 48px !default;
+$acrdn-nrml-header-padding: 0 40px 0 16px !default;
+$acrdn-bgr-header-padding: 0 46px 0 16px !default;
+$acrdn-rtl-nrml-header-padding: 0 16px 0 40px !default;
+$acrdn-rtl-bgr-header-padding: 0 16px 0 46px !default;
+$acrdn-rtl-nest-nrml-header-padding: 0 32px 0 40px !default;
+$acrdn-rtl-nest-bgr-header-padding: 0 32px 0 46px !default;
+$acrdn-rtl-nest-second-nrml-header-padding: 0 48px 0 40px !default;
+$acrdn-rtl-nest-second-bgr-header-padding: 0 48px 0 46px !default;
+
+// Content, Nested content and RTL mode Padding
+$acrdn-nrml-content-padding: 16px !default;
+$acrdn-bgr-content-padding: 16px !default;
+$acrdn-nest-nrml-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-bgr-content-padding: 16px 16px 16px 32px !default;
+$acrdn-nest-second-nrml-content-padding: 16px 16px 16px 48px !default;
+$acrdn-nest-second-bgr-content-padding: 16px 16px 16px 48px !default;
+$acrdn-rtl-nest-nrml-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-bgr-content-padding: 16px 32px 16px 16px !default;
+$acrdn-rtl-nest-second-nrml-content-padding: 16px 48px 16px 16px !default;
+$acrdn-rtl-nest-second-bgr-content-padding: 16px 48px 16px 16px !default;
+
+$acrdn-nrml-header-icon-padding: 8px !default;
+$acrdn-bgr-header-icon-padding: 14px !default;
+$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;
+$acrdn-selected-icon-color: rgba($grey-light-font, .54) !default;
+$acrdn-content-color: rgba($grey-light-font, .87) !default;
+$acrdn-header-font:  rgba($grey-light-font, .87) !default;
+$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;
+$acrdn-selected-border-size: $border-size !default;
+$acrdn-item-padding-size: 0 !default;
+$acrdn-selected-border-type: $border-type !default;
+$acrdn-selected-border-color: rgba($grey-light-font, .12) !default;
+$acrdn-default-border: $acrdn-selected-border-color !default;
+$acrdn-header-focus-bg:  $hover-bg-color !default;
+$acrdn-header-hover-bg: transparent !default;
+$acrdn-header-active-bg: transparent !default;
+
+$acrdn-border-type: solid !default;
+$acrdn-border-size: $border-size !default;
+//enddefault

package/styles/accordion/_material3-definition.scss

@@ -0,0 +1,85 @@
+/*! Accordion's bootstrap5 theme wise override definitions and variables */
+// sass-lint:disable-all
+$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-icon-font-size: 20px !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;
+
+// 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-icon-disable-color: $icon-color-disabled;
+$acrdn-text-disable-color: $content-text-color-disabled;
+$acrdn-default-border: $acrdn-selected-border-color !default;

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

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