@syncfusion/ej2-pivotview 20.1.61 → 20.2.36

package/styles/pivotfieldlist/_fusionnew-definition.scss

@@ -0,0 +1,189 @@
+/*! component's theme wise override definitions and variables */
+// layout variables
+$field-list-skin: 'bootstrap5' !default;
+$field-list-border-type: solid !default;
+$field-list-border-size: 1px !default;
+$field-list-default-padding-size: 8px !default;
+$field-list-title-padding-size: 18px !default;
+$field-list-title-font-size: 16px !default;
+$field-list-title-line-height: 1.5em !default;
+$field-list-content-font-size: 14px !default;
+$field-list-button-font-weight: normal !default;
+$field-list-font-family:  $font-family !default;
+$field-list-default-border-radius: 4px !default;
+$field-list-drag-clone-border-radius: 0 !default;
+$field-list-drag-clone-font-size: 16px !default;
+$field-list-drag-clone-line-height: 1.15em !default;
+$field-list-drag-clone-height: 32px !default;
+$field-list-button-font-size: 14px !default;
+$field-list-toggle-icon-bigger-size: 20px !default;
+$field-list-toggle-padding-size: 8px !default;
+$field-list-editor-dialog-footer-padding: 10px !default;
+$field-list-toggle-size: 31px !default;
+$field-list-toggle-bigger-size: 36px !default;
+$field-list-member-filter-list-bigger-height: 129px !default;
+$pivot-calculated-formula-font-family:  $font-family !default;
+$pivot-calculated-formula-font-padding: 5px 8px !default;
+$pivot-calculated-header-opacity: .87 !default;
+$pivot-calculated-font-weight: normal !default;
+$pivot-dialog-content-opacity: .54 !default;
+$pivot-dialog-content-padding: 18px !default;
+$pivot-dialog-footer-padding: 8px !default;
+$pivot-dialog-footer-paddingright: 8px !default;
+$field-list-header-height: 28px !default;
+$field-list-bigger-header-height: 30px !default;
+$field-list-icon-container-size: 20px !default;
+$field-list-bigger-icon-container-size: 20px !default;
+$field-list-bigger-icon-size: 20px !default;
+$field-list-icon-to-text-padding: 8px !default;
+$field-list-bigger-icon-to-text-padding: 10px !default;
+$field-list-icon-to-icon-padding: 4px !default;
+$field-list-bigger-icon-to-icon-padding: 4px !default;
+$field-list-default-bigger-padding-size: 12px !default;
+$field-list-bigger-button-font-size: 14px !default;
+$pivot-calculated-header-padding: 4px !default;
+$pivot-calculated-bigger-header-padding: 6px !default;
+$field-list-header-content-line-height: 1.125em !default;
+$field-list-bigger-header-content-line-height: 1.6em !default;
+$field-list-header-icon-wrapper-padding: 2px !default;
+$field-list-bigger-header-icon-wrapper-padding: 7px !default;
+$field-list-static-header-icon-wrapper-padding: $field-list-header-icon-wrapper-padding !default;
+$field-list-static-bigger-header-icon-wrapper-padding: $field-list-bigger-header-icon-wrapper-padding !default;
+$pivot-calculated-icon-opacity: .87 !default;
+$field-list-bigger-button-line-height: 1.1em !default;
+$field-list-excel-member-filter-height: 164px !default;
+$field-list-excel-filter-height: 248px !default;
+$field-list-excel-member-filter-bigger-height: 117px !default;
+$field-list-excel-filter-bigger-height: 220px !default;
+$format-label-font-opacity: .87 !default;
+$format-label-font-weight: 500 !default;
+$format-preview-bigger-height: 30px !default;
+$format-outer-border-radius: 4px !default;
+$format-dialog-width: 628px !default;
+$format-dialog-bigger-width: 680px !default;
+$field-list-editor-label-padding-size: 14px 10px 16px 20px !default;
+$field-list-editor-label-font: 500 13px Inter !default;
+$field-list-editor-label-opacity: .87 !default;
+$field-list-editor-label-excel-width: 280px !default;
+$field-list-editor-label-excel-padding-size: 14px 10px 9px 20px !default;
+$field-list-editor-label-excel-opacity: 56%;
+$field-list-back-margin: 5px !default;
+$field-list-sort-wrapper-padding-size: 10px !default;
+$field-list-border: $content-bg-color-alt3 !default;
+$field-list-calc-expand-icon-padding: 8px !default;
+$field-list-search-padding-size: 10px $field-list-header-padding-size !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 575px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
+
+// normal variables
+$field-list-active-color: $icon-color !default;
+$field-list-default-font-color: $content-text-color !default;
+$field-list-default-formula-font-color: $field-list-default-font-color !default;
+$field-list-default-border-color: $content-bg-color-alt3 !default;
+$field-list-drag-default-border-color: $field-list-default-border-color !default;
+$field-list-default-prompt-color: $content-text-color-alt2 !default;
+$field-list-toggle-border-color: $field-list-default-border-color !default;
+$field-list-table-background-color: $content-bg-color !default;
+$field-list-default-bg-color: $content-bg-color !default;
+$field-list-header-background-color: $content-bg-color-alt1 !default;
+$field-list-axis-header-color: $field-list-header-background-color !default;
+$field-list-toggle-bg-color: $content-bg-color-alt2 !default;
+$field-list-default-fill-color: $content-bg-color !default;
+$field-list-drop-hover-color: $primary !default;
+$field-list-button-font-color: $content-text-color !default;
+$field-list-button-border-color: rgba($content-text-color, .12) !default;
+$field-list-button-hover-color: $table-bg-color-hover !default;
+$field-list-button-focus-color: $table-bg-color-selected !default;
+$field-list-button-active-color: $content-text-color-alt1 !default;
+$field-list-drag-clone-text-color: $content-text-color-alt1 !default;
+$field-list-drag-clone-bg-color: $content-bg-color-alt3 !default;
+$field-list-toggle-hover-color: $field-list-default-border-color !default;
+$pivot-formula-background: $content-bg-color !default;
+$pivot-formula-border: $border-light !default;
+$pivot-text-area-background: $content-text-color !default;
+$field-list-drag-icon-color: $icon-color-disabled !default;
+$field-list-default-header-font-color: $content-text-color-alt2 !default;
+$field-list-tree-icon-color: $icon-color !default;
+$field-list-default-header-icon-font-color: $field-list-default-header-font-color !default;
+$field-list-button-icon-color: $icon-color !default;
+$field-list-icon-hover-color: $icon-color !default;
+$field-list-toggle-font-color: $icon-color !default;
+$error-font-color: $danger !default;
+$format-label-font-color: $content-text-color !default;
+$format-preview-border-color: $border-light !default;
+$format-outer-border-color: $border-light !default;
+$format-outer-fill-color: $content-bg-color !default;
+$field-list-editor-label-color: $content-text-color !default;
+$field-list-editor-label-fill: $content-text-color-alt1 !default;
+$field-list-back-font-color: $icon-color !default;
+$field-list-mobile-header-color: $content-bg-color-alt2 !default;
+$field-list-mobile-header-font-color: $content-text-color-alt2 !default;
+$field-list-sort-select-background-color: $icon-color !default;
+$field-list-sort-select-border-color: transparent !default;
+$field-list-sort-select-color: rgba($content-text-color-alt2, .87) !default;
+$field-list-cal-button-text-color: $secondary-text-color !default;
+
+/*! component's common definitions and variables */
+$field-list-static-padding-size: 10px !default;
+$field-list-treeview-padding-size: -30px !default;
+$field-list-header-padding-size: 18px !default;
+$field-list-axis-header-padding-size: 5px !default;
+$field-list-selected-color: rgba($content-bg-color-hover, .87) !default;
+$field-list-button-color: $content-bg-color !default;
+$field-list-button-back-color: $icon-color !default;
+$field-list-header-font-size: 14px !default;
+$field-list-header-text-transform: none !default;
+$field-list-icon-size: 14px !default;
+$field-list-toggle-icon-size: 17px !default;
+$field-list-editor-search-padding-size: 12px !default;
+$field-list-member-filter-list-padding-size: -22px !default;
+$field-list-member-filter-list-height: 162px !default;
+$field-list-member-field-list-height: 200px !default;
+$field-list-treeview-drag-padding: 6px !default;
+$field-list-treeview-drag-margin: 4px !default;
+$field-list-treeview-drag-bigger-padding: 3px !default;
+$field-list-button-height: 32px !default;
+$field-list-bigger-button-height: 36px !default;
+$field-list-axis-content-height: 133px !default;
+$field-list-header-padding: 18px !default;
+$field-list-bigger-header-padding: 20px !default;
+$field-list-bigger-header-font-size: 14px !default;
+$field-list-button-padding: 9px 12px !default;
+$field-list-bigger-button-padding: 9px 16px !default;
+$field-list-header-icon-size: 14px !default;
+$field-list-bigger-header-icon-size: 16px !default;
+$field-list-tree-header-padding: 6px !default;
+$field-list-bigger-tree-header-padding: 8px !default;
+$field-list-bigger-excel-dialog-min-width: 350px !default;
+$field-list-adaptive-content-padding-size: 20px !default;
+$field-list-adaptive-footer-padding-size: 15px !default;
+$field-list-adaptive-btn-icon-size: 18px !default;
+$field-list-adaptive-btn-size: 52px !default;
+$field-list-adaptive-icon-height: 50px !default;
+$field-list-adaptive-drag-prompt-height: 22px !default;
+$field-list-adaptive-pivot-button-height: 36px !default;
+$field-list-adaptive-pivot-button-padding: 9px 16px !default;
+$pivot-dialog-font-weight: normal !default;
+$field-list-toggle-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-toggle-left-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-drag-clone-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-treeview-font-weight: 500 !default;
+$field-list-calc-formula-font-size: 13px !default;
+$field-list-calc-bigger-formula-font-size: 13px !default;
+$format-label-font-size: 13px !default;
+$format-label-bigger-font-size: 14px !default;
+$format-preview-height: 28px !default;
+$format-preview-width: 80px !default;
+$olap-tree-wrapper-height: 489px;
+$olap-tree-outer-div-height: 454px;
+$olap-bigger-tree-wrapper-height: 521px;
+$olap-bigger-tree-outer-div-height: 483px;
+$field-list-text-transform: none !default;
+$olap-bigger-tree-width: 283px !default;
+$olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 190px !default;

