diff --git a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss index ee94763462..ec93a3f5aa 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-boolean.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-boolean.scss @@ -22,7 +22,6 @@ .sd-boolean__thumb, .sd-boolean__label { - @include useEditorFontSize; display: block; font-family: $font-editorfont-family; font-weight: $font-editorfont-weight; diff --git a/packages/survey-core/src/default-theme/blocks/sd-context-btn.scss b/packages/survey-core/src/default-theme/blocks/sd-context-btn.scss index eaf1d48ac5..578613bc70 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-context-btn.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-context-btn.scss @@ -13,7 +13,6 @@ } svg { - @include useEditorFontSize; display: block; width: multiply(1.5, $font-editorfont-size); height: multiply(1.5, $font-editorfont-size); diff --git a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss index ef12c34123..6b24bdbf58 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-dropdown.scss @@ -46,7 +46,6 @@ } .sd-dropdown__value { - @include useEditorFontSize; width: 100%; min-height: multiply(1.5, $font-editorfont-size); overflow: hidden; @@ -86,7 +85,6 @@ .sd-dropdown_chevron-button-svg, .sd-dropdown_clean-button-svg { - @include useEditorFontSize; width: multiply(1.5, $font-editorfont-size); height: multiply(1.5, $font-editorfont-size); @@ -105,7 +103,6 @@ } .sd-dropdown__filter-string-input { - @include useEditorFontSize; position: absolute; left: 0; top: 0; @@ -186,7 +183,6 @@ .sv-dropdown-popup { .sd-list__item-body { - @include useEditorFontSize; line-height: multiply(1.5, $font-editorfont-size); font-size: $font-editorfont-size; font-weight: $font-editorfont-weight; @@ -209,6 +205,16 @@ } } +.sv-dropdown-popup.sv-popup--menu-tablet, +.sv-dropdown-popup.sv-popup--menu-phone { + .sd-list__item-body { + font-family: $font-family; + font-size: $font-size; + line-height: multiply(1.5, $font-size); + font-weight: 400; + } +} + .sv-dropdown-popup.sv-single-select-list.sv-popup--leave { .sd-list__item.sv-list__item--selected { .sv-list__item-body { diff --git a/packages/survey-core/src/default-theme/blocks/sd-file.scss b/packages/survey-core/src/default-theme/blocks/sd-file.scss index 08afc3f7e1..1c6e8bfcaf 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-file.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-file.scss @@ -72,7 +72,6 @@ } .sd-file__drag-area-placeholder { - @include useEditorFontSize; text-align: center; white-space: normal; color: $font-questionplaceholder-color; @@ -169,7 +168,6 @@ } .sd-file--chose-btn--as .sd-file--answered .sd-file__actions-container { - @include useEditorFontSize; inset-inline-end: calc(multiply(1.5, $font-editorfont-size) + calcSize(5)); } diff --git a/packages/survey-core/src/default-theme/blocks/sd-imagepicker.scss b/packages/survey-core/src/default-theme/blocks/sd-imagepicker.scss index 8e8fd9de94..36a1f13168 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-imagepicker.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-imagepicker.scss @@ -69,7 +69,6 @@ } .sd-imagepicker__check-icon { - @include useEditorFontSize; display: block; width: multiply(1.5, $font-editorfont-size); height: multiply(1.5, $font-editorfont-size); @@ -108,7 +107,6 @@ } .sd-imagepicker__text { - @include useEditorFontSize; font-size: $font-editorfont-size; line-height: multiply(1.5, $font-editorfont-size); margin-top: calcSize(1); diff --git a/packages/survey-core/src/default-theme/blocks/sd-input.scss b/packages/survey-core/src/default-theme/blocks/sd-input.scss index 240eb90824..8a42c2fab3 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-input.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-input.scss @@ -1,7 +1,6 @@ @use "../variables.scss" as *; .sd-input { - @include useEditorFontSize; -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -165,7 +164,6 @@ textarea { .sd-input[type="email"], .sd-input[type="color"], .sd-input[type="range"] { - @include useEditorFontSize; box-sizing: content-box; width: calc(100% - 4 * #{$base-unit}); height: multiply(1.5, $font-editorfont-size); diff --git a/packages/survey-core/src/default-theme/blocks/sd-item.scss b/packages/survey-core/src/default-theme/blocks/sd-item.scss index 26453a8fe6..55056b4c6e 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-item.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-item.scss @@ -7,7 +7,6 @@ .sd-item--disabled.sd-item--disabled .sd-item__decorator, .sd-item__decorator { - @include useEditorFontSize; display: flex; align-items: center; justify-content: center; @@ -54,7 +53,6 @@ } .sd-item__control-label { - @include useEditorFontSize; font-family: $font-editorfont-family; font-style: normal; font-weight: $font-editorfont-weight; diff --git a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss index 6fcf0fa646..a67ecc292f 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-matrixdynamic.scss @@ -37,7 +37,6 @@ } .sd-action.sd-matrixdynamic__remove-btn .sd-action__icon { - @include useEditorFontSize; width: multiply(1.5, $font-editorfont-size); height: multiply(1.5, $font-editorfont-size); } diff --git a/packages/survey-core/src/default-theme/blocks/sd-multipletext.scss b/packages/survey-core/src/default-theme/blocks/sd-multipletext.scss index 599c0ca74c..b77701df4f 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-multipletext.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-multipletext.scss @@ -46,7 +46,6 @@ line-height: 0; span { - @include useEditorFontSize; font-size: $font-editorfont-size; line-height: multiply(1.5, $font-editorfont-size); } diff --git a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss index c382a94bf5..e4aca95200 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-paneldynamic.scss @@ -216,7 +216,6 @@ } .sd-tab-item { - @include useEditorFontSize; padding: calcSize(1) 0 calcSize(2); display: flex; -webkit-appearance: none; diff --git a/packages/survey-core/src/default-theme/blocks/sd-question.scss b/packages/survey-core/src/default-theme/blocks/sd-question.scss index bb09f0d41f..8f3b693d4b 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-question.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-question.scss @@ -147,7 +147,6 @@ } .sd-question__placeholder { - @include useEditorFontSize; display: flex; flex-direction: column; align-items: center; diff --git a/packages/survey-core/src/default-theme/blocks/sd-rating.scss b/packages/survey-core/src/default-theme/blocks/sd-rating.scss index ea6e1defda..950014ca38 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-rating.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-rating.scss @@ -550,7 +550,6 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley { } .sd-rating__item-text.sd-rating__item-text { - @include useEditorFontSize; font-family: $font-editorfont-family; font-weight: $font-editorfont-weight; color: $font-questiontitle-color; diff --git a/packages/survey-core/src/default-theme/blocks/sd-signaturepad.scss b/packages/survey-core/src/default-theme/blocks/sd-signaturepad.scss index 042bc016ca..99991e01e2 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-signaturepad.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-signaturepad.scss @@ -1,7 +1,6 @@ @use "../variables.scss" as *; .sjs_sp_placeholder { - @include useEditorFontSize; color: $font-questionplaceholder-color; font-size: $font-editorfont-size; line-height: multiply(1.5, $font-editorfont-size); diff --git a/packages/survey-core/src/default-theme/blocks/sd-table.scss b/packages/survey-core/src/default-theme/blocks/sd-table.scss index 69d74123a0..607cc4ba9d 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-table.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-table.scss @@ -185,7 +185,6 @@ } .sd-table__cell { - @include useEditorFontSize; font-weight: normal; font-size: $font-editorfont-size; line-height: multiply(1.5, $font-editorfont-size); @@ -248,7 +247,6 @@ .sd-table__cell--header { span { - @include useEditorFontSize; font-size: $font-editorfont-size; line-height: multiply(1.5, $font-editorfont-size); font-weight: $font-questiontitle-weight; @@ -329,7 +327,6 @@ transition: background $transition-duration; svg { - @include useEditorFontSize; display: block; width: multiply(1, $font-editorfont-size); height: multiply(1, $font-editorfont-size); diff --git a/packages/survey-core/src/default-theme/blocks/sd-tagbox.scss b/packages/survey-core/src/default-theme/blocks/sd-tagbox.scss index ef265b2baa..b7d8666be8 100644 --- a/packages/survey-core/src/default-theme/blocks/sd-tagbox.scss +++ b/packages/survey-core/src/default-theme/blocks/sd-tagbox.scss @@ -23,7 +23,6 @@ } .sd-tagbox_clean-button { - @include useEditorFontSize; height: multiply(1.5, $font-editorfont-size); padding: multiply(0.5, $font-editorfont-size); margin: auto 0; @@ -79,7 +78,6 @@ } .sd-tagbox-item_clean-button-svg { - @include useEditorFontSize; display: block; padding: multiply(0.25, $font-editorfont-size); width: multiply(1, $font-editorfont-size); @@ -155,7 +153,6 @@ } .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix { - @include useEditorFontSize; line-height: multiply(1.5, $font-editorfont-size); height: 100%; display: flex; @@ -163,7 +160,6 @@ } .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix { - @include useEditorFontSize; line-height: multiply(1.5, $font-editorfont-size); height: 100%; display: flex; diff --git a/packages/survey-core/src/default-theme/blocks/sv-popup.scss b/packages/survey-core/src/default-theme/blocks/sv-popup.scss index 29e0330dc7..6ecb2b84da 100644 --- a/packages/survey-core/src/default-theme/blocks/sv-popup.scss +++ b/packages/survey-core/src/default-theme/blocks/sv-popup.scss @@ -299,8 +299,8 @@ sv-popup { .sv-list__input { color: $foreground-light; - font-size: max(16px, calcFontSize(1)); - line-height: max(24px, calcLineHeight(1.5)); + font-size: calcFontSize(1); + line-height: calcLineHeight(1.5); font-family: $font-family; padding: calcSize(0.5) calcSize(0.5) calcSize(0.5) calcSize(1); } diff --git a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss index 947c007f22..c8324c4c7b 100644 --- a/packages/survey-core/src/default-theme/blocks/sv-ranking.scss +++ b/packages/survey-core/src/default-theme/blocks/sv-ranking.scss @@ -86,7 +86,6 @@ } .sv-ranking-item__index.sv-ranking-item__index { - @include useEditorFontSize; display: flex; flex-shrink: 0; align-items: center; @@ -116,7 +115,6 @@ } .sv-ranking-item__text { - @include useEditorFontSize; display: inline-block; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/survey-core/src/default-theme/default.m600.scss b/packages/survey-core/src/default-theme/default.m600.scss index c40e40afca..2278b2f04e 100644 --- a/packages/survey-core/src/default-theme/default.m600.scss +++ b/packages/survey-core/src/default-theme/default.m600.scss @@ -13,7 +13,6 @@ --sd-base-padding: calc(3 * #{$base-unit}); --sd-base-vertical-padding: calc(2 * #{$base-unit}); --sd-page-vertical-padding: calc(2 * #{$base-unit}); - --sjs-mobile-font-editorfont-size: Max(16px, #{$font-default-editorfont-size}); } .sd-root-modern { diff --git a/packages/survey-core/src/default-theme/variables.scss b/packages/survey-core/src/default-theme/variables.scss index 67781948a3..597df9c612 100644 --- a/packages/survey-core/src/default-theme/variables.scss +++ b/packages/survey-core/src/default-theme/variables.scss @@ -117,12 +117,9 @@ $font-editorfont-placeholdercolor: var( --sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)) ); -$font-default-editorfont-size: var(--sjs-font-editorfont-size, $font-size); +$font-editorfont-size: var(--sjs-font-editorfont-size, $font-size); $base-unit: var(--sjs-base-unit, var(--base-unit, 8px)); -//call @include useEditorFontSize before using this variable; -$font-editorfont-size: var(--sjs-internal-font-editorfont-size); - $sd-panel-normal-min-width: 496px; $sd-panel-medium-min-width: 176px; @@ -205,10 +202,6 @@ $transition-duration: var(--sjs-transition-duration, 150ms); $ease-out: cubic-bezier(0, 0, 0.58, 1); $reverse-ease-out: cubic-bezier(0.42, 0, 1, 1); -@mixin useEditorFontSize { - --sjs-internal-font-editorfont-size: var(--sjs-mobile-font-editorfont-size, #{$font-default-editorfont-size}); -} - @function multiply($a, $b) { @if $a ==1 { $result: #{$b}; diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-input-size.png b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-input-size.png index 40e0163964..c8de71e89f 100644 Binary files a/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-input-size.png and b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-input-size.png differ diff --git a/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-popup-input-size.png b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-popup-input-size.png index cdd589cb60..b7b32642c1 100644 Binary files a/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-popup-input-size.png and b/visualRegressionTests/tests/defaultV2/etalons/survey-theme-mobile-popup-input-size.png differ diff --git a/visualRegressionTests/tests/defaultV2/themes.ts b/visualRegressionTests/tests/defaultV2/themes.ts index 9cce7936f3..b09518815d 100644 --- a/visualRegressionTests/tests/defaultV2/themes.ts +++ b/visualRegressionTests/tests/defaultV2/themes.ts @@ -439,7 +439,7 @@ frameworks.forEach(framework => { }); }); - test("Mobile mode: input font-size is 16px", async (t) => { + test("Mobile mode: input font-size less 16px", async (t) => { await wrapVisualTest(t, async (t, comparer) => { await t.resizeWindow(400, 2000); await ClientFunction(() => {