@syncfusion/ej2-angular-pivotview 21.2.10-ngcc → 21.2.10

package/styles/pivotfieldlist/_theme.scss

@@ -0,0 +1,1990 @@
+@include export-module('field-list-theme') {
+
+  /*! field-list theme */
+
+  .e-pivotfieldlist {
+
+    .e-member-editor-dialog,
+    .e-olap-editor-dialog {
+      visibility: hidden;
+    }
+
+    .e-select-table {
+      background-color: $field-list-toggle-bg-color;
+      border: .5px $field-list-border-type $field-list-toggle-border-color;
+      box-shadow: $field-list-toggle-shadow-color;
+      color: $field-list-toggle-font-color;
+      font-size: $field-list-toggle-icon-size;
+      height: $field-list-toggle-size;
+      max-height: $field-list-toggle-size;
+      max-width: $field-list-toggle-size;
+      min-height: $field-list-toggle-size;
+      min-width: $field-list-toggle-size;
+      padding: $field-list-toggle-padding-size;
+      position: relative;
+      width: $field-list-toggle-size;
+      z-index: 1000;
+
+      &.e-fieldlist-left {
+        box-shadow: $field-list-toggle-left-shadow-color;
+      }
+
+      &:focus,
+      &:active {
+        background-color: $field-list-toggle-hover-color;
+      }
+
+      &:hover {
+        background-color: $field-list-toggle-hover-color;
+      }
+    }
+  }
+
+  /* stylelint-disable */
+  #{if(&, "&", "*")}.e-rtl {
+
+    .e-select-table {
+      padding: 8px 5px;
+    }
+  }
+
+  .e-bigger .e-pivotfieldlist,
+  .e-bigger.e-pivotfieldlist {
+    .e-select-table {
+      font-size: $field-list-toggle-icon-bigger-size;
+      height: $field-list-toggle-bigger-size;
+      max-height: $field-list-toggle-bigger-size;
+      max-width: $field-list-toggle-bigger-size;
+      min-height: $field-list-toggle-bigger-size;
+      min-width: $field-list-toggle-bigger-size;
+    }
+
+    .e-member-editor-dialog,
+    .e-olap-editor-dialog {
+      max-height: 440px !important;
+      min-width: 370px !important;
+
+      .e-member-editor-container-outer-div {
+        min-height: 75px !important;
+
+        .e-list-parent .e-ul {
+          height: auto;
+        }
+      }
+    }
+  }
+
+  .e-pivotfieldlist-container {
+    font-family: $field-list-font-family;
+    font-size: $field-list-content-font-size;
+    max-width: 700px;
+    min-width: 300px;
+    
+    &.sf-pivotfieldlist-container {    
+    .e-field-list-container .e-field-table .e-field-list
+    {
+      display: block;
+      overflow-y: auto;
+      &.e-olap-field-list-tree.e-treeview {
+         ul:first-child {
+           padding-right: 0;
+         }
+         li {
+          &.e-no-checkbox > .e-text-content > .e-checkbox-wrapper, .e-measure-icon {
+           display: none;
+         }
+         &.e-rtl {
+           ul:first-child {
+             padding-left: 0;
+             padding-right: 10px;
+           }
+        }
+      }
+    }
+
+      li {
+        .e-drag {
+            padding: revert;
+            margin: revert;
+            width: auto;
+            height: auto;
+          }
+        .e-draggable {
+          display: contents;
+          }  
+        .e-text-content {
+            display: flex;
+            align-items: center;
+          }
+        .e-list-text {
+            text-overflow: ellipsis;    
+            overflow-x: hidden;
+            width: 100%;
+            white-space: nowrap;
+        }        
+    }  
+}
+    .e-field-list-container .e-field-table .e-field-list.e-treeview:not(.e-rtl) {
+     .e-list-text {
+       padding-right: revert;
+     }
+   }
+
+   .e-field-list-container .e-field-table .e-field-list.e-treeview.e-rtl {
+     .e-list-text {
+      padding-left: revert;
+    }
+   }
+    .e-adaptive-field-list-dialog .e-member-editor-container
+    {
+      li {
+        &.e-no-checkbox > .e-text-content > .e-checkbox-wrapper, .e-measure-icon {
+          display: none;
+           }
+       }
+    }
+}
+    .e-layout-footer {
+      display: flex;
+      padding: 10px 2px 2px;
+
+      .e-button-layout {
+        flex: auto;
+        text-align: end;
+
+        .e-defer-apply-button {
+          margin-right: 10px;
+        }
+
+        .e-cancel-btn,
+        .e-defer-apply-button {
+          min-width: fit-content;
+        }
+      }
+
+      .e-cancel-btn,
+      .e-defer-apply-button,
+      .e-checkbox-layout {
+        max-width: 25%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .e-checkbox-layout .e-label {
+        padding-right: 10px;
+      }
+
+      .e-checkbox-layout {
+        max-width: 45%;
+        overflow: visible;
+      }
+
+    }
+
+    .e-checkbox-layout {
+      float: left;
+      margin-top: 6px;
+
+      @if ($skin-name == 'tailwind') or ($skin-name == 'FluentUI') {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }
+    }
+
+    &.e-rtl {
+      .e-layout-footer {
+        .e-defer-apply-button {
+          margin-left: 10px;
+        }
+      }
+
+      .e-checkbox-layout {
+        float: right;
+      }
+    }
+
+    &.e-dialog {
+      max-height: 550px !important;
+
+      .e-layout-footer {
+        padding: 0;
+      }
+
+      .e-checkbox-layout {
+        margin-left: 10px;
+      }
+
+      .e-button-layout {
+        margin-right: 10px;
+      }
+    }
+
+    /* stylelint-enable */
+
+    .e-dlg-header-content,
+    .e-footer-content {
+      border: 0;
+    }
+
+    .e-dlg-header-content {
+      @if ($skin-name == 'bootstrap5') {
+        border-bottom: 1px solid $field-list-border;
+      }
+    }
+
+    .e-footer-content {
+      @if ($skin-name == 'bootstrap5') {
+        border-top: 1px solid $field-list-border;
+      }
+    }
+
+    .e-field-list-title {
+      display: flex;
+      font-size: $field-list-title-font-size;
+      min-height: 25px;
+      padding: 0 2px $field-list-title-padding-size;
+      width: 100%;
+
+      .e-title-content {
+        flex: auto;
+      }
+    }
+
+    .e-title-header {
+      display: flex;
+      padding: 2px;
+      width: 100%;
+
+      .e-title-content {
+        flex: auto;
+      }
+    }
+
+    .e-field-list-container {
+      display: flex;
+      height: 342px;
+      padding: 1px;
+      position: relative;
+
+      .e-field-table {
+        border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+        border-radius: $field-list-default-border-radius;
+        display: inline-block;
+        overflow: hidden;
+        width: 30%;
+
+        .e-field-list-tree {
+          .e-sibling {
+            display: none;
+          }
+        }
+
+        .e-field-header,
+        .e-field-list {
+          width: 100%;
+        }
+
+        .e-field-header {
+          background-color: $field-list-header-background-color;
+          color: $field-list-default-header-font-color;
+          font-size: $field-list-header-font-size;
+          font-weight: normal;
+          height: $field-list-header-height;
+          overflow: hidden;
+          padding: $field-list-tree-header-padding 0 0 $field-list-header-padding;
+          text-align: left;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          @if ($field-list-skin == 'tailwind') {
+            text-transform: uppercase;
+          }
+
+          @if ($field-list-skin == 'bootstrap4') {
+            padding-left: 12px;
+          }
+
+          @if ($skin-name == 'FluentUI') {
+            font-weight: 600;
+          }
+        }
+
+        .e-field-header-container {
+          background-color: $field-list-header-background-color;
+          color: $field-list-default-header-font-color;
+          display: flex;
+          padding-right: $field-list-header-padding;
+
+          .e-field-header {
+            flex: auto;
+          }
+
+          .e-sort-none,
+          .e-sort-ascend,
+          .e-sort-descend {
+            color: $field-list-default-header-icon-font-color;
+            cursor: pointer;
+            font-size: $field-list-header-icon-size;
+            /* stylelint-disable */
+            height: 20px !important;
+            /* stylelint-enable */
+            padding: $field-list-tree-header-padding 0 0 $field-list-icon-to-icon-padding;
+            width: 20px;
+
+            &.e-selected::before {
+              color: $field-list-active-color;
+            }
+
+            &:hover {
+              font-weight: bold;
+            }
+
+            &:focus {
+              font-weight: bold;
+            }
+          }
+
+          /* stylelint-disable */
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: 0 0 $field-list-icon-to-icon-padding $field-list-tree-header-padding !important;
+              transform: rotate(180deg);
+            }
+          }
+          /* stylelint-enable */
+        }
+
+        .e-field-list-tree-outer-div {
+          display: inline-block;
+          height: 310px;
+          overflow: auto;
+          width: 100%;
+        }
+
+        .e-field-list {
+          display: inline-table;
+          height: 100%;
+          padding-left: 2px;
+          width: 100%;
+
+          &:not(.e-olap-field-list-tree) {
+            ul {
+              padding-left: $field-list-treeview-ul-padding;
+
+              li.e-pivot-parent{
+                @if ($skin-name == 'bootstrap5') {
+                  padding-left: 10px;
+                }
+
+                @if ($skin-name == 'FluentUI') {
+                  padding-left: 9px;
+                }
+              }
+
+              li:not(.e-pivot-parent):not(.e-pivot-child) {
+                .e-text-content {
+                  padding-left: $field-list-treeview-li-padding;
+                }
+              }
+            }
+          }
+
+          ul {
+            overflow: hidden;
+
+            li {
+              .e-fullrow {
+                cursor: default;
+              }
+
+              .e-drag {
+                color: $field-list-drag-icon-color;
+                cursor: move;
+                display: inline-block;
+                font-size: $field-list-icon-size;
+                height: 20px;
+                margin-bottom: $field-list-treeview-drag-margin;
+                margin-right: 6px;
+                pointer-events: all;
+                text-align: center;
+                vertical-align: bottom;
+                width: 20px;
+
+                @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+                  margin-right: 4px;
+                  padding-left: 8px;
+                }
+
+                @if ($skin-name == 'tailwind') {
+                  margin-bottom: 0;
+                  vertical-align: middle;
+                }
+
+                &.e-disable-drag {
+                  cursor: not-allowed;
+                  opacity: .4;
+                  visibility: hidden;
+                }
+              }
+
+              .e-list-icon {
+                color: $field-list-tree-icon-color;
+                margin: 0;
+              }
+
+              /* stylelint-disable */
+              .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;
+              }
+
+              /* stylelint-enable */
+
+              .e-list-selected {
+                opacity: .5;
+              }
+
+              .e-selected-node {
+                font-weight: $field-list-treeview-font-weight;
+              }
+
+              .e-list-text {
+                font-family: $field-list-font-family;
+              }
+            }
+
+            /* stylelint-disable */
+            li.e-disable {
+              display: none !important;
+            }
+            /* stylelint-enable */
+          }
+
+          &.e-olap-field-list-tree {
+            ul {
+              .e-list-icon {
+                font-size: $field-list-icon-size;
+                height: auto;
+                width: auto;
+              }
+            }
+
+            &.e-treeview ul:first-child {
+              padding-left: 10px;
+              padding-right: 10px;
+            }
+
+            &.e-rtl {
+              ul {
+                .e-list-icon {
+                  transform: rotateX(0deg) rotateY(180deg);
+                }
+              }
+            }
+          }
+        }
+
+        &.e-olap-field-table {
+          width: 40%;
+        }
+      }
+
+      .e-axis-table {
+        display: flex;
+        overflow: hidden;
+        width: 70%;
+
+        .e-left-axis-fields,
+        .e-right-axis-fields {
+          padding-left: $field-list-default-padding-size;
+          width: 50%;
+        }
+
+        .e-left-axis-fields .e-field-list-filters,
+        .e-left-axis-fields .e-field-list-rows,
+        .e-right-axis-fields .e-field-list-columns,
+        .e-right-axis-fields .e-field-list-values {
+          background-color: $field-list-table-background-color;
+          border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+          border-radius: $field-list-default-border-radius;
+          fill: $field-list-default-fill-color;
+          font-weight: normal;
+          min-height: 165px;
+          position: relative;
+          width: 100%;
+
+          .e-axis-container {
+            background-color: $field-list-header-background-color;
+            border-bottom: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+            color: $field-list-default-header-font-color;
+            display: flex;
+            height: $field-list-header-height;
+            padding: 2px $field-list-header-padding 5px;
+
+            @if ($skin-name == 'tailwind') {
+              padding: 5px $field-list-header-padding;
+            }
+
+            .e-axis-icon-container {
+              height: 20px;
+              padding-top: $field-list-header-icon-wrapper-padding;
+              width: 20px;
+
+              .e-axis-rows,
+              .e-axis-columns,
+              .e-axis-values,
+              .e-axis-filters {
+                color: $field-list-default-header-icon-font-color;
+                font-size: $field-list-header-icon-size;
+              }
+            }
+          }
+
+          .e-axis-header {
+            flex: auto;
+            font-size: $field-list-header-font-size;
+            line-height: $field-list-header-content-line-height;
+            margin-top: 2px;
+            overflow: hidden;
+            padding: 0 8px;
+            text-overflow: ellipsis;
+            text-transform: $field-list-text-transform;
+            width: 100%;
+
+            @if ($field-list-skin == 'bootstrap4') {
+              margin-top: 3px;
+            }
+
+            @if ($skin-name == 'bootstrap5') {
+              margin-top: 4px;
+            }
+          }
+
+          .e-axis-content {
+            cursor: default;
+            width: 100%;
+
+            &.e-drag-restrict {
+              cursor: no-drop;
+            }
+
+            .e-pvt-btn-div {
+
+              .e-drop-indicator-last,
+              .e-drop-indicator {
+                display: block;
+                pointer-events: none;
+                width: 100%;
+
+                &.e-drop-hover {
+                  border-top: 2px dashed $field-list-drop-hover-color;
+                  margin-top: -2px;
+                  @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5'){
+                    border-top: 2px solid $field-list-drop-hover-color;
+                  }
+                }
+              }
+
+              &.e-first-btn {
+                .e-drop-indicator {
+                  &.e-drop-hover {
+                    position: absolute;
+                  }
+                }
+              }
+
+              .e-pivot-button {
+                background-color: $field-list-button-color;
+                border-bottom: $field-list-border-size $field-list-border-type $field-list-button-border-color;
+                border-left: 0;
+                border-radius: 0;
+                border-right: 0;
+                border-top: 0;
+                box-shadow: none;
+                cursor: default;
+                display: flex;
+                font-weight: normal;
+                height: $field-list-button-height;
+                line-height: 1em;
+                padding: $field-list-button-padding;
+                text-transform: none;
+                width: 100%;
+
+                @if ($field-list-skin == 'bootstrap4') {
+                  color: $field-list-button-font-color;
+                }
+
+                @if ($skin-name == 'bootstrap5') {
+                  color: $field-list-button-font-color;
+                }
+
+                &.e-list-selected {
+                  color: $field-list-button-font-color;
+                  opacity: .5;
+                }
+
+                &:hover {
+                  background-color: $field-list-button-hover-color;
+
+                  .e-content {
+                    background-color: transparent;
+                  }
+                }
+
+                &:focus,
+                &:active {
+                  background-color: $field-list-button-focus-color;
+                  color: $field-list-button-active-color;
+
+                  .e-content {
+                    background-color: transparent;
+                  }
+
+                  .e-sort,
+                  .e-pv-filter,
+                  .e-pv-filtered,
+                  .e-dropdown-icon,
+                  .e-edit {
+                    color: $field-list-button-active-color;
+                  }
+
+                  .e-drag {
+                    @if ($skin-name == 'tailwind') {
+                      color: $field-list-button-active-color;
+                    }
+                  }
+                }
+
+                .e-content {
+                  background-color: transparent;
+                  flex: auto;
+                  font-size: $field-list-button-font-size;
+                  height: 16px;
+                  line-height: 1em;
+                  overflow: hidden;
+                  padding: 0 8px;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  width: 70%;
+                  @if ($skin-name == 'tailwind') {
+                    line-height: 1.2em;
+                  }
+                }
+
+                .e-draggable {
+                  height: 20px;
+                  width: 20px;
+                }
+
+                .e-drag {
+                  color: $field-list-drag-icon-color;
+                  cursor: move;
+                  font-size: $field-list-icon-size;
+                  height: 20px;
+                  width: 20px;
+
+                  &.e-disable-drag {
+                    cursor: not-allowed;
+                    opacity: .4;
+                    visibility: hidden;
+                  }
+                }
+
+                .e-sort,
+                .e-pv-filter,
+                .e-pv-filtered,
+                .e-dropdown-icon,
+                .e-edit {
+                  color: $field-list-button-icon-color;
+                  cursor: pointer;
+                  display: inline-block;
+                  font-size: $field-list-icon-size;
+                  height: 20px;
+                  padding-left: $field-list-icon-to-icon-padding;
+                  width: 20px;
+
+                  &:hover {
+                    color: $field-list-icon-hover-color;
+                  }
+
+                  &.e-disable {
+                    display: none;
+                  }
+                }
+
+                .e-sort {
+                  height: $field-list-icon-size;
+                }
+
+                .e-remove {
+                  display: none;
+                }
+
+                &.e-rtl {
+                  .e-content {
+                    text-align: right;
+                  }
+
+                  .e-sort,
+                  .e-pv-filter,
+                  .e-pv-filtered,
+                  .e-remove,
+                  .e-dropdown-icon,
+                  .e-edit {
+                    padding-left: 0;
+                    padding-right: $field-list-icon-to-icon-padding;
+                  }
+                }
+              }
+            }
+          }
+
+          .e-sort {
+            height: fit-content;
+            transform: rotateX(0deg);
+            transition: transform 200ms ease-in-out;
+
+            &.e-descend {
+              transform: rotateX(180deg);
+            }
+          }
+
+          .e-axis-content {
+            height: $field-list-axis-content-height;
+            overflow: auto;
+            scroll-behavior: smooth;
+          }
+
+          .e-draggable-prompt {
+            bottom: 32%;
+            color: $field-list-default-prompt-color;
+            font-size: $field-list-content-font-size;
+            height: 25px;
+            pointer-events: none;
+            position: absolute;
+            text-align: center;
+            width: 100%;
+
+            &.e-disable {
+              display: none;
+            }
+          }
+        }
+
+        .e-left-axis-fields .e-field-list-rows,
+        .e-right-axis-fields .e-field-list-values {
+          margin-top: $field-list-default-padding-size;
+        }
+
+        &.e-olap-axis-table {
+          width: 60%;
+        }
+      }
+    }
+
+    &.e-search-mode {
+      &.e-static {
+        max-height: 750px;
+
+        .e-field-list-container .e-field-table {
+          height: 261px;
+        }
+      }
+
+      &.e-popup {
+        min-height: 540px;
+
+        .e-field-list-container {
+          height: 369px;
+
+          /* stylelint-disable */
+          .e-field-table {
+            height: $field-list-search-popup-table-height !important;
+          }
+
+          .e-axis-table  {
+            height: 392px;
+
+            .e-axis-content {
+              height: $field-list-search-popup-axis-content-height !important;
+            }
+          }
+          /* stylelint-enable */
+        }
+      }
+
+      .e-member-prompt {
+        color: $field-list-drag-icon-color;
+        padding: $field-list-member-prompt-padding-size;
+        text-align: center;
+        width: 100%;
+
+        &.e-disable {
+          display: none;
+        }
+      }
+
+      .e-field-table {
+        .e-field-list-search {
+          display: flex;
+          padding: $field-list-search-padding-size;
+
+          .e-field-list-search-input .e-field-list-search-icon {
+            float: right;
+            font-size: $field-list-header-icon-size;
+          }
+
+          /* stylelint-disable */
+          .e-input-group .e-input-group-icon,
+          .e-input-group.e-control-wrapper .e-input-group-icon {
+            border-width: 0 !important;
+            cursor: text !important;
+          }
+
+          .e-input-group-icon:hover {
+            background-color: transparent !important;
+            border: transparent !important;
+            color: currentColor !important;
+          }
+        }
+
+        .e-field-list-tree-outer-div .e-disable,
+        .e-disable {
+          display: none !important;
+        }
+      }
+    }
+
+    .e-calculated-field {
+      color: $field-list-cal-button-text-color;
+      font-size: $field-list-button-font-size;
+      font-weight: $field-list-button-font-weight;
+      max-width: 160px;
+      min-width: 145px;
+
+      &.e-disable {
+        display: none;
+      }
+    }
+
+    /* stylelint-enable */
+
+    &.e-rtl {
+      .e-field-table {
+        .e-field-list {
+          padding-left: 0;
+          padding-right: 2px;
+
+          &:not(.e-olap-field-list-tree) {
+            ul {
+              padding-right: $field-list-treeview-ul-padding;
+
+              li.e-pivot-parent{
+                @if ($skin-name == 'bootstrap5') {
+                  padding-right: 5px;
+                }
+
+                @if ($skin-name == 'FluentUI') {
+                  padding-right: 9px;
+                }
+              }
+
+              li:not(.e-pivot-parent):not(.e-pivot-child) {
+                .e-text-content {
+                  padding-right: $field-list-treeview-li-padding;
+                }
+              }
+            }
+          }
+
+          ul li {
+            /* stylelint-disable */
+            .e-list-text {
+              font-family: $field-list-font-family;
+            }
+
+            .e-drag {
+              margin-left: 6px !important;
+              margin-right: 0 !important;
+              @if ($skin-name == 'bootstrap5') or ($skin-name == 'FluentUI') {
+                padding-right: 8px;
+              }
+            }
+
+            .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;
+            }
+
+            /* stylelint-enable */
+          }
+        }
+
+        .e-field-header {
+          padding-left: 0;
+          padding-right: $field-list-header-padding;
+          text-align: right;
+
+          @if ($field-list-skin == 'bootstrap4') {
+            padding-right: 12px;
+          }
+        }
+
+        .e-field-header-container {
+          padding-left: $field-list-header-padding;
+          padding-right: 0;
+
+          .e-sort-none,
+          .e-sort-ascend,
+          .e-sort-descend {
+            padding: $field-list-tree-header-padding $field-list-icon-to-icon-padding 0 0;
+          }
+
+          /* stylelint-disable */
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+              transform: rotate(180deg);
+            }
+          }
+          /* stylelint-enable */
+        }
+      }
+
+      .e-axis-table {
+
+        .e-left-axis-fields,
+        .e-right-axis-fields {
+          padding-left: 0;
+          padding-right: $field-list-default-padding-size;
+        }
+
+        .e-left-axis-fields .e-field-list-filters,
+        .e-left-axis-fields .e-field-list-rows,
+        .e-right-axis-fields .e-field-list-columns,
+        .e-right-axis-fields .e-field-list-values {
+          .e-axis-header {
+            float: right;
+          }
+        }
+      }
+    }
+
+    &.e-static {
+      background-color: $field-list-default-bg-color;
+      border: $field-list-border-size $field-list-border-type $field-list-default-border-color;
+      max-height: 700px;
+      padding: $field-list-static-padding-size;
+      position: relative;
+
+      .e-title-content {
+        color: $field-list-default-font-color;
+      }
+
+      .e-field-list-container {
+        display: inline-block;
+        height: 100%;
+        width: 100%;
+
+        .e-field-table {
+          height: 210px;
+          width: 100%;
+
+          .e-field-list-tree-outer-div {
+            height: 180px;
+          }
+        }
+
+        .e-center-div {
+          display: none;
+        }
+
+        .e-center-title {
+          color: $field-list-default-header-font-color;
+          font-size: $field-list-header-font-size;
+          height: 25px;
+          margin-top: 5px;
+          overflow: hidden;
+          text-align: left;
+          text-overflow: ellipsis;
+        }
+
+        .e-axis-table {
+          width: 100%;
+
+          .e-left-axis-fields {
+            padding: 0;
+          }
+
+          .e-right-axis-fields {
+            padding-left: $field-list-default-padding-size;
+          }
+
+          .e-left-axis-fields .e-field-list-rows,
+          .e-right-axis-fields .e-field-list-values {
+            margin-top: $field-list-default-padding-size;
+          }
+
+          .e-left-axis-fields .e-field-list-filters,
+          .e-left-axis-fields .e-field-list-rows,
+          .e-right-axis-fields .e-field-list-columns,
+          .e-right-axis-fields .e-field-list-values {
+            .e-axis-container {
+              .e-axis-icon-container {
+                padding-top: $field-list-static-header-icon-wrapper-padding;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-center-title {
+          text-align: right;
+        }
+
+        .e-axis-table {
+          .e-left-axis-fields {
+            padding-left: $field-list-static-padding-size;
+          }
+
+          .e-right-axis-fields {
+            padding: 0;
+          }
+        }
+      }
+    }
+
+    &.e-device {
+      height: 100%;
+      /* stylelint-disable */
+      max-height: 100% !important;
+      max-width: 100% !important;
+      /* stylelint-enable */
+      min-height: 500px;
+      width: 100%;
+
+      .e-dlg-header-content {
+        background-color: $field-list-mobile-header-color;
+        color: $field-list-mobile-header-font-color;
+        font-size: 14px;
+        @if ($skin-name == 'tailwind') {
+          padding-left: 16px;
+          padding-right: 16px;
+        }
+      }
+
+      .e-adaptive-field-list-dialog,
+      .e-member-editor-dialog {
+        .e-dlg-header-content {
+          background-color: transparent;
+          color: $field-list-mobile-header-font-color;
+        }
+
+        .e-dlg-content .e-field-list-tree-outer-div {
+          height: 210px;
+          overflow: auto;
+        }
+      }
+
+      .e-title-mobile-header {
+        display: flex;
+        align-items: center;
+      }
+
+      .e-field-list-back-icon {
+        color: $field-list-back-font-color;
+        font-size: 16px;
+        height: auto;
+        margin-left: 0;
+        margin-right: 12px;
+        text-align: center;
+        width: 24px;
+      }
+
+      .e-disable {
+        display: none;
+      }
+
+      .e-adaptive-container {
+        height: 100%;
+        position: relative;
+
+        .e-tab-header {
+          background-color: $field-list-header-background-color;
+
+          .e-toolbar-item {
+            .e-tab-wrap {
+              border: 0;
+            }
+          }
+        }
+
+        .e-content {
+          display: initial;
+
+          .e-field-list-filters,
+          .e-field-list-rows,
+          .e-field-list-columns,
+          .e-field-list-values {
+            display: inline-block;
+            height: 100%;
+            min-height: 250px;
+            padding-top: $field-list-adaptive-content-padding-size;
+            position: relative;
+            width: 100%;
+
+            .e-axis-content {
+              overflow: auto;
+            }
+
+            .e-pvt-btn-div {
+              display: grid;
+
+              .e-drop-indicator {
+                display: none;
+              }
+
+              .e-pivot-button {
+                border: $field-list-border-size $field-list-border-type $field-list-button-border-color;
+                border-left: 0;
+                border-radius: 0;
+                border-right: 0;
+                border-top: 0;
+                border-width: 1px 0;
+                box-shadow: none;
+                display: flex;
+                font-size: $field-list-bigger-button-font-size;
+                font-weight: normal;
+                height: $field-list-adaptive-pivot-button-height;
+                line-height: normal;
+                padding: $field-list-adaptive-pivot-button-padding;
+                text-transform: none;
+                width: 100%;
+
+                @if ($skin-name == 'bootstrap5') {
+                  background-color: $field-list-default-bg-color;
+                  color: $field-list-default-font-color;
+                }
+
+                &.e-list-selected {
+                  opacity: .5;
+                }
+
+                .e-content {
+                  flex: auto;
+                  font-size: $field-list-bigger-button-font-size;
+                  height: 100%;
+                  margin-top: -2px;
+                  overflow: hidden;
+                  text-align: left;
+                  text-overflow: ellipsis;
+                  width: 70%;
+                }
+
+                .e-drag {
+                  display: none;
+                }
+
+                /* stylelint-disable */
+                .e-sort,
+                .e-pv-filter,
+                .e-pv-filtered,
+                .e-remove,
+                .e-dropdown-icon,
+                .e-edit {
+                  color: $field-list-button-icon-color;
+                  cursor: pointer;
+                  display: inline-block;
+                  font-size: $field-list-bigger-icon-size;
+                  height: 24px;
+                  padding-left: 10px;
+                  width: 24px;
+                  font-size: 14px !important;
+
+                  @if ($field-list-skin == 'bootstrap4') {
+                    color: $white;
+                  }
+
+                  @if ($skin-name == 'bootstrap5') {
+                    color: $field-list-button-icon-color;
+                    padding-left: 8px;
+                  }
+
+                  &:hover {
+                    color: $field-list-icon-hover-color;
+                  }
+
+                  &.e-disable {
+                    display: none;
+                  }
+                }
+
+                /* stylelint-enable */
+
+                .e-sort {
+                  height: fit-content;
+                  transform: rotateX(0deg);
+                  transition: transform 200ms ease-in-out;
+
+                  &.e-descend {
+                    transform: rotateX(180deg);
+                  }
+                }
+
+                .e-remove {
+                  display: inline-block;
+                }
+
+                &.e-rtl {
+                  .e-content {
+                    text-align: right;
+                  }
+
+                  .e-sort,
+                  .e-pv-filter,
+                  .e-pv-filtered,
+                  .e-remove,
+                  .e-dropdown-icon,
+                  .e-edit {
+                    padding-left: 0;
+                    padding-right: 10px;
+
+                    @if ($skin-name == 'tailwind') {
+                      margin-right: 8px;
+                      padding-right: 0;
+                    }
+                    @if ($skin-name == 'bootstrap5') {
+                      padding-right: 8px;
+                    }
+                  }
+                }
+              }
+            }
+
+            .e-axis-content {
+              height: 100%;
+              width: 100%;
+            }
+
+            .e-draggable-prompt {
+              border: 1px dashed $field-list-header-background-color;
+              color: $field-list-header-background-color;
+              font-size: $field-list-drag-clone-font-size;
+              height: $field-list-adaptive-drag-prompt-height;
+              left: 15%;
+              line-height: $field-list-adaptive-drag-prompt-height;
+              pointer-events: none;
+              position: absolute;
+              text-align: center;
+              top: 25%;
+              vertical-align: middle;
+              width: 70%;
+
+              @if ($skin-name == 'bootstrap5') {
+                color: $field-list-default-font-color;
+              }
+            }
+          }
+
+          .e-pivot-calc-outer-div {
+            .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-font-color;
+              height: 200px;
+              margin-left: 20px;
+              margin-right: 20px;
+              margin-top: 25px;
+              padding: 2px 3px;
+              resize: none;
+              width: 90%;
+            }
+
+            /* stylelint-disable */
+            .e-pivot-calc-input-div,
+            .e-member-options,
+            .e-pivot-calc-custom-format-div {
+              margin-left: 20px;
+              margin-right: 20px;
+              margin-top: 20px;
+              width: 90% !important;
+            }
+
+            /* stylelint-enable */
+
+            .e-accordion {
+              margin-top: 20px;
+              overflow: auto;
+
+              .e-acrdn-header {
+                align-items: center;
+                display: flex;
+              }
+
+              .e-acrdn-header-icon {
+                display: table;
+                font-size: 12px;
+                min-width: 28px;
+                padding: 0;
+                position: absolute;
+                right: 16px;
+
+                .e-list-icon {
+                  cursor: pointer;
+                  display: table-cell;
+                  padding-right: 6px;
+                  text-align: center;
+                  vertical-align: middle;
+                }
+              }
+
+              .e-icons.e-frame {
+                margin-right: 12px;
+              }
+
+              &.e-rtl {
+                .e-acrdn-header-icon {
+                  left: 16px;
+                  right: auto;
+                }
+
+                /* stylelint-disable */
+                .e-icons.e-frame {
+                  margin-left: 12px !important;
+                  margin-right: 0 !important;
+                }
+
+                /* stylelint-enable */
+              }
+            }
+
+            .e-radio-wrapper {
+              margin-bottom: 24px;
+              margin-right: 20px;
+
+              .e-label {
+                color: $field-list-default-font-color;
+                font-family: $field-list-font-family;
+                font-size: 14px;
+                opacity: .87;
+              }
+            }
+
+            .e-pivot-ok-button,
+            .e-pivot-add-button,
+            .e-pivot-cancel-button {
+              float: right;
+              margin-right: 20px;
+              margin-top: 32px;
+            }
+
+            .e-pivot-ok-button {
+              bottom: 0;
+              position: sticky;
+            }
+
+            .e-pivot-accord {
+              max-height: 290px;
+              overflow: auto;
+
+              ul {
+
+                .e-list-icon {
+                  color: $field-list-tree-icon-color;
+                }
+
+                .e-calcfieldmember .e-list-text {
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  width: 53%;
+                }
+
+                .e-list-header-icon {
+                  display: table;
+                  height: 30px;
+                  min-height: 30px;
+                  min-width: 24px;
+                  padding: 0;
+                  position: absolute;
+                  right: 16px;
+                  top: 0;
+
+                  .e-list-edit-icon,
+                  .e-remove-report.e-icons {
+                    color: $field-list-tree-icon-color;
+                    display: table-cell;
+                    padding: 5px;
+                    pointer-events: all;
+                    text-align: center;
+                    vertical-align: middle;
+                  }
+                }
+              }
+
+              &.e-rtl {
+                ul {
+                  .e-list-header-icon {
+                    left: 16px;
+                    right: auto;
+                  }
+
+                  .e-list-icon {
+                    transform: rotateX(0deg) rotateY(180deg);
+                  }
+                }
+              }
+            }
+
+            &.e-olap-calc-outer-div {
+              max-height: 350px;
+              overflow: hidden;
+              overflow-y: auto;
+            }
+          }
+        }
+
+        .e-field-list-footer {
+          bottom: 20px;
+          display: inline-block;
+          position: absolute;
+          vertical-align: bottom;
+          width: 100%;
+
+          .e-field-list-footer-content {
+            display: inline-block;
+            padding: $field-list-adaptive-footer-padding-size;
+            width: 100%;
+
+            .e-field-list-btn,
+            .e-calculated-field-btn {
+              float: right;
+              height: $field-list-adaptive-btn-size;
+              pointer-events: all;
+              width: $field-list-adaptive-btn-size;
+              z-index: 1000;
+
+              .e-add-icon {
+                font-size: $field-list-adaptive-btn-icon-size;
+                line-height: $field-list-adaptive-icon-height;
+              }
+            }
+          }
+        }
+      }
+
+      .e-footer-content.e-field-list-footer {
+        background-color: transparent;
+        bottom: 0;
+        display: inline-block;
+        padding: $field-list-adaptive-footer-padding-size;
+        pointer-events: none;
+        position: absolute;
+        vertical-align: bottom;
+        width: 100%;
+
+        .e-field-list-btn,
+        .e-calculated-field-btn,
+        .e-cancel-btn,
+        .e-defer-apply-button {
+          float: right;
+          height: $field-list-adaptive-btn-size;
+          pointer-events: all;
+          width: $field-list-adaptive-btn-size;
+          z-index: 1000;
+
+          .e-add-icon {
+            font-size: $field-list-adaptive-btn-icon-size;
+            line-height: $field-list-adaptive-icon-height;
+          }
+        }
+
+        .e-cancel-btn,
+        .e-defer-apply-button {
+          float: left;
+        }
+
+        .e-cancel-btn,
+        .e-defer-apply-button,
+        .e-checkbox-layout {
+          max-width: 20%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .e-checkbox-layout {
+          max-width: 45%;
+        }
+      }
+
+      &.e-static {
+        border: 0;
+        padding: 0;
+
+        .e-field-list-filters,
+        .e-field-list-rows,
+        .e-field-list-columns,
+        .e-field-list-values {
+          .e-axis-content {
+            max-height: 600px;
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-field-list-back-icon {
+          margin-left: 12px;
+          margin-right: 0;
+          transform: rotateY(180deg);
+        }
+
+        .e-field-list-footer {
+
+          .e-field-list-btn,
+          .e-calculated-field-btn {
+            float: left;
+          }
+
+          .e-cancel-btn,
+          .e-defer-apply-button {
+            float: right;
+          }
+        }
+
+        /* stylelint-disable */
+        .e-pivot-calc-outer-div {
+
+          .e-pivot-ok-button,
+          .e-pivot-add-button,
+          .e-pivot-cancel-button {
+            float: left !important;
+            margin-left: 20px;
+          }
+        }
+
+        /* stylelint-enable */
+      }
+    }
+  }
+
+  /* stylelint-disable */
+  .e-bigger .e-pivotfieldlist-container,
+  .e-bigger.e-pivotfieldlist-container {
+    .e-field-table {
+
+      .e-left-axis-fields,
+      .e-right-axis-fields {
+        padding-left: $field-list-default-bigger-padding-size;
+      }
+
+      .e-field-header {
+        background-color: $field-list-header-background-color;
+        color: $field-list-default-header-font-color;
+        font-size: $field-list-bigger-header-font-size;
+        font-weight: normal;
+        height: $field-list-bigger-header-height;
+        overflow: hidden;
+        padding: $field-list-tree-header-padding 0 0 $field-list-bigger-header-padding;
+
+        @if ($field-list-skin == 'bootstrap4') {
+          height: 40px;
+          padding-left: 16px;
+          padding-top: $field-list-bigger-tree-header-padding;
+        }
+      }
+
+      .e-field-header-container {
+        padding-right: $field-list-bigger-header-padding;
+
+        .e-sort-none,
+        .e-sort-ascend,
+        .e-sort-descend {
+          font-size: $field-list-bigger-header-icon-size;
+          height: 24px !important;
+          padding: $field-list-tree-header-padding 0 0 $field-list-bigger-icon-to-icon-padding;
+          width: 24px;
+        }
+        
+        @if ($skin-name == 'FluentUI') {
+          .e-sort-none {
+            padding: 0 0 $field-list-bigger-icon-to-icon-padding $field-list-tree-header-padding !important;
+          }
+        }
+      }
+
+      .e-field-list {
+        padding-left: 5px;
+
+        &:not(.e-olap-field-list-tree) {
+          ul {
+            padding-left: $field-list-treeview-bigger-ul-padding;
+
+            li.e-pivot-parent{
+              @if ($skin-name == 'bootstrap5') {
+                padding-left: 7px;
+              }
+
+              @if ($skin-name == 'FluentUI') {
+                padding-left: 8px;
+              }
+            }
+
+            li:not(.e-pivot-parent):not(.e-pivot-child) {
+              .e-text-content {
+                padding-left: $field-list-treeview-bigger-li-padding;
+              }
+            }
+          }
+        }
+
+        ul {
+          li {
+            padding: 0;
+          }
+        }
+
+        .e-drag {
+          font-size: $field-list-bigger-icon-size !important;
+          height: 24px !important;
+          margin-bottom: $field-list-treeview-drag-bigger-padding !important;
+          margin-right: 4px !important;
+          width: 24px !important;
+        }
+
+        .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-field-list-tree {
+          ul {
+            .e-list-icon {
+              font-size: $field-list-bigger-icon-size;
+            }
+          }
+        }
+      }
+      /* stylelint-enable */
+
+      .e-left-axis-fields .e-field-list-rows,
+      .e-right-axis-fields .e-field-list-values {
+        margin-top: $field-list-default-bigger-padding-size;
+      }
+    }
+
+    .e-axis-table {
+      .e-left-axis-fields .e-field-list-filters,
+      .e-left-axis-fields .e-field-list-rows,
+      .e-right-axis-fields .e-field-list-columns,
+      .e-right-axis-fields .e-field-list-values {
+        .e-axis-container {
+          height: $field-list-bigger-header-height;
+          padding: 0 $field-list-bigger-header-padding 5px;
+
+          .e-axis-icon-container {
+            height: 24px;
+            padding-top: $field-list-bigger-header-icon-wrapper-padding;
+            width: 24px;
+
+            .e-axis-rows,
+            .e-axis-columns,
+            .e-axis-values,
+            .e-axis-filters {
+              font-size: $field-list-bigger-header-icon-size;
+            }
+          }
+
+          .e-axis-header {
+            font-size: $field-list-bigger-header-font-size;
+            line-height: $field-list-bigger-header-content-line-height;
+            margin-top: 4px;
+            padding: 0 12px;
+
+            @if ($field-list-skin == 'bootstrap4') {
+              margin-top: 7px;
+            }
+          }
+        }
+
+        .e-axis-content {
+          @if ($field-list-skin == 'bootstrap4') {
+            height: 126px;
+          }
+
+          /* stylelint-disable */
+          .e-pvt-btn-div {
+            .e-pivot-button {
+              font-size: $field-list-bigger-button-font-size;
+              height: $field-list-bigger-button-height !important;
+              padding: $field-list-bigger-button-padding !important;
+
+              /* stylelint-enable */
+              .e-content {
+                font-size: $field-list-bigger-button-font-size;
+                line-height: $field-list-bigger-button-line-height;
+                padding: 0 10px;
+              }
+
+              .e-draggable {
+                height: 24px;
+                width: 24px;
+              }
+
+              .e-sort,
+              .e-pv-filter,
+              .e-pv-filtered,
+              .e-dropdown-icon,
+              .e-edit {
+                cursor: pointer;
+                display: inline-block;
+                font-size: $field-list-bigger-icon-size;
+                height: 24px;
+                width: 24px;
+              }
+
+              .e-sort {
+                height: $field-list-bigger-icon-size;
+              }
+
+              .e-drag {
+                font-size: $field-list-bigger-icon-size;
+                width: 24px;
+              }
+            }
+          }
+        }
+
+        .e-draggable-prompt {
+          @if ($field-list-skin == 'bootstrap4') {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+
+    .e-calculated-field {
+      font-size: $field-list-bigger-button-font-size;
+    }
+
+    &.e-static {
+      max-height: 735px;
+
+      .e-field-list-container {
+        .e-center-title {
+          color: $field-list-default-header-font-color;
+          font-size: $field-list-bigger-header-font-size;
+        }
+
+        .e-axis-table {
+          .e-right-axis-fields {
+            padding-left: $field-list-default-bigger-padding-size;
+          }
+
+          .e-left-axis-fields .e-field-list-rows,
+          .e-right-axis-fields .e-field-list-values {
+            margin-top: $field-list-default-bigger-padding-size;
+          }
+
+          .e-left-axis-fields .e-field-list-filters,
+          .e-left-axis-fields .e-field-list-rows,
+          .e-right-axis-fields .e-field-list-columns,
+          .e-right-axis-fields .e-field-list-values {
+            .e-axis-container {
+              .e-axis-icon-container {
+                padding-top: $field-list-static-bigger-header-icon-wrapper-padding;
+              }
+            }
+          }
+        }
+      }
+
+      &.e-rtl {
+        .e-axis-table {
+          .e-left-axis-fields {
+            padding-left: $field-list-default-bigger-padding-size;
+          }
+
+          /* stylelint-disable */
+          .e-right-axis-fields {
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+
+    &.e-rtl {
+      .e-field-table {
+        .e-field-list {
+          padding-left: 0;
+          padding-right: 5px;
+
+          &:not(.e-olap-field-list-tree) {
+            ul {
+              padding-right: $field-list-treeview-bigger-ul-padding;
+
+              li.e-pivot-parent{
+                @if ($skin-name == 'bootstrap5') {
+                  padding-right: 7px;
+                }
+
+                @if ($skin-name == 'FluentUI') {
+                  padding-right: 8px;
+                }
+              }
+
+              li:not(.e-pivot-parent):not(.e-pivot-child) {
+                .e-text-content {
+                  padding-right: $field-list-treeview-bigger-li-padding;
+                }
+              }
+            }
+          }
+
+          .e-drag {
+            margin-left: 4px !important;
+            margin-right: 0 !important;
+          }
+
+          .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;
+          }
+
+          /* stylelint-enable */
+        }
+
+        .e-field-header {
+          padding-right: $field-list-bigger-header-padding;
+        }
+
+        .e-field-header-container {
+          padding-left: $field-list-bigger-header-padding;
+
+          .e-sort-none,
+          .e-sort-ascend,
+          .e-sort-descend {
+            padding: $field-list-tree-header-padding $field-list-bigger-icon-to-icon-padding 0 0;
+          }
+
+          /* stylelint-disable */
+          @if ($skin-name == 'FluentUI') {
+            .e-sort-none {
+              padding: $field-list-bigger-icon-to-icon-padding 0 0 $field-list-tree-header-padding !important;
+            }
+          }
+          /* stylelint-enable */
+        }
+      }
+
+      .e-axis-table {
+
+        .e-left-axis-fields,
+        .e-right-axis-fields {
+          padding-left: 0;
+          padding-right: $field-list-default-padding-size;
+        }
+
+        .e-left-axis-fields .e-field-list-filters,
+        .e-left-axis-fields .e-field-list-rows,
+        .e-right-axis-fields .e-field-list-columns,
+        .e-right-axis-fields .e-field-list-values {
+          .e-pivot-button {
+
+            .e-sort,
+            .e-pv-filter,
+            .e-pv-filtered,
+            .e-remove,
+            .e-dropdown-icon,
+            .e-edit {
+              padding-left: 0;
+              padding-right: $field-list-bigger-icon-to-icon-padding;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-search-mode {
+      &.e-static {
+        max-height: 750px;
+
+        .e-field-list-container {
+          max-height: 800px;
+
+          .e-field-table {
+            height: 270px;
+          }
+        }
+      }
+
+      /* stylelint-disable */
+      &.e-popup {
+        max-height: 600px !important;
+        min-height: $field-list-search-popup-container-bigger-height !important;
+
+        .e-field-list-container {
+          height: 387px;
+
+          .e-field-table {
+            height: $field-list-search-popup-table-bigger-height !important;
+          }
+
+          .e-axis-table {
+            height: $field-list-search-popup-axis-table-bigger-height;
+
+            .e-axis-content {
+              height: $field-list-search-popup-axis-content-bigger-height !important;
+            }
+          }
+        }
+      }
+    }
+
+    .e-adaptive-field-list-dialog {
+      .e-dlg-content .e-field-list-tree-outer-div {
+        max-height: $field-list-adaptive-outerdiv-height;
+      }
+    }
+  }
+  /* stylelint-enable */
+}