@syncfusion/ej2-angular-pivotview 20.4.54 → 21.1.35-ngcc

package/styles/pivotfieldlist/_theme.scss

@@ -1,1938 +0,0 @@
-@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;
-
-    .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%;
-      }
-
-    }
-
-    .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') {
-                    border-top: 2px solid $field-list-drop-hover-color;
-                  }
-
-                  @if ($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;
-        height: 48px;
-        padding-bottom: 9px;
-        padding-top: 9px;
-        @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;
-      }
-
-      .e-title-mobile-content {
-        margin-top: $field-list-back-margin;
-      }
-
-      .e-field-list-back-icon {
-        color: $field-list-back-font-color;
-        font-size: 16px;
-        height: 24px;
-        margin-left: 0;
-        margin-right: 12px;
-        padding-top: 7px;
-        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-icon {
-                display: table;
-                font-size: 12px;
-                height: 36px;
-                min-height: 36px;
-                min-width: 28px;
-                padding: 0;
-                position: absolute;
-                right: 16px;
-                top: 0;
-
-                .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;
-
-                  @if ($skin-name == 'bootstrap5') {
-                    color: $field-list-default-fill-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 */
-}