@syncfusion/ej2-navigations 17.3.9-beta → 17.3.14-96615

package/styles/accordion/_layout.scss

@@ -1,447 +1,447 @@
-@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;
-        }
-
-        @if $acrdn-skin == 'highcontrast' {
-          font-size: 14px;
-        }
-      }
-    }
-
-    .e-acrdn-item.e-select {
-
-      .e-acrdn-panel {
-        font-size: $acrdn-content-font-bgr-size;
-
-        &.e-nested > .e-acrdn-content {
-          padding: 0;
-        }
-
-        &.e-nested .e-acrdn-content .e-accordion {
-          border: 0;
-        }
-
-        &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
-          padding: $acrdn-nest-second-bgr-header-padding;
-        }
-
-        &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
-          padding: $acrdn-nest-bgr-header-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' {
-            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' {
-            .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-acrdn-panel {
-
-          .e-acrdn-content {
-            padding: $acrdn-nest-bgr-content-padding;
-          }
-
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-nest-second-bgr-content-padding;
-              }
-          }
-        }
-
-        .e-acrdn-header {
-          padding: $acrdn-nest-bgr-header-padding;
-        }
-      }
-    }
-
-    &.e-rtl {
-
-      .e-acrdn-item.e-select {
-
-        .e-acrdn-panel .e-acrdn-content {
-
-          .e-acrdn-panel.e-nested > .e-acrdn-content {
-            padding: 0;
-           }
-
-          .e-acrdn-panel .e-acrdn-content {
-            padding: $acrdn-rtl-nest-bgr-content-padding;
-           }
-
-          .e-acrdn-panel .e-acrdn-panel.e-nested > .e-acrdn-content {
-            padding: 0;
-          }
-
-          .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
-            padding: $acrdn-rtl-nest-second-bgr-content-padding;
-              }
-        }
-
-        .e-acrdn-panel {
-
-          &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
-            padding: $acrdn-rtl-nest-second-bgr-header-padding;
-          }
-
-          &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
-            padding: $acrdn-rtl-nest-bgr-header-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;
-
-          @if $acrdn-skin == 'highcontrast' {
-            font-weight: 600;
-          }
-        }
-
-      }
-    }
-
-    .e-acrdn-item {
-      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;
-
-        > * {
-          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;
-            }
-          }
-        }
-      }
-
-      .e-acrdn-panel {
-        font-size: $acrdn-content-font-size;
-        overflow-y: hidden;
-        text-decoration: none;
-        width: 100%;
-
-        &.e-nested {
-
-          > .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-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
-            font-weight: normal;
-
-            @if $acrdn-skin == 'highcontrast' {
-              font-weight: 600;
-            }
-          }
-
-          .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
-            font-weight: normal;
-          }
-        }
-
-        .e-acrdn-panel {
-
-          .e-acrdn-content {
-            padding: $acrdn-nest-nrml-content-padding;
-          }
-
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-nest-second-nrml-content-padding;
-            }
-          }
-        }
-
-        .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 {
-            padding: $acrdn-nest-nrml-header-padding;
-          }
-
-          .e-acrdn-header-content {
-            font-size: $acrdn-nest-header-font-size;
-
-            @if $acrdn-skin == 'bootstrap4' {
-              font-size: $acrdn-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-panel.e-nested .e-acrdn-content .e-acrdn-header {
-            padding: $acrdn-rtl-nest-second-nrml-header-padding;
-          }
-
-          .e-acrdn-content .e-acrdn-header {
-            padding: $acrdn-rtl-nest-nrml-header-padding;
-          }
-
-          .e-acrdn-panel {
-
-            .e-acrdn-content {
-              padding: $acrdn-rtl-nest-nrml-content-padding;
-              }
-
-            .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;
-         }
-       }
-      }
-    }
-}
-}
+@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;
+        }
+
+        @if $acrdn-skin == 'highcontrast' {
+          font-size: 14px;
+        }
+      }
+    }
+
+    .e-acrdn-item.e-select {
+
+      .e-acrdn-panel {
+        font-size: $acrdn-content-font-bgr-size;
+
+        &.e-nested > .e-acrdn-content {
+          padding: 0;
+        }
+
+        &.e-nested .e-acrdn-content .e-accordion {
+          border: 0;
+        }
+
+        &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+          padding: $acrdn-nest-second-bgr-header-padding;
+        }
+
+        &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
+          padding: $acrdn-nest-bgr-header-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' {
+            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' {
+            .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-acrdn-panel {
+
+          .e-acrdn-content {
+            padding: $acrdn-nest-bgr-content-padding;
+          }
+
+          .e-acrdn-panel {
+
+            .e-acrdn-content {
+              padding: $acrdn-nest-second-bgr-content-padding;
+              }
+          }
+        }
+
+        .e-acrdn-header {
+          padding: $acrdn-nest-bgr-header-padding;
+        }
+      }
+    }
+
+    &.e-rtl {
+
+      .e-acrdn-item.e-select {
+
+        .e-acrdn-panel .e-acrdn-content {
+
+          .e-acrdn-panel.e-nested > .e-acrdn-content {
+            padding: 0;
+           }
+
+          .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-bgr-content-padding;
+           }
+
+          .e-acrdn-panel .e-acrdn-panel.e-nested > .e-acrdn-content {
+            padding: 0;
+          }
+
+          .e-acrdn-panel .e-acrdn-panel .e-acrdn-content {
+            padding: $acrdn-rtl-nest-second-bgr-content-padding;
+              }
+        }
+
+        .e-acrdn-panel {
+
+          &.e-nested .e-accordion .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-second-bgr-header-padding;
+          }
+
+          &.e-nested .e-accordion .e-acrdn-item.e-select .e-acrdn-header {
+            padding: $acrdn-rtl-nest-bgr-header-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;
+
+          @if $acrdn-skin == 'highcontrast' {
+            font-weight: 600;
+          }
+        }
+
+      }
+    }
+
+    .e-acrdn-item {
+      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;
+
+        > * {
+          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;
+            }
+          }
+        }
+      }
+
+      .e-acrdn-panel {
+        font-size: $acrdn-content-font-size;
+        overflow-y: hidden;
+        text-decoration: none;
+        width: 100%;
+
+        &.e-nested {
+
+          > .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-acrdn-item.e-select.e-selected .e-acrdn-header > .e-acrdn-header-content {
+            font-weight: normal;
+
+            @if $acrdn-skin == 'highcontrast' {
+              font-weight: 600;
+            }
+          }
+
+          .e-nested .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
+            font-weight: normal;
+          }
+        }
+
+        .e-acrdn-panel {
+
+          .e-acrdn-content {
+            padding: $acrdn-nest-nrml-content-padding;
+          }
+
+          .e-acrdn-panel {
+
+            .e-acrdn-content {
+              padding: $acrdn-nest-second-nrml-content-padding;
+            }
+          }
+        }
+
+        .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 {
+            padding: $acrdn-nest-nrml-header-padding;
+          }
+
+          .e-acrdn-header-content {
+            font-size: $acrdn-nest-header-font-size;
+
+            @if $acrdn-skin == 'bootstrap4' {
+              font-size: $acrdn-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-panel.e-nested .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-second-nrml-header-padding;
+          }
+
+          .e-acrdn-content .e-acrdn-header {
+            padding: $acrdn-rtl-nest-nrml-header-padding;
+          }
+
+          .e-acrdn-panel {
+
+            .e-acrdn-content {
+              padding: $acrdn-rtl-nest-nrml-content-padding;
+              }
+
+            .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;
+         }
+       }
+      }
+    }
+}
+}