diff --git a/packages/devextreme/scss/widgets/base/_validation.scss b/packages/devextreme/scss/widgets/base/_validation.scss index ba585c7de56c..7329d5c08a60 100644 --- a/packages/devextreme/scss/widgets/base/_validation.scss +++ b/packages/devextreme/scss/widgets/base/_validation.scss @@ -1,4 +1,5 @@ -@mixin dx-base-validation($summary-color, $message-color, $message-bg-color) { + +@mixin dx-base-validation($summary-color, $message-color, $message-bg-color, $border-radius) { .dx-validationsummary-item { color: $summary-color; } @@ -6,6 +7,40 @@ .dx-invalid-message > .dx-overlay-content { color: $message-color; background-color: $message-bg-color; + border-radius: $border-radius; + } +} + +@mixin dx-modern-styles-validation( + $validation-message-font-size, + $validation-message-line-height, + $filled-texteditor-input-horizontal-padding, + $validation-message-padding, + $validationsummary-item-margin, + $validation-message-vertical-padding, + $validation-message-horizontal-padding, +) { + .dx-invalid-message > .dx-overlay-content { + padding: $validation-message-vertical-padding $validation-message-horizontal-padding; + line-height: $validation-message-line-height; + font-size: $validation-message-font-size; + + .dx-invalid-message-top &, + .dx-invalid-message-bottom & { + .dx-editor-filled &, + .dx-editor-outlined { + padding-left: $filled-texteditor-input-horizontal-padding; + padding-right: $filled-texteditor-input-horizontal-padding; + } + } + } + + .dx-validationsummary > .dx-validationsummary-item:not(:last-child) { + margin-bottom: $validationsummary-item-margin; + } + + .dx-form-validation-summary { + margin-top: 20px; } } diff --git a/packages/devextreme/scss/widgets/fluent/validation/_index.scss b/packages/devextreme/scss/widgets/fluent/validation/_index.scss index 43e427627f53..94f9de6b40eb 100644 --- a/packages/devextreme/scss/widgets/fluent/validation/_index.scss +++ b/packages/devextreme/scss/widgets/fluent/validation/_index.scss @@ -8,42 +8,18 @@ // adduse @use "../overlay"; -@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color); - -.dx-invalid-message > .dx-overlay-content { - background-color: transparent; - color: $validation-message-background-color; - - .dx-invalid-message-top &, - .dx-invalid-message-bottom & { - .dx-editor-filled &, - .dx-editor-outlined { - padding-left: $fluent-filled-texteditor-input-horizontal-padding; - padding-right: $fluent-filled-texteditor-input-horizontal-padding; - } - } - - .dx-invalid-message-top & { - padding: 0 0 $fluent-validation-message-padding 0; - } - - .dx-invalid-message-right & { - padding: 0 0 0 $fluent-validation-message-padding; - } - - .dx-invalid-message-bottom & { - padding: $fluent-validation-message-padding 0 0 0; - } - - .dx-invalid-message-left & { - padding: 0 $fluent-validation-message-padding 0 0; - } -} - -.dx-validationsummary > .dx-validationsummary-item:not(:last-child) { - margin-bottom: $fluent-validationsummary-item-margin; -} - -.dx-form-validation-summary { - margin-top: 20px; -} +@include dx-base-validation( + $validation-summary-color, + $validation-message-color, + $validation-message-background-color, + $fluent-validation-overlay-border-radius +); +@include dx-modern-styles-validation( + $fluent-validation-message-font-size, + $fluent-validation-message-line-height, + $fluent-filled-texteditor-input-horizontal-padding, + $fluent-validation-message-padding, + $fluent-validationsummary-item-margin, + $fluent-validation-message-vertical-padding, + $fluent-validation-message-horizontal-padding, +); diff --git a/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss b/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss index a76f02fb2b37..0b24aa347656 100644 --- a/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss +++ b/packages/devextreme/scss/widgets/fluent/validation/_sizes.scss @@ -4,13 +4,25 @@ $fluent-validation-message-padding: null !default; $fluent-validationsummary-item-margin: null !default; +$fluent-validation-message-line-height: null !default; +$fluent-validation-message-horizontal-padding: null !default; + +$fluent-validation-overlay-border-radius: 4px !default; +$fluent-validation-message-vertical-padding: 4px !default; +$fluent-validation-message-font-size: 12px !default; @if $size == "default" { $fluent-validation-message-padding: 6px !default; $fluent-validationsummary-item-margin: 10px !default; + + $fluent-validation-message-horizontal-padding: 8px !default; + $fluent-validation-message-line-height: 16px !default; } @else if $size == "compact" { $fluent-validation-message-padding: 4px !default; $fluent-validationsummary-item-margin: 6px !default; + + $fluent-validation-message-horizontal-padding: 6px !default; + $fluent-validation-message-line-height: 12px !default; } diff --git a/packages/devextreme/scss/widgets/generic/validation/_index.scss b/packages/devextreme/scss/widgets/generic/validation/_index.scss index 516f9c4e5f7a..f3fb1f642959 100644 --- a/packages/devextreme/scss/widgets/generic/validation/_index.scss +++ b/packages/devextreme/scss/widgets/generic/validation/_index.scss @@ -7,12 +7,4 @@ // adduse @use "../overlay"; -@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color); - -.dx-invalid-message > .dx-overlay-content { - border-radius: $validation-overlay-border-radius; - - .dx-editor-underlined & { - border-radius: 0; - } -} +@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color, $validation-overlay-border-radius); diff --git a/packages/devextreme/scss/widgets/material/validation/_index.scss b/packages/devextreme/scss/widgets/material/validation/_index.scss index 13f3cf8020b0..867023574f34 100644 --- a/packages/devextreme/scss/widgets/material/validation/_index.scss +++ b/packages/devextreme/scss/widgets/material/validation/_index.scss @@ -8,42 +8,13 @@ // adduse @use "../overlay"; -@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color); - -.dx-invalid-message > .dx-overlay-content { - background-color: transparent; - color: $validation-message-background-color; - - .dx-invalid-message-top &, - .dx-invalid-message-bottom & { - .dx-editor-filled &, - .dx-editor-outlined { - padding-left: $material-filled-texteditor-input-horizontal-padding; - padding-right: $material-filled-texteditor-input-horizontal-padding; - } - } - - .dx-invalid-message-top & { - padding: 0 0 $material-validation-message-padding 0; - } - - .dx-invalid-message-right & { - padding: 0 0 0 $material-validation-message-padding; - } - - .dx-invalid-message-bottom & { - padding: $material-validation-message-padding 0 0 0; - } - - .dx-invalid-message-left & { - padding: 0 $material-validation-message-padding 0 0; - } -} - -.dx-validationsummary > .dx-validationsummary-item:not(:last-child) { - margin-bottom: $material-validationsummary-item-margin; -} - -.dx-form-validation-summary { - margin-top: 20px; -} +@include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color, $material-validation-overlay-border-radius); +@include dx-modern-styles-validation( + $material-validation-message-font-size, + $material-validation-message-line-height, + $material-filled-texteditor-input-horizontal-padding, + $material-validation-message-padding, + $material-validationsummary-item-margin, + $material-validation-message-vertical-padding, + $material-validation-message-horizontal-padding, +); diff --git a/packages/devextreme/scss/widgets/material/validation/_sizes.scss b/packages/devextreme/scss/widgets/material/validation/_sizes.scss index d636ea4c6043..d2719b068f80 100644 --- a/packages/devextreme/scss/widgets/material/validation/_sizes.scss +++ b/packages/devextreme/scss/widgets/material/validation/_sizes.scss @@ -4,13 +4,25 @@ $material-validation-message-padding: null !default; $material-validationsummary-item-margin: null !default; +$material-validation-message-line-height: null !default; + +$material-validation-message-horizontal-padding: null !default; +$material-validation-message-vertical-padding: 4px !default; +$material-validation-overlay-border-radius: 4px !default; +$material-validation-message-font-size: 12px !default; @if $size == "default" { $material-validation-message-padding: 6px !default; $material-validationsummary-item-margin: 10px !default; + + $material-validation-message-horizontal-padding: 8px !default; + $material-validation-message-line-height: 16px !default; } @else if $size == "compact" { $material-validation-message-padding: 4px !default; $material-validationsummary-item-margin: 6px !default; + + $material-validation-message-horizontal-padding: 6px !default; + $material-validation-message-line-height: 12px !default; } diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light).png index bf9f1d0fda6c..1d2f0eaf60b0 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light-compact).png index 0a6e7cb97702..6c17a0518d46 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with bottom position (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light).png index ce980286861a..f1cd28673ddb 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light-compact).png index 20e568302c3c..d06b4655e311 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with left position (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light).png index 7818b5c2a3b6..2fcfa6748315 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light-compact).png index 5aceceb81346..e1b13a972f83 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with right position (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light).png index 64f989a7ded3..30fa7f6b0e35 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light-compact).png index 6b76acb310b0..487e06ca57ef 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/checkBox/etalons/Checkbox validation message with top position (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light).png index f3cc09fa257e..7edf8333f88a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light-compact).png index 9529a8f077b1..e8a31843342a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=bottom (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=left (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=left (material-blue-light-compact).png index 05efa110d3a4..204727919721 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=left (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=left (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light).png index b2963ea0d8f9..13b0de8442d7 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light-compact).png index 7b95f9b118ca..9f7f35d9886a 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=right (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light).png index 5df01b771c93..3f6c6dabb7fc 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light-compact).png b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light-compact).png index 6e93082daf45..11e49c27ecbc 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light-compact).png and b/packages/devextreme/testing/testcafe/tests/editors/dateBox/etalons/Datebox validation message with position=top (material-blue-light-compact).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=floating-styleMode=outlined (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=floating-styleMode=outlined (material-blue-light).png index dfa30e54ac39..ba8a11cecfad 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=floating-styleMode=outlined (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=floating-styleMode=outlined (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png index 284f7a7e534f..ee2f9d80021c 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=outlined (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=underlined (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=underlined (material-blue-light).png index 5cfd8c938dc6..20389a69640e 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=underlined (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/lookup/etalons/Lookup label with labelMode=static-styleMode=underlined (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png index 642d082b56ca..77620812dce3 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/radioGroup/etalons/RadioGroup horizontal validation (material-blue-light).png differ diff --git a/packages/devextreme/testing/testcafe/tests/editors/textBox/etalons/Textbox validation message (material-blue-light).png b/packages/devextreme/testing/testcafe/tests/editors/textBox/etalons/Textbox validation message (material-blue-light).png index 87fad761f2d8..a0e5754db0fa 100644 Binary files a/packages/devextreme/testing/testcafe/tests/editors/textBox/etalons/Textbox validation message (material-blue-light).png and b/packages/devextreme/testing/testcafe/tests/editors/textBox/etalons/Textbox validation message (material-blue-light).png differ