@syncfusion/ej2-angular-pivotview 20.2.36 → 20.2.37-ngcc

package/styles/pivotfieldlist/_layout.scss

@@ -1,1855 +0,0 @@
-@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;
-        }
-      }
-    }
-  }
-}