diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss index d039a6435d29..35f6749d4595 100644 --- a/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/tooltip/_index.scss @@ -12,6 +12,7 @@ .dx-overlay-content { background-color: $tooltip-bg; color: $tooltip-color; + border: 1px solid transparent; border-radius: $tooltip-border-radius; min-height: auto; diff --git a/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss index 0c269004cdc1..571890f9a895 100644 --- a/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/tooltip/_sizes.scss @@ -9,11 +9,11 @@ $fluent-tooltip-arrow-border-radius: 2px !default; $fluent-tooltip-shadow: 0 0 2px 0 $base-dropdown-shadow-color1 !default; @if $size == "default" { - $fluent-tooltip-padding: 8px 12px !default; + $fluent-tooltip-padding: 7px 11px !default; $fluent-tooltip-font-size: 12px; } @else if $size == "compact" { - $fluent-tooltip-padding: 4px 6px !default; + $fluent-tooltip-padding: 3px 5px !default; $fluent-tooltip-font-size: 12px; } diff --git a/packages/devextreme/scss/widgets/material/slider/_index.scss b/packages/devextreme/scss/widgets/material/slider/_index.scss index b9e1fbc9aa36..b6b3f5d0e485 100644 --- a/packages/devextreme/scss/widgets/material/slider/_index.scss +++ b/packages/devextreme/scss/widgets/material/slider/_index.scss @@ -75,11 +75,12 @@ $material-slider-tooltip-width-without-paddings: $material-slider-tooltip-width } .dx-overlay-content { - border: none; + border: 1px solid transparent; opacity: 0.6; .dx-popup-content { line-height: normal; + padding: $material-slider-tooltip-popup-content-padding; .dx-slider-tooltip-position-top & { padding-top: 6px; diff --git a/packages/devextreme/scss/widgets/material/slider/_sizes.scss b/packages/devextreme/scss/widgets/material/slider/_sizes.scss index 04f23e241149..c78ff5436765 100644 --- a/packages/devextreme/scss/widgets/material/slider/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/slider/_sizes.scss @@ -6,6 +6,7 @@ $material-slider-handle-size: null !default; $material-slider-wrapper-height: null !default; $material-slider-tooltip-width: null !default; $material-slider-top-tooltip-margin: null !default; +$material-slider-tooltip-popup-content-padding: null !default; $material-slider-track-height: 2px !default; $material-slider-height: 28px !default; @@ -15,6 +16,7 @@ $material-slider-height: 28px !default; $material-slider-wrapper-height: 32px !default; $material-slider-tooltip-width: 34px !default; $material-slider-top-tooltip-margin: -5px !default; + $material-slider-tooltip-popup-content-padding: 5px 7px !default; } @else if $size == "compact" { @@ -22,4 +24,5 @@ $material-slider-height: 28px !default; $material-slider-wrapper-height: 26px !default; $material-slider-tooltip-width: 28px !default; $material-slider-top-tooltip-margin: -2px !default; + $material-slider-tooltip-popup-content-padding: 3px 5px !default; } diff --git a/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png index a96ffd26f89e..8cac41c796d0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (fluent-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png index ae8173054680..c3435efd8c12 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/slider/etalons/slider-appearance (material-blue-light).png differ