package/styles/pivotfieldlist/_highcontrast-definition.scss

@@ -105,6 +105,15 @@ $field-list-sort-select-color: $selection-font !default;
 $field-list-border: $field-list-default-border-color !default;
 $field-list-cal-button-text-color: $field-list-default-font-color !default;
 $field-list-calc-expand-icon-padding: 8px !default;
+$field-list-search-padding-size: 10px $field-list-title-padding-size !default;
+$field-list-member-prompt-padding-size: 25px 12px !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 575px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
 
 /*! component's common definitions and variables */
 $field-list-static-padding-size: 10px !default;
@@ -175,3 +184,4 @@ $olap-bigger-tree-outer-div-height: 491px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;;
 $olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 164px !default;

package/styles/pivotfieldlist/_highcontrast-light-definition.scss

@@ -105,6 +105,15 @@ $field-list-sort-select-color: $selection-font !default;
 $field-list-border: $field-list-default-border-color !default;
 $field-list-cal-button-text-color: $field-list-default-font-color !default;
 $field-list-calc-expand-icon-padding: 8px !default;
+$field-list-search-padding-size: 10px $field-list-title-padding-size !default;
+$field-list-member-prompt-padding-size: 25px 12px !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 572px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
 
 /*! component's common definitions and variables */
 $field-list-static-padding-size: 10px !default;
