diff --git a/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss index 4cdcf1725fa3..19a96d01478a 100644 --- a/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss +++ b/packages/devextreme/scss/widgets/base/filterBuilder/_index.scss @@ -93,8 +93,10 @@ $filterbuilder-menu-icon-color: null !default; .dx-treeview-item { .dx-icon { color: $filterbuilder-menu-icon-color; - - @include dx-icon-sizing(14px); } } + + .dx-treeview-expander-icon-stub { + display: none; + } } diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss index b207cb5f7f20..617356fa7f1e 100644 --- a/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss +++ b/packages/devextreme/scss/widgets/fluent/filterBuilder/_colors.scss @@ -65,4 +65,4 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; -$filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default; +$filterbuilder-menu-icon-color: $base-text-color !default; diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss index 8ad791da97d5..07f5f8837a22 100644 --- a/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/filterBuilder/_index.scss @@ -72,10 +72,6 @@ } &.dx-filterbuilder-operations { - .dx-treeview-item { - padding-left: $fluent-filterbuilder-treeview-item-left-padding; - } - .dx-rtl { .dx-treeview-item { padding-right: $fluent-filterbuilder-treeview-item-left-padding; @@ -84,14 +80,6 @@ } .dx-treeview-node { - > .dx-treeview-item { - padding-left: $fluent-filterbuilder-treeview-item-left-padding * 2; - } - - &.dx-treeview-node-is-leaf > .dx-treeview-item { - padding-left: $fluent-filterbuilder-treeview-item-left-padding; - } - .dx-treeview-node-container-opened { margin-left: $fluent-filterbuilder-treeview-item-left-padding; } @@ -107,7 +95,6 @@ } .dx-treeview-toggle-item-visibility { - height: $fluent-filterbuilder-treeview-item-min-heigth; left: $fluent-filterbuilder-treeview-toggle-left; } diff --git a/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss b/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss index 2db186abe3e1..f195b1f2b64e 100644 --- a/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/filterBuilder/_sizes.scss @@ -12,17 +12,18 @@ $fluent-filterbuilder-treeview-item-min-heigth: null !default; @if $size == "default" { $fluent-filterbuilder-icon-padding: 8px !default; $fluent-filterbuilder-filled-editor-padding: 13px 12px !default; - $fluent-filterbuilder-treeview-item-left-padding: 24px !default; - $fluent-filterbuilder-treeview-item-padding: 8px $fluent-filterbuilder-treeview-item-left-padding 10px !default; + + $fluent-filterbuilder-treeview-item-left-padding: 12px !default; + $fluent-filterbuilder-treeview-item-padding: 6px 12px 6px $fluent-filterbuilder-treeview-item-left-padding !default; $fluent-filterbuilder-treeview-toggle-left: 16px !default; - $fluent-filterbuilder-treeview-item-min-heigth: 36px !default; + $fluent-filterbuilder-treeview-item-min-heigth: 32px !default; } @else if $size == "compact" { $fluent-filterbuilder-icon-padding: 4px !default; $fluent-filterbuilder-filled-editor-padding: 8px 8px !default; - $fluent-filterbuilder-treeview-item-left-padding: 8px !default; - $fluent-filterbuilder-treeview-item-padding: 4px $fluent-filterbuilder-treeview-item-left-padding 5px !default; + $fluent-filterbuilder-treeview-item-left-padding: 4px !default; + $fluent-filterbuilder-treeview-item-padding: 4px 12px 4px $fluent-filterbuilder-treeview-item-left-padding !default; $fluent-filterbuilder-treeview-toggle-left: 0 !default; - $fluent-filterbuilder-treeview-item-min-heigth: 26px !default; + $fluent-filterbuilder-treeview-item-min-heigth: 24px !default; } diff --git a/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss index ea2cfd71d5b7..22d02bdb1bc2 100644 --- a/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss +++ b/packages/devextreme/scss/widgets/generic/filterBuilder/_colors.scss @@ -93,7 +93,7 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "contrast" { @@ -117,7 +117,7 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-focus-color: $filterbuilder-item-value-color !default; $filterbuilder-text-color: $base-text-color !default; $filterbuilder-text-focus-color: $base-text-color !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "dark" { @@ -141,13 +141,13 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default; $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default; - $filterbuilder-menu-icon-color: darken($base-icon-color, 33.7%) !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "darkmoon" { $filterbuilder-text-color: #000 !default; $filterbuilder-text-focus-color: $filterbuilder-text-color !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; $filterbuilder-plus-icon-color: color.change($base-success, $alpha: 0.8) !default; $filterbuilder-plus-icon-hover-color: color.adjust($filterbuilder-plus-icon-color, $alpha: -0.1) !default; $filterbuilder-plus-icon-focus-color: color.adjust($filterbuilder-plus-icon-color, $alpha: 0.2) !default; @@ -189,7 +189,7 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: rgba(204, 204, 204, 0.8) !default; $filterbuilder-item-value-hover-color: color.adjust($filterbuilder-item-value-color, $alpha: -0.1) !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.2) !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "greenmist" { @@ -213,7 +213,7 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "light" { @@ -237,7 +237,7 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } @if $color == "softblue" { @@ -261,6 +261,6 @@ $filterbuilder-menu-icon-color: null !default; $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; - $filterbuilder-menu-icon-color: $base-icon-color !default; + $filterbuilder-menu-icon-color: $base-text-color !default; } diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss index b207cb5f7f20..617356fa7f1e 100644 --- a/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss +++ b/packages/devextreme/scss/widgets/material/filterBuilder/_colors.scss @@ -65,4 +65,4 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default; $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default; $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default; -$filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default; +$filterbuilder-menu-icon-color: $base-text-color !default; diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss index 2a80db258af9..56402f0c04e2 100644 --- a/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss +++ b/packages/devextreme/scss/widgets/material/filterBuilder/_index.scss @@ -83,14 +83,6 @@ } .dx-treeview-node { - > .dx-treeview-item { - padding-left: $material-filterbuilder-treeview-item-left-padding * 2; - } - - &.dx-treeview-node-is-leaf > .dx-treeview-item { - padding-left: $material-filterbuilder-treeview-item-left-padding; - } - .dx-treeview-node-container-opened { margin-left: $material-filterbuilder-treeview-item-left-padding; } @@ -106,7 +98,6 @@ } .dx-treeview-toggle-item-visibility { - height: $material-filterbuilder-treeview-item-min-heigth; left: $material-filterbuilder-treeview-toggle-left; } diff --git a/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss b/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss index 94f008c32f8b..8a81b7631909 100644 --- a/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/filterBuilder/_sizes.scss @@ -12,8 +12,8 @@ $material-filterbuilder-treeview-item-min-heigth: null !default; @if $size == "default" { $material-filterbuilder-icon-padding: 8px !default; $material-filterbuilder-filled-editor-padding: 13px 12px !default; - $material-filterbuilder-treeview-item-left-padding: 24px !default; - $material-filterbuilder-treeview-item-padding: 8px $material-filterbuilder-treeview-item-left-padding 10px !default; + $material-filterbuilder-treeview-item-left-padding: 8px !default; + $material-filterbuilder-treeview-item-padding: 8px 24px 8px $material-filterbuilder-treeview-item-left-padding !default; $material-filterbuilder-treeview-toggle-left: 16px !default; $material-filterbuilder-treeview-item-min-heigth: 36px !default; } @@ -21,8 +21,8 @@ $material-filterbuilder-treeview-item-min-heigth: null !default; @else if $size == "compact" { $material-filterbuilder-icon-padding: 4px !default; $material-filterbuilder-filled-editor-padding: 8px 8px !default; - $material-filterbuilder-treeview-item-left-padding: 8px !default; - $material-filterbuilder-treeview-item-padding: 4px $material-filterbuilder-treeview-item-left-padding 5px !default; + $material-filterbuilder-treeview-item-left-padding: 4px !default; + $material-filterbuilder-treeview-item-padding: 4px 12px 4px $material-filterbuilder-treeview-item-left-padding !default; $material-filterbuilder-treeview-toggle-left: 0 !default; $material-filterbuilder-treeview-item-min-heigth: 26px !default; }