@syncfusion/ej2-angular-pivotview 20.1.58 → 20.2.36

package/styles/pivotfieldlist/_layout.scss

@@ -0,0 +1,1855 @@
+@include export-module('field-list-layout') {
+
+  /*! field-list theme */
+
+  .e-pivotfieldlist {
+    .e-disable {
+      display: none;
+    }
+
+    .e-hide {
+      visibility: hidden;
+    }
+  }
+
+  .e-pivot-formatting-dialog {
+    // sass-lint:disable-all
+    max-height: 480px !important;
+    min-width: $format-dialog-width !important;
+    width: $format-dialog-width !important;
+    // sass-lint:enable-all
+    .e-format-table tr:nth-child(odd) {
+      td {
+        padding-bottom: 4px;
+      }
+    }
+
+    .e-format-delete-icon {
+      font-weight: normal;
+      @if ($field-list-skin == 'bootstrap4') {
+        // sass-lint:disable-all
+        color: $black;
+        // sass-lint:enable-all
+        opacity: .5;
+      }
+
+      &:hover {
+        font-weight: 600;
+        @if ($field-list-skin == 'bootstrap4') {
+          opacity: 1;
+        }
+      }
+    }
+
+    .e-format-table tr:nth-child(even) {
+      td {
+        padding-bottom: 14px;
+        padding-right: 18px;
+
+        @if ($skin-name == 'bootstrap5') {
+          padding-right: 8px;
+        }
+
+      }
+    }
+
+    .e-format-value-span {
+      vertical-align: bottom;
+    }
+
+    .e-format-value1,
+    .e-format-value2,
+    .e-format-value-span {
+      margin-right: 10px;
+    }
+
+    .e-format-font-color-picker {
+      margin-left: 0;
+      margin-right: 16px;
+    }
+
+    .e-format-inner-div {
+      padding-left: 14px;
+      padding-top: 14px;
+      width: 579px;
+    }
+
+    .e-format-outer-div {
+      background-color: $format-outer-fill-color;
+      border: 1px solid $format-outer-border-color;
+      border-radius: $format-outer-border-radius;
+      margin-bottom: 14px;
+    }
+
+    .e-format-condition-button {
+      float: left;
+    }
+
+    .e-split-colorpicker {
+      @if ($field-list-skin == 'bootstrap4') {
+        // sass-lint:disable-all
+        background-color: $format-label-font-color !important;
+        color: $field-list-default-bg-color !important;
+        // sass-lint:enable-all
+      }
+    }
+
+    .e-format-delete-button {
+      background-color: transparent;
+      border-color: transparent;
+      float: right;
+      padding-right: 12px;
+      padding-top: 12px;
+
+      @if($skin-name == 'bootstrap5') {
+        // sass-lint:disable-all
+        color: $field-list-default-font-color !important;
+        // sass-lint:enable-all
+      }
+
+    }
+
+
+
+    .e-format-delete-button:hover,
+    .e-format-delete-button:focus,
+    .e-format-delete-button:active {
+      background-color: transparent;
+      border-color: transparent;
+      box-shadow: 0 0 0 transparent;
+
+      .e-format-delete-icon {
+        font-weight: 600;
+        @if ($field-list-skin == 'bootstrap4') {
+          opacity: 1;
+        }
+      }
+    }
+
+    .e-format-delete-icon {
+      font-size: 10px;
+    }
+
+    .e-format-label,
+    .e-format-value-label {
+      color: $format-label-font-color;
+      font-size: $format-label-font-size;
+      font-weight: $format-label-font-weight;
+      opacity: $format-label-font-opacity;
+    }
+
+    .e-format-value-preview {
+      border: 1px solid $format-preview-border-color;
+      border-radius: $field-list-default-border-radius;
+      height: $format-preview-height;
+      // sass-lint:disable-all
+      margin: 0 !important;
+      // sass-lint:enable-all
+      padding-left: 6px;
+      padding-top: 6px;
+      width: $format-preview-width;
+    }
+
+    .e-format-color-picker .e-split-btn-wrapper .e-split-btn .e-selected-color {
+      background: none;
+      margin: 0 2px;
+      width: 14px;
+      @if ($skin-name == 'bootstrap5') {
+        // sass-lint:disable-all
+        color: $field-list-default-font-color !important;
+        &:hover {
+          color: $field-list-active-color !important;
+        }
+        // sass-lint:enable-all
+      }
+    }
+
+    .e-format-color-picker {
+      .e-split-btn-wrapper .e-split-btn {
+        pointer-events: none;
+
+        .e-selected-color {
+          background: none;
+          margin: 0 2px;
+          width: 14px;
+        }
+      }
+    }
+
+    .e-format-color-picker .e-split-btn-wrapper .e-btn.e-icon-btn {
+      @if ($field-list-skin == 'bootstrap4') {
+        padding: 4px 5px;
+      }
+    }
+
+    .e-split-preview,
+    .e-tip-transparent {
+      border: 1px solid $format-preview-border-color;
+      // sass-lint:disable-all
+      border-radius: 0 !important;
+      // sass-lint:enable-all
+      height: 40%;
+      left: -3px;
+      position: absolute;
+      top: 16px;
+      width: 150%;
+    }
+
+    &.e-device {
+      // sass-lint:disable-all
+      min-width: 320px !important;
+      width: 100%  !important;
+      // sass-lint:enable-all
+
+      .e-format-value1,
+      .e-format-value2,
+      .e-format-value-span {
+        margin-right: 2px;
+      }
+
+      .e-format-color-picker {
+        width: 33%;
+      }
+
+      .e-format-delete-button {
+        font-size: 12px;
+        padding-right: 16px;
+        padding-top: 16px;
+      }
+
+      .e-format-apply-button,
+      .e-format-cancel-button {
+        max-width: 40%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .e-format-font-color-picker {
+        @if ($skin-name == 'tailwind') {
+          margin-right: 30px;
+        }
+
+      }
+    }
+
+    &.e-rtl {
+      .e-format-font-color-picker {
+        margin-left: 16px;
+        margin-right: 0;
+      }
+
+      .e-format-condition-button {
+        float: right;
+
+        .e-add-icon {
+          margin-left: auto;
+        }
+      }
+
+      .e-format-inner-div {
+        padding-left: 0;
+        padding-right: 14px;
+      }
+
+      .e-format-delete-button {
+        float: left;
+        padding-left: 12px;
+      }
+
+      &.e-device {
+        .e-format-font-color-picker {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .e-bigger.e-pivot-formatting-dialog,
+  .e-bigger .e-pivot-formatting-dialog {
+    // sass-lint:disable-all
+    min-width: $format-dialog-bigger-width !important;
+    width: $format-dialog-bigger-width !important;
+    // sass-lint:enable-all
+
+    .e-format-label,
+    .e-format-value-label {
+      font-size: $format-label-bigger-font-size;
+    }
+
+    // sass-lint:disable-all
+    .e-format-value1, .e-format-value2 {
+        margin-bottom: 3px !important;
+    }
+    // sass-lint:enable-all
+
+    .e-format-inner-div {
+      padding-left: 16px;
+      padding-top: 16px;
+      width: 656px;
+    }
+
+    .e-format-outer-div {
+      margin-bottom: 16px;
+    }
+
+    .e-format-table tr:nth-child(odd) td {
+      padding-bottom: 12px;
+    }
+
+    .e-format-table tr:nth-child(even) td {
+      padding-bottom: 16px;
+      padding-right: 20px;
+
+      @if ($skin-name == 'bootstrap5') {
+        padding-right: 12px;
+      }
+
+    }
+
+    .e-format-font-color-picker {
+      margin-left: 0;
+      margin-right: 20px;
+
+    }
+
+    .e-format-color-picker .e-split-btn-wrapper .e-btn.e-icon-btn {
+      @if ($field-list-skin == 'bootstrap4') {
+        padding: 4px 8px;
+      }
+    }
+
+    &.e-device {
+      // sass-lint:disable-all
+      min-width: 320px !important;
+      width: 100%  !important;
+      // sass-lint:enable-all
+
+      .e-format-color-picker {
+        width: 33%;
+      }
+
+      .e-format-delete-button {
+        font-size: 12px;
+        padding-right: 16px;
+        padding-top: 16px;
+      }
+    }
+
+    &.e-rtl {
+      .e-format-font-color-picker {
+        margin-left: 20px;
+        margin-right: 0;
+        @if ($skin-name == 'tailwind') {
+          margin-left: 6px;
+        }
+      }
+    }
+  }
+
+  .e-pivot-calc-dialog-div {
+    // sass-lint:disable-all
+    max-height: 550px !important;
+    // sass-lint:enable-all
+    min-width: 290px;
+
+    .e-dlg-header-content,
+    .e-footer-content {
+      border: 0;
+    }
+
+    .e-dlg-content {
+      padding-bottom: $pivot-dialog-content-padding;
+      @if ($skin-name == 'FluentUI') {
+        // sass-lint:disable-all
+        padding-top: 1px !important;
+        // sass-lint:enable-all
+      }
+    }
+
+    .e-pivot-all-field-title,
+    .e-pivot-field-name-title,
+    .e-pivot-formula-title,
+    .e-olap-hierarchy-title,
+    .e-olap-format-title,
+    .e-olap-member-title {
+      color: $field-list-default-header-font-color;
+      font-size: $field-list-header-font-size;
+      margin-bottom: 4px;
+      margin-top: 12px;
+      overflow: hidden;
+      padding: $pivot-calculated-header-padding 0;
+      padding-bottom: 0;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      @if($skin-name == 'bootstrap5') {
+        padding-bottom: 4px;
+      }
+      @if ($skin-name == 'tailwind') {
+        padding: 0;
+      }
+
+      @if ($skin-name == 'FluentUI') {
+        font-weight: 600;
+      }
+    }
+
+    .e-treeview {
+      .e-sibling {
+        display: none;
+      }
+
+      .e-list-selected {
+        opacity: .5;
+      }
+    }
+
+    .e-treeview ul {
+      overflow: hidden;
+
+      li {
+        padding: 0;
+
+        .e-list-text {
+          font-family: $field-list-font-family;
+        }
+
+        &:not(.e-active) {
+          .e-list-icon {
+            color: $field-list-tree-icon-color;
+          }
+        }
+
+        .e-list-icon {
+          @if ($skin-name != 'bootstrap5') {
+            color: $field-list-tree-icon-color;
+          }
+          //sass-lint:disable-all
+          float: right !important;
+          margin: 0;          
+          margin-right: 12px !important;
+          //sass-lint:enable-all
+        }
+      }
+
+      .e-fullrow {
+        cursor: default;
+      }
+
+      .e-list-item .e-text-content {
+        height: 36px;
+        margin-left: -10px;
+        padding: 0;
+      }
+    }
+
+    .e-treeview .e-list-item div.e-icons {
+      cursor: pointer;
+      font-size: $field-list-icon-size;
+      height: 24px;
+      opacity: $pivot-calculated-icon-opacity;
+      padding: 2px 4px 4px;
+      pointer-events: auto;
+      width: 24px;
+
+      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+        height: 20px;
+        width: 20px;
+      }
+    }
+
+    .e-treeview .e-list-item div.e-icons.e-format {
+      float: right;
+      font-size: 20px;
+      margin-right: 12px;
+      padding-top: $field-list-calc-expand-icon-padding;
+    }
+
+    .e-treeview .e-list-item div.e-iconspace {
+      cursor: pointer;
+      display: inline-block;
+      font-size: 12px;
+      height: 24px;
+      opacity: $pivot-calculated-icon-opacity;
+      padding: 2px 4px 4px;
+      pointer-events: auto;
+      width: 24px;
+      @if ($skin-name == 'tailwind') {
+        height: 20px;
+        width: 20px;
+      }
+    }
+
+    .e-treeview .e-list-item {
+      &:not(.e-active) {
+        span.e-icons {
+          color: $field-list-drag-icon-color;
+        }
+      }
+
+      span.e-icons {
+        @if ($skin-name != 'bootstrap5') {
+          color: $field-list-drag-icon-color;
+        }
+        cursor: move;
+        display: inline-block;
+        font-size: $field-list-icon-size;
+        height: 24px;
+        margin-right: 4px;
+        pointer-events: auto;
+        width: 24px;
+        @if ($skin-name == 'bootstrap5') {
+          height: 20px;
+          padding: 5px 8px 12px 5px;
+          width: 20px;
+        }
+        @if ($skin-name != 'tailwind') {
+          padding: 8px 8px 8px 12px;
+        }
+        @if ($skin-name == 'tailwind') {
+          // sass-lint:disable-all
+          height: 20px;
+          margin-top: 0;
+          padding: 0 5px;
+          position: relative;
+          bottom:1px;
+          width: 20px;
+          //sass-lint:enable-all
+        }
+        @if ($skin-name == 'FluentUI') {
+          position: relative;
+          top: .65px;
+        }
+      }
+      @if ($skin-name == 'tailwind') {
+        &.e-active {
+          span.e-icons {
+            color: $field-list-tree-icon-color;
+          }
+        }
+      }
+    }
+
+    .e-dlg-header {
+      font-size: 18px;
+      font-weight: 500;
+      opacity: $pivot-calculated-header-opacity;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 74%;
+    }
+
+    .e-contextmenu {
+      background-color: $pivot-formula-background;
+      border-radius: $field-list-default-border-radius;
+    }
+
+    .e-contextmenu .e-menu-item {
+      color: $pivot-text-area-background;
+      font-size: 14px;
+      height: 48px;
+      opacity: .87;
+    }
+
+    &.e-rtl {
+      .e-treeview .e-list-item div.e-icons {
+        font-size: 14px;
+        height: 24px;
+        margin-bottom: 10px;
+        padding: 5px;
+        width: 24px;
+
+        @if ($skin-name == 'tailwind') {
+          float: left;
+          margin-left: 12px;
+          margin-right: 0;
+          padding-top: 0;
+        }
+      }
+
+      .e-treeview .e-list-item div.e-edit.e-icons,
+      .e-treeview .e-list-item div.e-edited.e-icons,
+      .e-treeview .e-list-item div.e-remove-report.e-icons {
+        margin-right: 0;
+        transform: rotate(0deg);
+      }
+
+      .e-treeview ul {
+        margin-right: 0;
+
+        li {
+          margin-left: 0;
+          margin-right: $field-list-treeview-padding-size;
+
+          .e-text-content {
+            padding: 0 24px 0 0;
+          }
+        }
+      }
+    }
+
+    // sass-lint:disable-all
+    .e-pivot-calc-input.e-empty-field::-webkit-input-placeholder {
+      color: $error-font-color !important;
+      font-weight: 600 !important;
+    }
+    
+    .e-pivot-calc-input.e-empty-field:-moz-placeholder {
+        color: $error-font-color !important;
+        font-weight: 600 !important;
+    }
+
+    .e-pivot-calc-input.e-empty-field::-moz-placeholder {
+        color: $error-font-color !important;
+        font-weight: 600 !important;
+    }
+
+    .e-pivot-calc-input.e-empty-field:-ms-input-placeholder {
+        color: $error-font-color !important;
+        font-weight: 600 !important;
+    }
+    // sass-lint:enable-all
+
+    .e-pivot-formula {
+      background-color: $pivot-formula-background;
+      border: 1px solid $pivot-formula-border;
+      border-radius: $field-list-default-border-radius;
+      color: $field-list-default-formula-font-color;
+      font-size: $field-list-calc-formula-font-size;
+      height: 70px;
+      // opacity: .38;
+      padding: $pivot-calculated-formula-font-padding;
+      resize: none;
+      width: 100%;
+
+      &.e-copy-drop {
+        cursor: copy;
+      }
+    }
+
+    .e-list-parent .e-list-text {
+      margin-bottom: 8px;
+      min-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 65%;
+    }
+
+    .e-pivot-treeview-outer {
+      background-color: $pivot-formula-background;
+      border: 1px solid $pivot-formula-border;
+      border-radius: $field-list-default-border-radius;
+      height: 120px;
+      overflow: auto;
+    }
+
+    // sass-lint:disable-all
+    &.e-olap-calc-dialog-div {
+      min-width: 575px;
+
+      .e-pivot-calc-outer-div {
+        display: flex;
+
+        .e-olap-field-tree-div {
+          height: $olap-tree-wrapper-height;
+          width: 50%;
+
+          .e-pivot-treeview-outer {
+            height: 100%;
+            margin-top: 0;
+            overflow: hidden;
+
+            .e-pivot-treeview-outer-div {
+              display: inline-block;
+              height: $olap-tree-outer-div-height;
+              overflow: auto;
+              width: 310px;
+            }
+
+            .e-treeview {
+              display: inline-table;
+              height: 100%;
+              width: 100%;
+
+              ul {
+                .e-fullrow {
+                  cursor: move;
+                }
+
+                .e-list-text {
+                  margin-bottom: 0; 
+                  overflow: unset;
+                  width: 100%;
+                }
+
+                .e-calcfieldmember .e-list-text{
+                  width: 150px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                }
+
+                .e-list-item .e-text-content {
+                  height: 30px;
+                  margin: 0;
+                  padding: 0 0 0 24px;
+                }
+
+                .e-remove-report.e-list-icon {
+                  cursor: pointer;
+                  font-size: 13px;
+                  margin-top: 3px;
+                  @if($skin-name == 'tailwind') {
+                    margin-top: 10px;
+                  }
+                }
+
+                .e-list-icon {
+                  cursor: auto;
+                  font-size: $field-list-icon-size;
+                  width: auto;
+
+                  &.e-edit {
+                    cursor: pointer;
+                    padding: 7px !important;
+                  }
+
+                  &.e-edited {
+                    cursor: pointer;
+                    padding: 7px !important;
+                  }
+                }
+
+                .e-list-item div.e-icons {
+                  padding: 0;
+                  height: auto;
+                  float: none !important
+                }
+
+                li {
+                  margin-left: 0;
+                  margin-right: 0;
+                }
+              }
+
+              &.e-rtl {
+                ul {
+                  .e-list-icon {
+                    transform: rotateX(0deg) rotateY(180deg);
+                  }
+
+                  .e-list-item .e-text-content {
+                    padding: 0 24px 0 0;
+                  }
+
+                  li {
+                    margin-left: 0;
+                    margin-right: 0;
+                  }
+                } 
+              }
+            }
+
+            .e-treeview ul:first-child {
+              padding-left: 10px;
+              padding-right: 10px;
+            }
+
+            .e-pivot-all-field-title {
+              color: $field-list-default-header-font-color;
+              flex: auto;
+              margin-top: 0;
+              padding-bottom: $pivot-calculated-header-padding;
+              padding-left: $field-list-header-padding;
+              padding-right: $field-list-header-padding;
+            }
+
+            .e-pivot-all-field-title-container {
+              background-color: $field-list-header-background-color;
+              color: $field-list-default-header-font-color;
+              display: flex;
+              font-size: $field-list-header-font-size;
+              @if ($skin-name == 'tailwind') {
+                height: 30px;
+              }
+
+              .e-info {
+                padding: 7px !important;
+
+                &:hover {
+                  color: $field-list-active-color;
+                }
+              }
+            }
+          }
+        }
+
+        .e-olap-calculated-div {
+          flex: auto;
+          margin-left: 18px;
+
+          .e-pivot-formula {
+            height: 100px;
+          }
+
+          .e-olap-calc-custom-format-div {
+            margin-top: 15px;
+          }
+
+          .e-pivot-formula-title,
+          .e-pivot-field-name-title,
+          .e-olap-hierarchy-title,
+          .e-olap-format-title,
+          .e-olap-member-title {
+            padding-left: 0;
+            padding-right: 0;
+          }
+
+          .e-pivot-field-name-title {
+            margin-top: 0;
+            padding-top: 0;
+          }
+        }
+      }
+
+      &.e-dialog {
+        max-height: 700px !important;
+
+        .e-calc-clear-btn {
+          float: left;
+          margin: 0;
+        }
+      }
+
+      &.e-rtl {
+        .e-pivot-calc-outer-div {
+           .e-olap-calculated-div {
+            margin-left: 0;
+            margin-right: 18px;
+          }
+        }
+
+        &.e-dialog {
+          .e-calc-clear-btn {
+            float: right;
+          }
+        }
+      }
+    }
+    // sass-lint:enable-all
+  }
+
+  .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
+    @if ($skin-name == 'FluentUI') {
+      margin-right: 6px;
+    }
+  }
+
+  .e-bigger.e-pivot-calc-dialog-div,
+  .e-bigger .e-pivot-calc-dialog-div {
+    //sass-lint:disable-all
+    max-height: 590px !important;
+    min-width: 401px !important;
+    // sass-lint:enable-all
+
+    .e-pivot-all-field-title,
+    .e-pivot-field-name-title,
+    .e-pivot-formula-title,
+    .e-olap-hierarchy-title,
+    .e-olap-format-title,
+    .e-olap-member-title {
+      font-size: $field-list-bigger-header-font-size;
+      padding: $pivot-calculated-bigger-header-padding 0;
+      padding-bottom: 0;
+
+      @if ($skin-name == 'FluentUI') {
+        font-weight: 600;
+        margin-top: 16px;
+      }
+      @if ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
+        padding-bottom: 4px;
+        padding-top: 16px;
+      }
+    }
+
+    .e-treeview ul {
+      li {
+        padding: 2px 0;
+      }
+    }
+
+    .e-treeview .e-list-item div.e-icons {
+      font-size: $field-list-bigger-icon-size;
+      @if($skin-name == 'tailwind') or ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') {
+        padding-top: 12px;
+      }
+    }
+
+    .e-treeview .e-list-item span.e-icons {
+      font-size: $field-list-bigger-icon-size;
+      @if ($skin-name == 'FluentUI') or ($skin-name == 'bootstrap5') {
+        position: relative;
+        top: 3px;
+      }
+
+      @if ($skin-name == 'tailwind') {
+        position: relative;
+        top: 1px;
+      }
+    }
+
+    .e-pivot-formula {
+      font-size: $field-list-calc-bigger-formula-font-size;
+    }
+
+    .e-footer-content {
+      padding-right: $pivot-dialog-footer-paddingright;
+      padding-top: $pivot-dialog-footer-padding;
+    }
+
+    // sass-lint:disable-all
+    &.e-olap-calc-dialog-div {
+      max-height: 750px !important;
+      min-width: 580px;
+
+      .e-pivot-calc-outer-div {
+        .e-olap-field-tree-div {
+          height: $olap-bigger-tree-wrapper-height;
+          width : $olap-bigger-tree-width;
+
+          .e-pivot-treeview-outer {
+            .e-pivot-treeview-outer-div {
+              height: $olap-bigger-tree-outer-div-height;
+              width:$olap-bigger-tree-outer-div-width;
+            }
+
+            .e-pivot-all-field-title {
+              padding-bottom: $pivot-calculated-bigger-header-padding;
+            }
+
+            .e-pivot-all-field-title-container {
+              font-size: $field-list-bigger-header-font-size;
+              @if ($skin-name == 'tailwind') {
+                height: 34px;
+              }
+            }
+
+            .e-treeview ul {
+              .e-list-icon {
+                font-size: $field-list-bigger-icon-size;
+              }
+            }
+          }
+        }
+
+        .e-olap-calculated-div {
+          margin-left: 24px;
+        }
+      }
+
+      &.e-rtl {
+        .e-pivot-calc-outer-div {
+           .e-olap-calculated-div {
+            margin-left: 0;
+            margin-right: 24px;
+          }
+        }
+      }
+    }
+  }
+
+  .e-pivotfieldlist-container {
+    .e-adaptive-field-list-dialog,
+    .e-member-editor-dialog {
+      max-width: 400px !important;
+      min-width: 320px !important;
+
+      .e-member-prompt {
+        padding: 25px $field-list-editor-search-padding-size;
+        text-align: center;
+        width: 100%;
+      }
+      // sass-lint:enable-all
+
+      .e-editor-search-container {
+        display: flex;
+        padding: 0 $field-list-editor-search-padding-size 10px;
+
+        .e-clear-icon-hide {
+          display: inline-block;
+          visibility: hidden;
+        }
+      }
+
+      @if ($field-list-skin == 'bootstrap4') {
+        &:not(.e-excel-filter) {
+          .e-editor-search-container {
+            padding: 5px $field-list-editor-search-padding-size 10px;
+          }
+        }
+      }
+
+      .e-member-editor-container-outer-div {
+        display: inline-block;
+        height: $field-list-member-filter-list-height;
+        max-width: 400px;
+        overflow: auto;
+        width: 100%;
+      }
+
+      .e-member-editor-container {
+        display: inline-table;
+        width: 100%;
+
+        &.e-rtl {
+          ul {
+            .e-list-icon {
+              transform: rotateX(0deg) rotateY(180deg);
+            }
+          }
+        }
+      }
+
+      .e-member-editor-container ul {
+        // sass-lint:disable-all
+        margin-left: $field-list-member-filter-list-padding-size;
+        overflow: auto !important;
+        // sass-lint:enable-all
+
+        li {
+          .e-list-text {
+            font-family: $field-list-font-family;
+          }
+
+          .e-list-icon {
+            margin: 0;
+          }
+        }
+      }
+
+      // sass-lint:disable-all
+      .e-disable {
+        display: none !important;
+      }
+      // sass-lint:enable-all
+
+      &.e-rtl {
+        .e-member-editor-outer-container {
+          ul {
+            margin-left: 0;
+            margin-right: $field-list-member-filter-list-padding-size;
+          }
+        }
+      }
+
+      &.e-olap-editor-dialog {
+        .e-member-editor-outer-container {
+          .e-member-editor-container ul {
+            margin-left: 0;
+          }
+
+          .e-treeview ul:first-child {
+            padding-left: 10px;
+            padding-right: 10px;
+          }
+
+          .e-editor-search-container {
+            display: flex;
+          }
+        }
+
+        // sass-lint:disable-all
+        &.e-rtl {
+          .e-member-editor-outer-container {
+            ul {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .e-member-editor-dialog {
+      .e-toolbar .e-toolbar-items {
+        margin-left: $field-list-filter-toolbar-items-margin;
+      }
+
+      .e-clear-filter-button {
+        float: left;
+        margin: 0;
+
+        @if ($skin-name == 'FluentUI') {
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        &.e-disable {
+          display: none;
+        }
+      }
+
+      .e-editor-label-container {
+        background-color: $field-list-editor-label-fill;
+        opacity: $field-list-editor-label-excel-opacity;
+        padding: $field-list-editor-label-padding-size;
+
+        .e-editor-label {
+          color: $field-list-editor-label-color;
+          font: $field-list-editor-label-font;
+          opacity: $field-list-editor-label-opacity;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      .e-filter-sort {
+        box-shadow: none;
+        margin-left: $field-list-sort-wrapper-padding-size;
+
+        // sass-lint:disable-all
+        .e-member-sort {
+          @if ($field-list-skin == 'bootstrap4') {
+            background-color: $content-bg;
+            border-color: $gray-400;
+            color:  $gray-700;
+          }
+
+          &:hover {
+            @if ($field-list-skin == 'bootstrap4') {
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
+            }
+          }
+
+          &.e-active {
+            @if ($field-list-skin == 'bootstrap4') {
+              background-color: $field-list-sort-select-background-color;
+              border-color: $field-list-sort-select-border-color;
+              color: $field-list-sort-select-color;
+              outline: none;
+            }
+          }
+
+          .e-sort-ascend-icon,
+          .e-sort-descend-icon {
+            font-size: 16px;
+          }
+
+          &:focus {
+            @if ($field-list-skin == 'bootstrap4') {
+              background-color: $gray-600 !important;
+              border-color: $gray-600 !important;
+              color: $white !important;
+            }
+
+            &.e-active {
+              @if ($field-list-skin == 'bootstrap4') {
+                background-color: $field-list-sort-select-background-color;
+                border-color: $field-list-sort-select-border-color;
+                color: $field-list-sort-select-color;
+                outline: none;
+              }
+            }
+          }
+        }
+        // sass-lint:enable-all
+      }
+
+      .e-select-all-container ul {
+        margin-left: $field-list-member-filter-list-padding-size;
+        overflow: hidden;
+
+        li {
+          .e-list-text {
+            font-family: $field-list-font-family;
+          }
+
+          .e-list-icon {
+            margin: 0;
+          }
+        }
+      }
+
+      .e-filter-tab-container {
+        border: 0;
+        // sass-lint:enable-all
+
+        .e-tab-header {
+          .e-toolbar-item .e-icon-left + .e-tab-text {
+            margin: 0 0 0 6px;
+          }
+
+          .e-text-wrap {
+            .e-tab-icon {
+              height: 14px;
+              min-width: 14px;
+              width: 14px;
+              @if ($field-list-skin == 'bootstrap4') or ($skin-name == 'bootstrap5') or ($skin-name == 'tailwind') {
+                height: auto;
+              }
+
+              &::before {
+                font-size: 14px;
+              }
+            }
+          }
+        }
+
+        &.e-rtl {
+          .e-tab-header {
+            .e-toolbar-item .e-icon-left + .e-tab-text {
+              margin: 0 6px 0 0;
+            }
+          }
+        }
+      }
+
+      .e-excelfilter {
+        padding-top: 20px;
+
+        @if ($skin-name == 'tailwind') {
+          padding-top: 12px;
+        }
+
+        .e-member-editor-container-outer-div {
+          height: $field-list-excel-member-filter-height;
+        }
+      }
+
+      .e-label-filter,
+      .e-value-filter {
+        height: $field-list-excel-filter-height;
+        overflow: auto;
+        padding: 20px;
+        padding-bottom: 0;
+
+        // sass-lint:disable-all
+        .e-filter-text-div {
+          color: $field-list-button-icon-color !important;
+          font-size: 13px;
+          font-weight: 500;
+          @if ($skin-name == 'tailwind') {
+            padding: 4px;
+          }
+
+        }
+        // sass-lint:enable-all
+
+        .e-filter-option-container-1,
+        .e-filter-option-container-2,
+        .e-separator-div {
+          padding-top: 20px;
+        }
+
+        .e-between-text-div {
+          padding: 8px 0;
+        }
+
+        .e-disable {
+          display: none;
+        }
+
+        @if ($skin-name == 'tailwind') {
+          padding-top: 0;
+        }
+
+      }
+
+      &.e-excel-filter {
+        .e-editor-label-container {
+          opacity: $field-list-editor-label-excel-opacity;
+          padding: $field-list-editor-label-excel-padding-size;
+        }
+      }
+
+      &.e-rtl {
+        .e-toolbar .e-toolbar-items {
+          margin-left: 0;
+          margin-right: $field-list-filter-toolbar-items-margin;
+        }
+
+        .e-member-editor-outer-container {
+          .e-editor-search-container {
+            .e-filter-sort {
+              margin-left: 0;
+              margin-right: $field-list-sort-wrapper-padding-size;
+            }
+          }
+        }
+
+        .e-footer-content {
+          .e-clear-filter-button {
+            float: right;
+          }
+        }
+      }
+
+      &.e-olap-editor-dialog {
+        .e-member-editor-outer-container {
+          .e-select-all-container ul {
+            margin-left: 0;
+          }
+
+          .e-editor-search-container {
+            .e-level-drop {
+              margin: 0 5px;
+
+              .e-caret {
+                font-size: $field-list-icon-size;
+              }
+
+              li .e-disabled {
+                opacity: .5;
+                pointer-events: none;
+              }
+            }
+          }
+        }
+
+        // sass-lint:disable-all
+        &.e-rtl {
+          .e-member-editor-outer-container {
+            .e-editor-search-container {
+              .e-filter-sort {
+                margin-left: 0;
+                margin-right: $field-list-sort-wrapper-padding-size;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .e-adaptive-field-list-dialog {
+      ul {
+        min-height: 170px;
+        overflow: auto;
+      }
+      .e-member-editor-container ul {
+        li {
+          // sass-lint:disable-all
+          .e-calc-measure-icon,
+          .e-calc-dimension-icon,
+          .e-attributeCDB-icon,
+          .e-hierarchyCDB-icon,
+          .e-level-members,
+          .e-namedSetCDB-icon,
+          .e-measure-icon,
+          .e-kpiGoal-icon,
+          .e-kpiStatus-icon,
+          .e-kpiTrend-icon,
+          .e-kpiValue-icon {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      &.e-olap-editor-dialog {
+        // sass-lint:disable-all
+        &.e-rtl {
+          .e-member-editor-outer-container {
+            ul li {
+              .e-calc-measure-icon,
+              .e-calc-dimension-icon,
+              .e-attributeCDB-icon,
+              .e-hierarchyCDB-icon,
+              .e-level-members,
+              .e-namedSetCDB-icon,
+              .e-measure-icon,
+              .e-kpiGoal-icon,
+              .e-kpiStatus-icon,
+              .e-kpiTrend-icon,
+              .e-kpiValue-icon {
+                margin-left: 0;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .e-value-field-settings {
+      max-width: 400px !important;
+      min-width: 300px !important;
+
+      .e-dlg-content {
+        overflow: auto;
+      }
+
+      .e-value-field-div-content {
+        padding: 0 $field-list-editor-search-padding-size 10px;          
+
+        .e-field-option-container {
+          .e-field-name-text-container {
+            display: flex;
+
+            .e-field-name-title,
+            .e-field-name-content {
+              font-size: 13px;
+              font-weight: 500;
+            }
+
+            .e-field-name-title {
+              flex: none;
+            }
+
+            .e-field-name-content {
+              flex: auto;
+              width: 100%;
+            }
+          }
+
+          .e-caption-input-container,
+          .e-type-option-container,
+          .e-base-field-option-container,
+          .e-base-item-option-container {
+            padding-top: $field-list-editor-search-padding-size;
+
+            .e-base-field-option-text,
+            .e-base-item-option-text,
+            .e-type-option-text {
+              font-size: 13px;
+              font-weight: 500;
+              width: 100%;
+
+              @if ($skin-name == 'tailwind') {
+                padding-bottom: 4px;
+              }
+
+            }
+
+            .e-caption-input-text {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+    }
+
+    .e-adaptive-field-list-dialog,
+    .e-member-editor-dialog,
+    .e-value-field-settings {
+      border-radius: $field-list-default-border-radius;
+      width: auto !important;
+
+      .e-dlg-header-content,
+      .e-footer-content {
+        border-radius: $field-list-default-border-radius;
+      }
+
+      .e-dlg-header-content {
+        border: 0;
+        font-weight: normal;
+      }
+
+      .e-footer-content {
+        border-top: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+
+        @if ($skin-name != 'FluentUI') {
+          padding-top: $field-list-editor-dialog-footer-padding;
+        }
+
+        @if ($skin-name == 'FluentUI') {
+          border-top: 0;
+        }
+      }
+
+      .e-dlg-content {
+        overflow: hidden;
+        padding: 0 !important;
+        @if ($skin-name == 'FluentUI') {
+          padding-top: 1px;
+        }
+
+        @if ($skin-name == 'tailwind') {
+          padding: 12px 0 0 0 !important;
+        }
+
+        // sass-lint:disable-all
+
+        .e-empty-field::-webkit-input-placeholder {
+          color: $error-font-color !important;
+          font-weight: 600 !important;
+        }
+
+        .e-empty-field:-moz-placeholder {
+          color: $error-font-color !important;
+          font-weight: 600 !important;
+        }
+
+        .e-empty-field::-moz-placeholder {
+          color: $error-font-color !important;
+          font-weight: 600 !important;
+        }
+
+        .e-empty-field:-ms-input-placeholder {
+          color: $error-font-color !important;
+          font-weight: 600 !important;
+        }
+        // sass-lint:enable-all
+      }
+    }
+
+    .e-adaptive-field-list-dialog {
+      .e-dlg-content {
+        .e-member-editor-outer-container {
+          .e-member-editor-container-outer-div {
+            height: $field-list-member-field-list-height;
+          }
+        }
+      }
+    }
+  }
+
+  .e-field-list-tree.e-drag-item.e-treeview,
+  .e-pivot-calc.e-drag-item.e-treeview {
+    background-color: $field-list-drag-clone-bg-color;
+    border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+    border-radius: $field-list-drag-clone-border-radius;
+    box-shadow: $field-list-drag-clone-shadow-color;
+    height: $field-list-drag-clone-height;
+    line-height: $field-list-drag-clone-line-height;
+    min-width: 100px;
+    padding: 5px 10px;
+    @if ($field-list-skin == 'bootstrap4') {
+      border: 0;
+      padding: 6px 10px;
+    }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+      line-height: normal;
+      padding: 0 10px;
+    }
+
+    .e-text-content {
+      height: 100%;
+      padding: 0;
+      text-align: center;
+      width: 100%;
+      @if ($field-list-skin == 'bootstrap4') {
+        box-shadow: none;
+      }
+
+      .e-list-text {
+        color: $field-list-drag-clone-text-color;
+        font-size: $field-list-drag-clone-font-size;
+        line-height: 1em;
+        width: 100%;
+        // @if ($field-list-skin == 'bootstrap4') {
+        //   line-height: 0;
+        // }
+        @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
+          display: inline;
+          line-height: normal;
+          vertical-align: sub;
+        }
+      }
+    }
+
+    .e-text-content>.e-icons,
+    .e-checkbox-wrapper,
+    .e-list-icon {
+      display: none;
+    }
+
+    &.e-rtl {
+      .e-text-content {
+        padding-right: 0;
+      }
+    }
+
+    &.e-drag-restrict {
+      .e-text-content {
+        padding-left: 24px;
+
+        .e-list-text {
+          padding: 0;
+        }
+      }
+
+      // sass-lint:disable-all
+      .e-no-drop {
+        display: inline-block !important;
+        line-height: 0em;
+        @if ($field-list-skin == 'bootstrap4') {
+          color: $field-list-drag-clone-text-color;
+          opacity: 0.7;
+        }
+
+        &::before {
+          float: left;
+          font-size: $field-list-drag-clone-font-size;
+          padding: 5px 0;
+        }
+      }
+      // sass-lint:enable-all
+
+      &.e-rtl {
+        .e-text-content {
+          padding-left: 0;
+          padding-right: 24px;
+
+          .e-icons {
+            transform: rotateY(180deg);
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-field-list-tree.e-drag-item.e-treeview,
+  .e-bigger .e-pivot-calc.e-drag-item.e-treeview,
+  .e-bigger.e-field-list-tree.e-drag-item.e-treeview,
+  .e-bigger.e-pivot-calc.e-drag-item.e-treeview {
+    height: $field-list-bigger-button-height;
+    padding: 6px 12px;
+    @if ($field-list-skin == 'bootstrap4') {
+      padding: 9px 10px;
+    }
+
+    .e-text-content {
+      .e-list-text {
+        line-height: 1.5em;
+        // @if ($field-list-skin == 'bootstrap4') {
+        //   line-height: 0;
+        // }
+      }
+    }
+
+    &.e-drag-restrict {
+      .e-no-drop {
+        &::before {
+          padding: 4px;
+          }
+        }
+    }
+  }
+
+  // sass-lint:disable-all
+  .e-button-drag-clone {
+    background-color: $field-list-drag-clone-bg-color !important;
+    border: $field-list-border-size $field-list-border-type $field-list-drag-default-border-color;
+    border-radius: $field-list-drag-clone-border-radius;
+    box-shadow: $field-list-drag-clone-shadow-color;
+    color: $field-list-drag-clone-text-color;
+    font-size: $field-list-drag-clone-font-size;
+    font-family: $field-list-font-family;
+    height: $field-list-drag-clone-height;
+    line-height: $field-list-drag-clone-line-height;
+    min-width: 100px;
+    overflow: hidden;
+    padding: 5px 10px;
+    text-align: center;
+    width: auto;
+    z-index: 100000;
+    @if ($field-list-skin == 'bootstrap4') {
+      border: 0;
+      padding: 6px 10px;
+    }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+      line-height: normal;
+      padding: 0 10px;
+    }
+
+    .e-text-content {
+      width: 100%;
+      @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+        display: inline;
+        vertical-align: sub;
+      }
+    }
+  }
+
+  .e-bigger .e-button-drag-clone,
+  .e-bigger.e-button-drag-clone {
+    height: $field-list-bigger-button-height !important;
+    line-height: 1.5em;
+    padding: 6px 12px;
+    @if ($field-list-skin == 'bootstrap4') {
+      border: 0;
+      padding: 7px 12px;
+    }
+    @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+      line-height: normal;
+      padding: 0 12px;
+    }
+  }
+
+  .e-pivot-error-dialog {
+    max-width: 400px !important;
+    width: auto !important;
+  }
+  // sass-lint:enable-all
+
+  .e-bigger .e-pivotfieldlist-container,
+  .e-bigger.e-pivotfieldlist-container {
+
+    .e-adaptive-field-list-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div ,
+    .e-member-editor-dialog .e-dlg-content .e-member-editor-outer-container .e-member-editor-container-outer-div {
+      height: $field-list-member-filter-list-bigger-height;
+    }
+
+    // sass-lint:disable-all
+    .e-member-editor-dialog {
+      .e-editor-search-container {
+        .e-sort-ascend-icon,
+        .e-sort-descend-icon {
+          font-size: 18px;
+        }
+
+        .e-level-drop {
+          .e-caret {
+            font-size: $field-list-bigger-icon-size !important;
+          }
+        }
+      }
+
+      .e-member-editor-outer-container ul {
+        @if ($field-list-skin == 'bootstrap4') {
+          margin-left: -30px;
+        }
+
+        li {
+          .e-calc-measure-icon,
+          .e-calc-dimension-icon,
+          .e-attributeCDB-icon,
+          .e-hierarchyCDB-icon,
+          .e-level-members,
+          .e-namedSetCDB-icon,
+          .e-measure-icon,
+          .e-kpiGoal-icon,
+          .e-kpiStatus-icon,
+          .e-kpiTrend-icon,
+          .e-kpiValue-icon {
+            margin-left: 10px;
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-member-editor-outer-container ul {
+          @if ($field-list-skin == 'bootstrap4') {
+            margin-right: -30px;
+          }
+
+          li {
+            .e-calc-measure-icon,
+            .e-calc-dimension-icon,
+            .e-attributeCDB-icon,
+            .e-hierarchyCDB-icon,
+            .e-level-members,
+            .e-namedSetCDB-icon,
+            .e-measure-icon,
+            .e-kpiGoal-icon,
+            .e-kpiStatus-icon,
+            .e-kpiTrend-icon,
+            .e-kpiValue-icon {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+    // sass-lint:enable-all
+
+    .e-member-editor-dialog {
+      .e-filter-tab-container {
+        .e-tab-header {
+          .e-toolbar-item .e-icon-left + .e-tab-text {
+            margin: 0 0 0 6px;
+          }
+        }
+
+        &.e-rtl {
+          .e-tab-header {
+            .e-toolbar-item .e-icon-left + .e-tab-text {
+              margin: 0 6px 0 0;
+            }
+          }
+        }
+      }
+
+      // sass-lint:disable-all
+      .e-excelfilter {
+
+        @if ($skin-name == 'tailwind') {
+          padding-top: 16px;
+        }
+
+        .e-member-editor-container-outer-div {
+          height: $field-list-excel-member-filter-bigger-height !important;
+        }
+      }
+
+      .e-label-filter,
+      .e-value-filter {
+        height: $field-list-excel-filter-bigger-height;
+
+        .e-filter-text-div {
+          font-size: 14px;
+        }
+
+        .e-filter-option-container-1,
+        .e-filter-option-container-2,
+        .e-separator-div {
+          padding-top: 24px;
+        }
+
+        .e-between-text-div {
+          padding: 10px 0;
+        }
+      }
+
+      &.e-excel-filter {
+        min-width: $field-list-bigger-excel-dialog-min-width !important;
+      }
+    }
+
+    .e-adaptive-field-list-dialog,
+    .e-member-editor-dialog,
+    .e-value-field-settings {
+      .e-dlg-header-content {
+        .e-clear-filter-button.e-small {
+          font-size: 14px;
+          top: 0;
+        }
+      }
+    }
+
+    .e-value-field-settings {
+      .e-value-field-div-content {
+        padding: 0 $field-list-editor-search-padding-size 10px;
+      }
+    }
+
+    .e-value-field-settings {
+      .e-field-name-text-container {
+        display: flex;
+
+        .e-field-name-title,
+        .e-field-name-content {
+          font-size: 14px;
+        }
+      }
+
+      .e-caption-input-container,
+      .e-type-option-container,
+      .e-base-field-option-container,
+      .e-base-item-option-container {
+        padding-top: 24px;
+
+        .e-base-field-option-text,
+        .e-base-item-option-text,
+        .e-type-option-text,
+        .e-caption-input-text {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+}