@@ -175,3 +184,4 @@ $olap-bigger-tree-outer-div-height: 491px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;;
 $olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 164px !default;

package/styles/pivotfieldlist/_layout.scss

@@ -15,7 +15,6 @@
   .e-pivot-formatting-dialog {
     // sass-lint:disable-all
     max-height: 480px !important;
-    min-width: $format-dialog-width !important;
     width: $format-dialog-width !important;
     // sass-lint:enable-all
     .e-format-table tr:nth-child(odd) {
@@ -45,6 +44,7 @@
       td {
         padding-bottom: 14px;
         padding-right: 18px;
+        white-space: nowrap;
 
         @if ($skin-name == 'bootstrap5') {
           padding-right: 8px;
@@ -71,6 +71,7 @@
     .e-format-inner-div {
       padding-left: 14px;
       padding-top: 14px;
+      width: 579px;
     }
 
     .e-format-outer-div {
@@ -198,6 +199,9 @@
       // sass-lint:disable-all
       min-width: 320px !important;
       width: 100%  !important;
+      .e-format-inner-div {
+        width: 100% !important;
+      }
       // sass-lint:enable-all
 
       .e-format-value1,
@@ -267,7 +271,6 @@
   .e-bigger.e-pivot-formatting-dialog,
   .e-bigger .e-pivot-formatting-dialog {
     // sass-lint:disable-all
-    min-width: $format-dialog-bigger-width !important;
     width: $format-dialog-bigger-width !important;
     // sass-lint:enable-all
 
@@ -285,6 +288,7 @@
     .e-format-inner-div {
       padding-left: 16px;
       padding-top: 16px;
+      width: 656px;
     }
 
     .e-format-outer-div {
@@ -847,9 +851,9 @@
   .e-bigger.e-pivot-calc-dialog-div,
   .e-bigger .e-pivot-calc-dialog-div {
     //sass-lint:disable-all
-    max-height: 580px !important;
+    max-height: 600px !important;
+    min-width: 401px !important;
     // sass-lint:enable-all
-    min-width: 310px;
 
     .e-pivot-all-field-title,
     .e-pivot-field-name-title,
@@ -861,9 +865,6 @@
       padding: $pivot-calculated-bigger-header-padding 0;
       padding-bottom: 0;
 
-
-
-
       @if ($skin-name == 'FluentUI') {
         font-weight: 600;
         margin-top: 16px;
@@ -911,8 +912,8 @@
 
     // sass-lint:disable-all
     &.e-olap-calc-dialog-div {
-      max-height: 700px !important;
-      min-width: 580px;
+      max-height: 750px !important;
+      min-width: 580px !important;
 
       .e-pivot-calc-outer-div {
         .e-olap-field-tree-div {
@@ -1013,8 +1014,10 @@
       }
 
       .e-member-editor-container ul {
+        // sass-lint:disable-all
         margin-left: $field-list-member-filter-list-padding-size;
-        overflow: hidden;
+        overflow: auto !important;
+        // sass-lint:enable-all
 
         li {
           .e-list-text {
@@ -1070,6 +1073,10 @@
     }
 
     .e-member-editor-dialog {
+      .e-toolbar .e-toolbar-items {
+        margin-left: $field-list-filter-toolbar-items-margin;
+      }
+
       .e-clear-filter-button {
         float: left;
         margin: 0;
@@ -1261,6 +1268,11 @@
       }
 
       &.e-rtl {
+        .e-toolbar .e-toolbar-items {
+          margin-left: 0;
+          margin-right: $field-list-filter-toolbar-items-margin;
+        }
+
         .e-member-editor-outer-container {
           .e-editor-search-container {
             .e-filter-sort {
@@ -1314,6 +1326,10 @@
     }
 
     .e-adaptive-field-list-dialog {
+      ul {
+        min-height: 170px;
+        overflow: auto;
+      }
       .e-member-editor-container ul {
         li {
           // sass-lint:disable-all
@@ -1448,13 +1464,13 @@
 
       .e-dlg-content {
         overflow: hidden;
-        padding: 0;
+        padding: 0 !important;
         @if ($skin-name == 'FluentUI') {
           padding-top: 1px;
         }
 
         @if ($skin-name == 'tailwind') {
-          padding-top: 12px;
+          padding: 12px 0 0 0 !important;
         }
 
         // sass-lint:disable-all
@@ -1792,7 +1808,7 @@
       }
 
       &.e-excel-filter {
-        min-width: $field-list-bigger-excel-dialog-min-width;
+        min-width: $field-list-bigger-excel-dialog-min-width !important;
       }
     }
 
@@ -1838,4 +1854,4 @@
       }
     }
   }
-}
+}

package/styles/pivotfieldlist/_material-dark-definition.scss

@@ -116,6 +116,15 @@ $field-list-sort-select-color: $grey-dark-font !default;
 $field-list-border: $field-list-default-border-color !default;
 $field-list-cal-button-text-color: $field-list-default-font-color !default;
 $field-list-calc-expand-icon-padding: 6px !default;
+$field-list-search-padding-size: 6px $field-list-title-padding-size !default;
+$field-list-member-prompt-padding-size: 25px 12px !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 550px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
 
 /*! component's common definitions and variables */
 $field-list-static-padding-size: 10px !default;
@@ -175,3 +184,4 @@ $olap-bigger-tree-outer-div-height: 518px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;;
 $olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 190px !default;

package/styles/pivotfieldlist/_material-definition.scss

@@ -116,6 +116,15 @@ $field-list-sort-select-color: rgba($grey-black, .87) !default;
 $field-list-border: $field-list-default-border-color !default;
 $field-list-cal-button-text-color: $field-list-default-font-color !default;
 $field-list-calc-expand-icon-padding: 6px !default;
+$field-list-search-padding-size: 9px $field-list-title-padding-size !default;
+$field-list-member-prompt-padding-size: 25px 12px !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 550px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
 
 /*! component's common definitions and variables */
 $field-list-static-padding-size: 10px !default;
@@ -175,3 +184,4 @@ $olap-bigger-tree-outer-div-height: 485px;
 $field-list-text-transform: none !default;
 $olap-bigger-tree-width: 283px !default;;
 $olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 195px !default;

package/styles/pivotfieldlist/_material3-definition.scss

@@ -0,0 +1,189 @@
+/*! component's theme wise override definitions and variables */
+// layout variables
+$field-list-skin: 'bootstrap5' !default;
+$field-list-border-type: solid !default;
+$field-list-border-size: 1px !default;
+$field-list-default-padding-size: 8px !default;
+$field-list-title-padding-size: 18px !default;
+$field-list-title-font-size: 16px !default;
+$field-list-title-line-height: 1.5em !default;
+$field-list-content-font-size: 14px !default;
+$field-list-button-font-weight: normal !default;
+$field-list-font-family:  $font-family !default;
+$field-list-default-border-radius: 4px !default;
+$field-list-drag-clone-border-radius: 0 !default;
+$field-list-drag-clone-font-size: 16px !default;
+$field-list-drag-clone-line-height: 1.15em !default;
+$field-list-drag-clone-height: 32px !default;
+$field-list-button-font-size: 14px !default;
+$field-list-toggle-icon-bigger-size: 20px !default;
+$field-list-toggle-padding-size: 8px !default;
+$field-list-editor-dialog-footer-padding: 10px !default;
+$field-list-toggle-size: 31px !default;
+$field-list-toggle-bigger-size: 36px !default;
+$field-list-member-filter-list-bigger-height: 129px !default;
+$pivot-calculated-formula-font-family:  $font-family !default;
+$pivot-calculated-formula-font-padding: 5px 8px !default;
+$pivot-calculated-header-opacity: .87 !default;
+$pivot-calculated-font-weight: normal !default;
+$pivot-dialog-content-opacity: .54 !default;
+$pivot-dialog-content-padding: 18px !default;
+$pivot-dialog-footer-padding: 8px !default;
+$pivot-dialog-footer-paddingright: 8px !default;
+$field-list-header-height: 28px !default;
+$field-list-bigger-header-height: 30px !default;
+$field-list-icon-container-size: 20px !default;
+$field-list-bigger-icon-container-size: 20px !default;
+$field-list-bigger-icon-size: 20px !default;
+$field-list-icon-to-text-padding: 8px !default;
+$field-list-bigger-icon-to-text-padding: 10px !default;
+$field-list-icon-to-icon-padding: 4px !default;
+$field-list-bigger-icon-to-icon-padding: 4px !default;
+$field-list-default-bigger-padding-size: 12px !default;
+$field-list-bigger-button-font-size: 14px !default;
+$pivot-calculated-header-padding: 4px !default;
+$pivot-calculated-bigger-header-padding: 6px !default;
+$field-list-header-content-line-height: 1.125em !default;
+$field-list-bigger-header-content-line-height: 1.6em !default;
+$field-list-header-icon-wrapper-padding: 2px !default;
+$field-list-bigger-header-icon-wrapper-padding: 7px !default;
+$field-list-static-header-icon-wrapper-padding: $field-list-header-icon-wrapper-padding !default;
+$field-list-static-bigger-header-icon-wrapper-padding: $field-list-bigger-header-icon-wrapper-padding !default;
+$pivot-calculated-icon-opacity: .87 !default;
+$field-list-bigger-button-line-height: 1.1em !default;
+$field-list-excel-member-filter-height: 164px !default;
+$field-list-excel-filter-height: 248px !default;
+$field-list-excel-member-filter-bigger-height: 117px !default;
+$field-list-excel-filter-bigger-height: 220px !default;
+$format-label-font-opacity: .87 !default;
+$format-label-font-weight: 500 !default;
+$format-preview-bigger-height: 30px !default;
+$format-outer-border-radius: 4px !default;
+$format-dialog-width: 628px !default;
+$format-dialog-bigger-width: 680px !default;
+$field-list-editor-label-padding-size: 14px 10px 16px 20px !default;
+$field-list-editor-label-font: 500 13px Inter !default;
+$field-list-editor-label-opacity: .87 !default;
+$field-list-editor-label-excel-width: 280px !default;
+$field-list-editor-label-excel-padding-size: 14px 10px 9px 20px !default;
+$field-list-editor-label-excel-opacity: 56%;
+$field-list-back-margin: 5px !default;
+$field-list-sort-wrapper-padding-size: 10px !default;
+$field-list-border: $content-bg-color-alt3 !default;
+$field-list-calc-expand-icon-padding: 8px !default;
+$field-list-search-padding-size: 10px $field-list-header-padding-size !default;
+$field-list-search-popup-table-height: 392px !default;
+$field-list-search-popup-axis-content-height: 162px !default;
+$field-list-search-popup-container-bigger-height: 565px !default;
+$field-list-search-popup-table-bigger-height: 400px !default;
+$field-list-search-popup-axis-table-bigger-height: 404px !default;
+$field-list-search-popup-axis-content-bigger-height: 165px !default;
+$field-list-filter-toolbar-items-margin: 20px !default;
+
+// normal variables
+$field-list-active-color: $icon-color !default;
+$field-list-default-font-color: $content-text-color !default;
+$field-list-default-formula-font-color: $field-list-default-font-color !default;
+$field-list-default-border-color: $content-bg-color-alt3 !default;
+$field-list-drag-default-border-color: $field-list-default-border-color !default;
+$field-list-default-prompt-color: $content-text-color-alt2 !default;
+$field-list-toggle-border-color: $field-list-default-border-color !default;
+$field-list-table-background-color: $content-bg-color !default;
+$field-list-default-bg-color: $content-bg-color !default;
+$field-list-header-background-color: $content-bg-color-alt1 !default;
+$field-list-axis-header-color: $field-list-header-background-color !default;
+$field-list-toggle-bg-color: $content-bg-color-alt2 !default;
+$field-list-default-fill-color: $content-bg-color !default;
+$field-list-drop-hover-color: $primary !default;
+$field-list-button-font-color: $content-text-color !default;
+$field-list-button-border-color: rgba($content-text-color, .12) !default;
+$field-list-button-hover-color: $table-bg-color-hover !default;
+$field-list-button-focus-color: $table-bg-color-selected !default;
+$field-list-button-active-color: $content-text-color-alt1 !default;
+$field-list-drag-clone-text-color: $content-text-color-alt1 !default;
+$field-list-drag-clone-bg-color: $content-bg-color-alt3 !default;
+$field-list-toggle-hover-color: $field-list-default-border-color !default;
+$pivot-formula-background: $content-bg-color !default;
+$pivot-formula-border: $border-light !default;
+$pivot-text-area-background: $content-text-color !default;
+$field-list-drag-icon-color: $icon-color-disabled !default;
+$field-list-default-header-font-color: $content-text-color-alt2 !default;
+$field-list-tree-icon-color: $icon-color !default;
+$field-list-default-header-icon-font-color: $field-list-default-header-font-color !default;
+$field-list-button-icon-color: $icon-color !default;
+$field-list-icon-hover-color: $icon-color !default;
+$field-list-toggle-font-color: $icon-color !default;
+$error-font-color: $danger !default;
+$format-label-font-color: $content-text-color !default;
+$format-preview-border-color: $border-light !default;
+$format-outer-border-color: $border-light !default;
+$format-outer-fill-color: $content-bg-color !default;
+$field-list-editor-label-color: $content-text-color !default;
+$field-list-editor-label-fill: $content-text-color-alt1 !default;
+$field-list-back-font-color: $icon-color !default;
+$field-list-mobile-header-color: $content-bg-color-alt2 !default;
+$field-list-mobile-header-font-color: $content-text-color-alt2 !default;
+$field-list-sort-select-background-color: $icon-color !default;
+$field-list-sort-select-border-color: transparent !default;
+$field-list-sort-select-color: rgba($content-text-color-alt2, .87) !default;
+$field-list-cal-button-text-color: $secondary-text-color !default;
+
+/*! component's common definitions and variables */
+$field-list-static-padding-size: 10px !default;
+$field-list-treeview-padding-size: -30px !default;
+$field-list-header-padding-size: 18px !default;
+$field-list-axis-header-padding-size: 5px !default;
+$field-list-selected-color: rgba($content-bg-color-hover, .87) !default;
+$field-list-button-color: $content-bg-color !default;
+$field-list-button-back-color: $icon-color !default;
+$field-list-header-font-size: 14px !default;
+$field-list-header-text-transform: none !default;
+$field-list-icon-size: 14px !default;
+$field-list-toggle-icon-size: 17px !default;
+$field-list-editor-search-padding-size: 12px !default;
+$field-list-member-filter-list-padding-size: -22px !default;
+$field-list-member-filter-list-height: 162px !default;
+$field-list-member-field-list-height: 200px !default;
+$field-list-treeview-drag-padding: 6px !default;
+$field-list-treeview-drag-margin: 4px !default;
+$field-list-treeview-drag-bigger-padding: 3px !default;
+$field-list-button-height: 32px !default;
+$field-list-bigger-button-height: 36px !default;
+$field-list-axis-content-height: 133px !default;
+$field-list-header-padding: 18px !default;
+$field-list-bigger-header-padding: 20px !default;
+$field-list-bigger-header-font-size: 14px !default;
+$field-list-button-padding: 9px 12px !default;
+$field-list-bigger-button-padding: 9px 16px !default;
+$field-list-header-icon-size: 14px !default;
+$field-list-bigger-header-icon-size: 16px !default;
+$field-list-tree-header-padding: 6px !default;
+$field-list-bigger-tree-header-padding: 8px !default;
+$field-list-bigger-excel-dialog-min-width: 350px !default;
+$field-list-adaptive-content-padding-size: 20px !default;
+$field-list-adaptive-footer-padding-size: 15px !default;
+$field-list-adaptive-btn-icon-size: 18px !default;
+$field-list-adaptive-btn-size: 52px !default;
+$field-list-adaptive-icon-height: 50px !default;
+$field-list-adaptive-drag-prompt-height: 22px !default;
+$field-list-adaptive-pivot-button-height: 36px !default;
+$field-list-adaptive-pivot-button-padding: 9px 16px !default;
+$pivot-dialog-font-weight: normal !default;
+$field-list-toggle-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-toggle-left-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-drag-clone-shadow-color: 0 1px 2px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .1) !default;
+$field-list-treeview-font-weight: 500 !default;
+$field-list-calc-formula-font-size: 13px !default;
+$field-list-calc-bigger-formula-font-size: 13px !default;
+$format-label-font-size: 13px !default;
+$format-label-bigger-font-size: 14px !default;
+$format-preview-height: 28px !default;
+$format-preview-width: 80px !default;
+$olap-tree-wrapper-height: 489px;
+$olap-tree-outer-div-height: 454px;
+$olap-bigger-tree-wrapper-height: 521px;
+$olap-bigger-tree-outer-div-height: 483px;
+$field-list-text-transform: none !default;
+$olap-bigger-tree-width: 283px !default;
+$olap-bigger-tree-outer-div-width: 325px !default;
+$field-list-adaptive-outerdiv-height: 190px !default;