From 8d28f0cabd28c1cab2db3220af07621b84402cf9 Mon Sep 17 00:00:00 2001 From: TSV Date: Thu, 22 Jun 2023 15:50:29 +0300 Subject: [PATCH] Resolved #6360 - When changing the text size, it is necessary to change its line-height proportionally --- src/common-styles/sv-actionbar.scss | 7 +- src/common-styles/sv-brand-info.scss | 4 +- src/common-styles/sv-buttongroup.scss | 2 +- src/common-styles/sv-drag-drop.scss | 2 +- src/common-styles/sv-list.scss | 6 +- src/common-styles/sv-popup.scss | 6 +- src/common-styles/sv-ranking.scss | 4 +- src/common-styles/sv-save-data.scss | 8 +- src/defaultV2-theme/blocks/mixins.scss | 8 +- src/defaultV2-theme/blocks/sd-action.scss | 2 +- src/defaultV2-theme/blocks/sd-boolean.scss | 6 +- src/defaultV2-theme/blocks/sd-button.scss | 4 +- .../blocks/sd-description.scss | 4 +- src/defaultV2-theme/blocks/sd-dropdown.scss | 10 ++- src/defaultV2-theme/blocks/sd-element.scss | 71 +++++++++------ src/defaultV2-theme/blocks/sd-file.scss | 54 ++++++++++-- .../blocks/sd-imagepicker.scss | 26 ++++-- src/defaultV2-theme/blocks/sd-input.scss | 6 +- src/defaultV2-theme/blocks/sd-item.scss | 6 +- src/defaultV2-theme/blocks/sd-list.scss | 5 +- .../blocks/sd-matrixdynamic.scss | 2 +- .../blocks/sd-paneldynamic.scss | 23 +++-- .../blocks/sd-progress-buttons.scss | 13 ++- src/defaultV2-theme/blocks/sd-progress.scss | 8 +- src/defaultV2-theme/blocks/sd-question.scss | 50 ++++++++--- src/defaultV2-theme/blocks/sd-ranking.scss | 2 +- src/defaultV2-theme/blocks/sd-rating.scss | 3 +- src/defaultV2-theme/blocks/sd-table.scss | 86 ++++++++++++++++--- src/defaultV2-theme/blocks/sd-tagbox.scss | 9 +- src/defaultV2-theme/blocks/sd-title.scss | 6 +- src/defaultV2-theme/defaultV2.m600.scss | 15 +++- src/defaultV2-theme/variables.scss | 11 ++- 32 files changed, 337 insertions(+), 132 deletions(-) diff --git a/src/common-styles/sv-actionbar.scss b/src/common-styles/sv-actionbar.scss index 446d5310cd..9b65e54bda 100644 --- a/src/common-styles/sv-actionbar.scss +++ b/src/common-styles/sv-actionbar.scss @@ -52,14 +52,14 @@ button.sv-action-bar-item { .sv-action-bar--default-size-mode .sv-action-bar-item { height: calcSize(5); font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); margin: 0 calcSize(1); } .sv-action-bar--small-size-mode .sv-action-bar-item { height: calcSize(4); font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); margin: 0 calcSize(0.5); } @@ -97,6 +97,7 @@ button.sv-action-bar-item { } .sv-action-bar-item--active.sv-action-bar-item--pressed { + &:focus, &:focus-visible { outline: none; @@ -145,7 +146,7 @@ button.sv-action-bar-item { border-radius: calcCornerRadius(0.5); background-color: transparent; cursor: pointer; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); font-family: var(--font-family, $font-family); } diff --git a/src/common-styles/sv-brand-info.scss b/src/common-styles/sv-brand-info.scss index 3e5de1cb72..b68c49bd91 100644 --- a/src/common-styles/sv-brand-info.scss +++ b/src/common-styles/sv-brand-info.scss @@ -18,7 +18,7 @@ sv-brand-info {} .sv-brand-info__text { font-weight: 600; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); color: #161616; } @@ -33,7 +33,7 @@ sv-brand-info {} .sv-brand-info__terms { font-weight: 400; font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); a { color: #909090; diff --git a/src/common-styles/sv-buttongroup.scss b/src/common-styles/sv-buttongroup.scss index 2be6cef820..4c5cb8ca04 100644 --- a/src/common-styles/sv-buttongroup.scss +++ b/src/common-styles/sv-buttongroup.scss @@ -23,7 +23,7 @@ appearance: none; width: 100%; padding: 11px calcSize(2); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); outline: none; font-size: calcFontSize(1); font-weight: 400; diff --git a/src/common-styles/sv-drag-drop.scss b/src/common-styles/sv-drag-drop.scss index 3ebc94ce90..b46a7ed56a 100644 --- a/src/common-styles/sv-drag-drop.scss +++ b/src/common-styles/sv-drag-drop.scss @@ -13,7 +13,7 @@ font-family: var(--font-family, $font-family); font-size: calcFontSize(1); padding-left: calcSize(2.5); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } .sv-matrixdynamic__drag-icon { diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss index dc71da5d12..bb3454f692 100644 --- a/src/common-styles/sv-list.scss +++ b/src/common-styles/sv-list.scss @@ -20,7 +20,7 @@ } .sv-list__empty-text { - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); font-weight: 400; text-align: center; @@ -48,7 +48,7 @@ padding-inline-start: calcSize(2); color: $foreground; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); cursor: pointer; overflow: hidden; text-overflow: ellipsis; @@ -198,7 +198,7 @@ li:focus .sv-list__item.sv-list__item--selected { color: $foreground; padding: calcSize(1.5) calcSize(3); padding-inline-start: calcSize(7); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); border: none; } diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss index eb7d6b1d5e..6004659f1a 100644 --- a/src/common-styles/sv-popup.scss +++ b/src/common-styles/sv-popup.scss @@ -197,7 +197,7 @@ sv-popup { .sv-popup__body-header { font-family: Open Sans; font-size: calcFontSize(1.5); - line-height: calcSize(4); + line-height: calcLineHeight(2); font-style: normal; font-weight: 700; margin-bottom: calcSize(2); @@ -339,7 +339,7 @@ sv-popup { .sv-list__input { color: $foreground-light; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-family: $font-family; padding: calcSize(0.5) 0 calcSize(0.5) calcSize(1); } @@ -390,4 +390,4 @@ sv-popup { .sv-list__container { flex-grow: 1; } -} +} \ No newline at end of file diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss index 72e7e6c9b9..e33304d4b4 100644 --- a/src/common-styles/sv-ranking.scss +++ b/src/common-styles/sv-ranking.scss @@ -77,7 +77,7 @@ border: calcSize(0.25) solid transparent; width: calcSize(5); height: calcSize(5); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); box-sizing: border-box; font-weight: 600; margin-left: calcSize(0); @@ -96,7 +96,7 @@ white-space: nowrap; color: $foreground; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); margin: 0 calcSize(2); } diff --git a/src/common-styles/sv-save-data.scss b/src/common-styles/sv-save-data.scss index ec855ea4b2..b93134ad46 100644 --- a/src/common-styles/sv-save-data.scss +++ b/src/common-styles/sv-save-data.scss @@ -16,7 +16,7 @@ font-family: var(--font-family, $font-family); font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); display: flex; flex-direction: row; @@ -50,6 +50,7 @@ flex-shrink: 0; } } + .sv-save-data_root--shown.sv-save-data_success, .sv-save-data_root--shown.sv-save-data_error { opacity: 1; @@ -66,7 +67,7 @@ .sv-save-data_root.sv-save-data_error .sv-save-data_button { font-weight: 600; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); height: calcSize(5); color: #ffffff; background-color: $red; @@ -76,6 +77,7 @@ display: flex; align-items: center; } + .sv-save-data_root.sv-save-data_error .sv-save-data_button:hover, .sv-save-data_root.sv-save-data_error .sv-save-data_button:focus { color: $red; @@ -86,4 +88,4 @@ background-color: $primary; color: #ffffff; font-weight: 600; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss index 0f6ed5a9ed..1fed461bf1 100644 --- a/src/defaultV2-theme/blocks/mixins.scss +++ b/src/defaultV2-theme/blocks/mixins.scss @@ -4,7 +4,7 @@ font-size: $font-pagetitle-size; color: $font-pagetitle-color; position: static; - line-height: calcSize(4); + line-height: calcLineHeight(2); margin: calcSize(0.5) 0px; } @@ -14,7 +14,7 @@ font-size: $font-pagedescription-size; color: $font-pagedescription-color; position: static; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); margin: calcSize(0.5) 0px; } @@ -25,8 +25,8 @@ padding-inline-start: 0; padding-inline-end: 0; - & + span { + &+span { float: none; width: auto; } -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-action.scss b/src/defaultV2-theme/blocks/sd-action.scss index f100461132..1276906c87 100644 --- a/src/defaultV2-theme/blocks/sd-action.scss +++ b/src/defaultV2-theme/blocks/sd-action.scss @@ -9,7 +9,7 @@ font-family: var(--font-family, $font-family); font-style: normal; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); outline: none; } diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss index 82b01c2c5f..cdec3d4a06 100644 --- a/src/defaultV2-theme/blocks/sd-boolean.scss +++ b/src/defaultV2-theme/blocks/sd-boolean.scss @@ -15,7 +15,7 @@ font-weight: $font-editorfont-weight; font-size: $font-editorfont-size; color: $foreground-light; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); padding: calcSize(1) calcSize(3); } @@ -32,7 +32,7 @@ border-radius: calcSize(12.5); } -.sd-boolean__control:focus ~ .sd-boolean__switch { +.sd-boolean__control:focus~.sd-boolean__switch { box-shadow: inset 0 0 0 2px $primary; } @@ -85,4 +85,4 @@ .sd-boolean--error { background-color: $red-light; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-button.scss b/src/defaultV2-theme/blocks/sd-button.scss index bfefc96a53..d3959aaa88 100644 --- a/src/defaultV2-theme/blocks/sd-button.scss +++ b/src/defaultV2-theme/blocks/sd-button.scss @@ -14,7 +14,7 @@ font-style: normal; font-weight: 600; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); text-align: center; color: $primary; border: none; @@ -48,4 +48,4 @@ .sd-btn--action:disabled { color: $primary-foreground-disabled; pointer-events: none; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-description.scss b/src/defaultV2-theme/blocks/sd-description.scss index 60d8defc96..49845edcdb 100644 --- a/src/defaultV2-theme/blocks/sd-description.scss +++ b/src/defaultV2-theme/blocks/sd-description.scss @@ -4,11 +4,11 @@ font-weight: $font-questiondescription-weight; color: $font-questiondescription-color; font-size: $font-questiondescription-size; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); white-space: normal; word-break: break-word; } .sd-element__header .sd-description { margin-top: calcSize(0.5); -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-dropdown.scss b/src/defaultV2-theme/blocks/sd-dropdown.scss index 33d69a9554..3773c605cb 100644 --- a/src/defaultV2-theme/blocks/sd-dropdown.scss +++ b/src/defaultV2-theme/blocks/sd-dropdown.scss @@ -83,7 +83,7 @@ font-weight: $font-editorfont-weight; color: $font-editorfont-color; font-size: $font-editorfont-size; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); background-color: transparent; overflow: hidden; text-overflow: ellipsis; @@ -107,11 +107,13 @@ text-overflow: ellipsis; white-space: nowrap; display: inline-block; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); appearance: none; } + .sd-dropdown__hint-prefix { color: $foreground-light; + span { white-space: pre; } @@ -120,14 +122,16 @@ .sd-dropdown__hint-suffix { display: flex; color: $foreground-light; + span { white-space: pre; } } + [dir="rtl"], [style*="direction:rtl"], [style*="direction: rtl"] { .sd-dropdown { background-position: left calcSize(1.5) top 50%, 0 0; } -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss index d032e4a378..0d57edc1cd 100644 --- a/src/defaultV2-theme/blocks/sd-element.scss +++ b/src/defaultV2-theme/blocks/sd-element.scss @@ -30,13 +30,13 @@ .sd-element__num { font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); color: $foreground-light; } span { font-size: $font-questiontitle-size; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } .sv-title-actions__title { @@ -71,7 +71,7 @@ padding-inline-end: calcSize(1); width: calcSize(5); font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); color: $foreground-light; margin-inline-start: calcSize(-5); // margin-left text-align: end; @@ -79,7 +79,7 @@ white-space: nowrap; flex-shrink: 0; - & + span { + &+span { float: left; width: 0; } @@ -120,6 +120,7 @@ .sd-element__title--expandable.sd-element__title--expanded:before { transform: rotate(90deg); } + //with borders styles .svc-logic-question-value, .sd-element--with-frame { @@ -135,20 +136,23 @@ &.sd-question--paneldynamic { padding-bottom: 0; - & > .sd-question__erbox--below-question { + &>.sd-question__erbox--below-question { bottom: 0; margin-top: 0; } } } + //complex (panel, paneldynamic, matrixes) styles .sd-element--complex { - &.sd-element--complex > .sd-question__erbox--above-question { + &.sd-element--complex>.sd-question__erbox--above-question { margin-top: 0; margin-bottom: 0; } - & > .sd-element__header--location-top { + + &>.sd-element__header--location-top { margin-top: 0; + &:after { content: " "; display: block; @@ -158,12 +162,15 @@ bottom: 0; } } + &.sd-element--with-frame { padding-top: 0; - & > .sd-element__header--location-top { + + &>.sd-element__header--location-top { margin-top: 0; padding-top: var(--sd-base-vertical-padding); padding-bottom: var(--sd-base-vertical-padding); + &:after { bottom: calc(-1 * var(--sd-base-vertical-padding)); left: calc(-1 * var(--sd-base-padding)); @@ -172,44 +179,50 @@ } } } + //collapsed styles .sd-element--expanded, .sd-element--collapsed { - & > .sd-element__header { + &>.sd-element__header { cursor: pointer; } } .sd-element--collapsed { - & > .sd-element__header { + &>.sd-element__header { padding: calcSize(0) var(--sd-base-padding); box-sizing: border-box; background-color: $background; } - &.sd-element--complex > .sd-element__header--location-top { + + &.sd-element--complex>.sd-element__header--location-top { &:after { display: none; } } + &.sd-element--with-frame { padding-top: 0; padding-bottom: 0; - & > .sd-element__header { + + &>.sd-element__header { padding-top: calcSize(2); padding-bottom: calcSize(2); border-radius: $panel-corner-radius; } - & > .sd-element__header--location-top { + + &>.sd-element__header--location-top { margin-top: 0; } } - & > .sd-element__header:focus-within, - & > .sd-element__header:hover { + &>.sd-element__header:focus-within, + &>.sd-element__header:hover { background-color: $background-dim-light; } } -.sd-element--collapsed > .sd-element__header { + +.sd-element--collapsed>.sd-element__header { margin-left: calc(-1 * var(--sd-base-padding)); width: calc(100% + 2 * var(--sd-base-padding)); } @@ -217,18 +230,21 @@ //nested styles .sd-element--nested { &.sd-element--complex { - & > .sd-element__header--location-top { + &>.sd-element__header--location-top { &:after { bottom: calc(-0.5 * var(--sd-base-vertical-padding)); } } } + &.sd-element--collapsed { - & > .sd-element__header:hover, - & > .sd-element__header:focus-within { + + &>.sd-element__header:hover, + &>.sd-element__header:focus-within { box-shadow: 0 calcSize(-2) 0 0 $background-dim-light, 0 calcSize(2) 0 $background-dim-light; } } + &.sd-panel, &.sd-question--paneldynamic { border: 1px solid $border-light; @@ -237,7 +253,7 @@ padding-left: var(--sd-base-padding); padding-right: var(--sd-base-padding); - & > .sd-element__header--location-top { + &>.sd-element__header--location-top { padding-top: calc(0.5 * var(--sd-base-vertical-padding)); padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); @@ -248,21 +264,23 @@ } } - & > .sd-question__erbox--outside-question { + &>.sd-question__erbox--outside-question { margin-left: calc(-1 * var(--sd-base-padding)); margin-right: calc(-1 * var(--sd-base-padding)); width: calc(100% + 2 * var(--sd-base-padding)); } - & > .sd-question__erbox--below-question { + &>.sd-question__erbox--below-question { bottom: 0; margin-top: 0; } + &.sd-element--collapsed { - & > .sd-element__header--location-top { + &>.sd-element__header--location-top { &:after { display: none; } + &:hover, &:focus-within { box-shadow: none; @@ -271,10 +289,11 @@ } } - & > .sd-panel__content { + &>.sd-panel__content { padding-bottom: var(--sd-base-padding); } } + //compact styles .sd-element--with-frame.sd-element--compact { border: 1px solid $border-inside; @@ -283,11 +302,11 @@ } //creator styles -.svc-question__content .sd-element--complex > .sd-element__header--location-top { +.svc-question__content .sd-element--complex>.sd-element__header--location-top { padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); padding-top: 0; &:after { display: none; } -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss index 7d22ffd3a7..83f439f9cf 100644 --- a/src/defaultV2-theme/blocks/sd-file.scss +++ b/src/defaultV2-theme/blocks/sd-file.scss @@ -2,18 +2,21 @@ min-height: calcSize(36); position: relative; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); + .sv-action-bar { padding: calcSize(1) 0; justify-content: center; position: absolute; width: 100%; bottom: 0; + .sv-action-bar-item { height: calcSize(4); color: $foreground-light; border-radius: calcSize(2); } + #fileIndex { .sv-action-bar-item { padding: calcSize(0.5) 0; @@ -21,6 +24,7 @@ &:hover { background-color: $background; } + &:disabled { opacity: initial; } @@ -28,6 +32,7 @@ } } } + .sd-file__decorator { display: flex; flex-direction: column; @@ -39,15 +44,18 @@ justify-content: center; align-items: center; } + .sd-file__decorator--drag { border: 1px solid $primary; box-shadow: inset 0 0 0 1px $primary; background: $primary-light; z-index: 1; } + .sd-file__no-file-chosen { display: none; } + .sd-file__drag-area-placeholder { padding: 0 calcSize(8); text-align: center; @@ -55,6 +63,7 @@ white-space: normal; color: $foreground-light; } + .sd-file__choose-btn--text { display: block; margin-top: calcSize(1); @@ -62,37 +71,46 @@ color: $primary; cursor: pointer; } + .sd-question--answered { .sd-file__drag-area-placeholder { display: none; } } + .sd-file__choose-btn--text { svg { display: none; } } + .sd-file__choose-btn--icon { z-index: 2; + span:first-child { display: none; } } + .sd-file__choose-btn--icon, .sd-file__clean-btn { top: calcSize(1); position: absolute; } + .sd-file__clean-btn { z-index: 2; right: calcSize(1); + span:first-child { display: none; } } + .sd-file__choose-btn--icon { right: calcSize(8); } + .sd-file__list { overflow: auto; display: flex; @@ -106,6 +124,7 @@ position: absolute; width: 100%; } + .sd-file__preview { position: relative; display: flex; @@ -113,12 +132,14 @@ flex-direction: column; min-height: 100%; margin: 0 auto; + .sd-file__default-image { width: calcSize(7); height: 90px; } - img:hover + .sd-file__remove-file-button, - svg:hover + .sd-file__remove-file-button, + + img:hover+.sd-file__remove-file-button, + svg:hover+.sd-file__remove-file-button, .sd-file__remove-file-button:hover { display: block; position: absolute; @@ -127,11 +148,13 @@ transform: translate(-50%, -50%); } } + .sd-file__sign { margin-top: calcSize(1); text-align: center; font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); + a { display: block; text-decoration: none; @@ -142,23 +165,27 @@ overflow: hidden; max-height: calcSize(6); text-overflow: ellipsis; - line-height: calcSize(2); + line-height: calcLineHeight(1); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } } + .sd-file__remove-file-button { display: none; } + .sd-file__decorator--error { background-color: $red-light; } + .sd-file__image-wrapper { position: relative; text-align: center; min-width: calcSize(12); min-height: calcSize(12); + img:not(.sd-file__default-image) { display: block; width: calcSize(12); @@ -167,8 +194,9 @@ background: $background-dim; } } + .sd-file--single { - img:hover + .sd-file__remove-file-button { + img:hover+.sd-file__remove-file-button { display: none; } } @@ -178,32 +206,39 @@ height: calc(100% - 4 * #{$base-unit}); } } + .sd-file--single-image { height: calc(36 * #{$base-unit}); + .sd-file__preview { width: 100%; margin: 0; } + .sd-file__list { padding: 0; height: 100%; max-height: 100%; width: 100%; } + .sd-file__image-wrapper { min-height: 100%; min-width: 100%; + img { width: 100%; height: 100%; background-color: $background-dim-light; } } + .sd-file__sign { position: absolute; margin: 0; width: 100%; min-height: 100%; + a { color: transparent; width: 100%; @@ -212,18 +247,21 @@ } } } -.sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn { + +.sd-file>input:focus+.sd-file__decorator .sd-file__choose-btn { &.sd-file__choose-btn--icon { use { fill: $primary; } } + &:not(.sd-file__choose-btn--icon) { background-color: $primary-light; } } + .sd-file__drag-area { position: absolute; width: 100%; height: 100%; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-imagepicker.scss b/src/defaultV2-theme/blocks/sd-imagepicker.scss index effc46a6d0..c20e6fe452 100644 --- a/src/defaultV2-theme/blocks/sd-imagepicker.scss +++ b/src/defaultV2-theme/blocks/sd-imagepicker.scss @@ -7,32 +7,38 @@ width: 100%; margin: 0; } + .sd-imagepicker--column { align-items: flex-start; flex-direction: column; } + @supports not (aspect-ratio: 1 / 1) { .sd-imagepicker>div { - margin-right: calcSize(2); + margin-right: calcSize(2); } } .sd-imagepicker__item { + img, - .sd-imagepicker__image-container > div { + .sd-imagepicker__image-container>div { border-radius: calcCornerRadius(1); background-color: $background-dim-light; } } + .sd-imagepicker__item-decorator { position: relative; display: flex; flex-direction: column; align-items: center; } + .sd-imagepicker__image-container { position: relative; } + .sd-imagepicker__check-decorator { display: none; position: absolute; @@ -46,14 +52,17 @@ background-color: $background; z-index: 1; } + .sd-imagepicker__check-icon { width: calcSize(3); height: calcSize(3); fill: $primary; } + .sd-imagepicker__item--checked .sd-imagepicker__check-decorator { display: block; } + .sd-imagepicker__item--error .sd-imagepicker__image-container::before { display: block; position: absolute; @@ -66,33 +75,39 @@ border-radius: calcCornerRadius(1); background: linear-gradient(0deg, $red-light, $red-light); } + .sd-imagepicker__item:focus-within .sd-imagepicker__image, .sd-imagepicker__item--allowhover .sd-imagepicker__image:hover { opacity: 0.5; } + .sd-imagepicker__image { display: block; box-sizing: border-box; max-width: 100%; } + .sd-imagepicker__text { font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); margin-top: calcSize(1); color: $foreground; } + .sd-imagepicker__no-image { display: flex; background-color: $background-dim-light; inset-block-start: 0; } + .sd-imagepicker__no-image-svg { height: calcSize(6); width: calcSize(6); margin: auto; + use { - fill: $foreground-light; - } + fill: $foreground-light; + } } .sd-imagepicker__column { @@ -102,6 +117,7 @@ align-items: flex-start; padding-right: 0; } + .sd-selectbase__column.sd-imagepicker__column:not(:last-child) { padding-right: 0; } \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss index 455dadd0c0..d8423eaf2d 100644 --- a/src/defaultV2-theme/blocks/sd-input.scss +++ b/src/defaultV2-theme/blocks/sd-input.scss @@ -7,7 +7,7 @@ height: calcSize(6); box-sizing: border-box; padding: calcSize(1.5) calcSize(2); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-family: $font-editorfont-family; font-weight: $font-editorfont-weight; color: $font-editorfont-color; @@ -69,7 +69,7 @@ align-items: flex-end; padding: 0px; font-family: $font-family; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); color: $foreground-light; position: absolute; @@ -114,4 +114,4 @@ .sd-input[type="range"]::-moz-range-thumb { @include slider-thumb; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-item.scss b/src/defaultV2-theme/blocks/sd-item.scss index 2a25a1b4e7..2e2011dd6e 100644 --- a/src/defaultV2-theme/blocks/sd-item.scss +++ b/src/defaultV2-theme/blocks/sd-item.scss @@ -20,7 +20,7 @@ box-shadow: none; } -.sd-item__control:focus + .sd-item__decorator { +.sd-item__control:focus+.sd-item__decorator { box-shadow: 0 0 0 2px $primary; background: $background; outline: none; @@ -39,7 +39,7 @@ font-family: var(--font-family, $font-family); font-style: normal; font-weight: normal; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); color: $foreground; white-space: normal; @@ -59,4 +59,4 @@ .sd-item--error .sd-item__decorator { background: $red-light; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-list.scss b/src/defaultV2-theme/blocks/sd-list.scss index 36860dfa3e..9ee577a065 100644 --- a/src/defaultV2-theme/blocks/sd-list.scss +++ b/src/defaultV2-theme/blocks/sd-list.scss @@ -5,11 +5,12 @@ .sd-list__item.sd-list__item { padding: 0; + .sd-list__item-body { padding-block: calcSize(1.5); border-radius: calcCornerRadius(1); font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } } @@ -19,4 +20,4 @@ } outline: none; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss index f884ace6fb..62b6308543 100644 --- a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss +++ b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss @@ -21,7 +21,7 @@ appearance: none; background: transparent; border: none; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); font-family: var(--font-family, $font-family); font-weight: 600; diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss index ade28e39cb..a67ebc0715 100644 --- a/src/defaultV2-theme/blocks/sd-paneldynamic.scss +++ b/src/defaultV2-theme/blocks/sd-paneldynamic.scss @@ -8,12 +8,12 @@ transform: translateY(-1px); } - & > .sd-panel { + &>.sd-panel { padding-top: 1px; padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); } - & .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header { + & .sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header { padding-bottom: 0; &:after { @@ -22,14 +22,14 @@ padding-top: calc(0.5 * var(--sd-base-vertical-padding) + #{$base-unit}); - & > .sd-panel__title { + &>.sd-panel__title { color: $foreground-light; } } } -.sd-question__content:first-child > .sd-paneldynamic { - & > .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header { +.sd-question__content:first-child>.sd-paneldynamic { + &>.sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header { padding-top: var(--sd-base-vertical-padding); } } @@ -130,7 +130,7 @@ } .sd-question--empty.sd-question--paneldynamic { - & > .sd-question__content { + &>.sd-question__content { padding-bottom: var(--sd-base-padding); } } @@ -214,19 +214,23 @@ padding: calcSize(1); width: auto; border-radius: calcSize(12.5); + use { fill: $foreground-light; opacity: 0.5; } } + .sd-tab-item--icon:hover, .sd-tab-item--icon.sd-tab-item--pressed { background-color: $primary-light; box-shadow: none; + use { fill: $primary; } } + .sd-tab-item--icon:hover { use { opacity: 1; @@ -236,18 +240,19 @@ .sd-tabs-toolbar .sv-dots { width: auto; } + .sd-tabs-toolbar .sv-dots.sv-action--hidden { width: 0; } .sd-tab-item__title { - line-height: calcSize(3); + line-height: calcLineHeight(1.5); height: calcSize(3); display: flex; align-items: center; } -.sd-question__title ~ .sd-tabs-toolbar { +.sd-question__title~.sd-tabs-toolbar { margin-top: calcSize(3); } @@ -257,4 +262,4 @@ .sd-paneldynamic__header.sd-element__header.sd-paneldynamic__header-tab::after { bottom: 0; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-progress-buttons.scss b/src/defaultV2-theme/blocks/sd-progress-buttons.scss index 8dc91e090f..5755c2be46 100644 --- a/src/defaultV2-theme/blocks/sd-progress-buttons.scss +++ b/src/defaultV2-theme/blocks/sd-progress-buttons.scss @@ -1,18 +1,22 @@ .sd-progress-buttons__image-button-left { display: none; } + .sd-progress-buttons__image-button-right { display: none; } + .sd-progress-buttons__image-button--hidden { visibility: hidden; } + .sd-progress-buttons__list { display: flex; list-style-type: none; margin: 0; padding: 0; } + .sd-progress-buttons__list li { text-align: center; flex-grow: 1; @@ -21,12 +25,14 @@ padding-top: calcSize(2); padding-bottom: calcSize(4); cursor: pointer; + &:hover { .sd-progress-buttons__page-title { text-decoration-line: underline; } } } + .sd-progress-buttons__list .sd-progress-buttons__list-element--current, .sd-progress-buttons__list .sd-progress-buttons__list-element--passed { border-top: 2px solid $primary; @@ -39,21 +45,24 @@ } .sd-progress-buttons__list-element--current { + .sd-progress-buttons__page-title, .sd-progress-buttons__page-description { color: $primary; } } + .sd-progress-buttons__page-title { width: 100%; font-size: calcFontSize(1); font-weight: 600; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } + .sd-progress-buttons__page-description { width: 100%; font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); font-weight: 600; color: $foreground-light; } \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-progress.scss b/src/defaultV2-theme/blocks/sd-progress.scss index 8b1cd4f36a..18627cec38 100644 --- a/src/defaultV2-theme/blocks/sd-progress.scss +++ b/src/defaultV2-theme/blocks/sd-progress.scss @@ -3,24 +3,28 @@ background-color: $border-light; position: relative; } + .sd-progress__bar { position: relative; height: 100%; background-color: $primary; overflow: hidden; } + .sd-progress__text { position: absolute; margin-top: calcSize(1); right: calcSize(3); color: $foreground-light; font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); font-weight: 600; + @media only screen and (min-width: calcSize(125)) { margin-left: 5%; } + @media only screen and (max-width: calcSize(125)) { margin-left: 10px; } -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss index 6da2384e8c..9ee8e6c027 100644 --- a/src/defaultV2-theme/blocks/sd-question.scss +++ b/src/defaultV2-theme/blocks/sd-question.scss @@ -6,33 +6,39 @@ padding: calcSize(1) calcSize(1.5); border-radius: calcCornerRadius(1); font-weight: 600; - line-height: calcSize(2); + line-height: calcLineHeight(1); font-size: calcFontSize(0.75); white-space: normal; text-align: left; } + .sd-question__erbox--outside-question { width: 100%; color: $red; background-color: $red-light; box-sizing: border-box; } + .sd-question__erbox--above-question { border-radius: calcCornerRadius(1) calcCornerRadius(1) 0 0; margin-bottom: calc(var(--sd-base-vertical-padding) - #{$base-unit}); } + .sd-question__erbox--below-question { margin-top: calcSize(1); } -.sd-element--with-frame > .sd-question__erbox--below-question { + +.sd-element--with-frame>.sd-question__erbox--below-question { position: relative; margin-top: 0; bottom: calc(-1 * var(--sd-base-padding)); border-radius: 0 0 calcCornerRadius(1) calcCornerRadius(1); } + .sd-root-modern--mobile .sd-question__erbox--below-question { margin-top: calcSize(1); } + .sd-question__header { width: 100%; } @@ -40,28 +46,33 @@ .sd-question__header--location-top { padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); } + .sd-question__header--location--bottom { padding-top: calc(0.5 * var(--sd-base-vertical-padding)); } + .svc-logic-question-value, .sd-element--with-frame { - & > .sd-question__erbox--outside-question { + &>.sd-question__erbox--outside-question { margin-left: calc(-1 * var(--sd-base-padding)); margin-right: calc(-1 * var(--sd-base-padding)); width: calc(100% + 2 * var(--sd-base-padding)); } - & > .sd-question__erbox--above-question { + &>.sd-question__erbox--above-question { margin-top: calc(-1 * var(--sd-base-padding)); margin-bottom: var(--sd-base-vertical-padding); } - & > .sd-question__header--location-top { + + &>.sd-question__header--location-top { margin-top: calcSize(-1); } - & > .sd-question__content > .sd-question__header--location--bottom { + + &>.sd-question__content>.sd-question__header--location--bottom { margin-bottom: calcSize(-1); } } + .sd-scrollable .sd-question__content { overflow-x: auto; padding: calcSize(2) 0; @@ -85,10 +96,12 @@ padding-left: calcSize(3); flex: 1; } + .sd-question__required-text { color: $red; vertical-align: top; } + .sd-question__comment-area { font-size: calcFontSize(1); margin-top: calcSize(2); @@ -98,6 +111,7 @@ color: $foreground; white-space: normal; } + .sd-question__erbox--tooltip { display: none; position: fixed; @@ -113,9 +127,11 @@ box-shadow: 0px 2px 6px $shadow-medium; z-index: 1000; } -.sd-question__content:hover:not(:focus-within) > .sd-question__erbox--tooltip { + +.sd-question__content:hover:not(:focus-within)>.sd-question__erbox--tooltip { display: block; } + .sd-question__erbox--location--top, .sd-question__erbox--location--bottom { display: block; @@ -126,13 +142,15 @@ } .sd-question--empty.sd-question--complex { - & > .sd-question__header--location-top { + &>.sd-question__header--location-top { padding-bottom: calc(0.5 * var(--sd-base-vertical-padding)); + &:after { display: none; } } } + .sd-question__placeholder { display: flex; flex-direction: column; @@ -141,27 +159,31 @@ gap: calcSize(0.5); justify-content: center; min-height: calcSize(24); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); font-size: calcFontSize(1); color: $foreground-light; - & > div, - & > span { + + &>div, + &>span { .sv-string-viewer { white-space: pre-line; } } } + .sd-question--empty.sd-question--complex { - & > .sd-question__content { + &>.sd-question__content { padding-top: 0; padding-bottom: 0; } - & > .sd-question__content:first-child { + + &>.sd-question__content:first-child { padding-top: var(--sd-base-padding); } } + .sd-scrollable-container:not(.sd-scrollable-container--compact) { width: max-content; overflow-x: hidden; max-width: 100%; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-ranking.scss b/src/defaultV2-theme/blocks/sd-ranking.scss index 6f94bced16..7e5ac415af 100644 --- a/src/defaultV2-theme/blocks/sd-ranking.scss +++ b/src/defaultV2-theme/blocks/sd-ranking.scss @@ -28,5 +28,5 @@ } .sv-ranking-item__content.sd-ranking-item__content { - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss index fc72b274e3..27833337aa 100644 --- a/src/defaultV2-theme/blocks/sd-rating.scss +++ b/src/defaultV2-theme/blocks/sd-rating.scss @@ -26,6 +26,7 @@ flex-wrap: wrap; } } + &.sd-scrollable-container:not(.sd-scrollable-container--compact) { overflow: visible; } @@ -327,7 +328,7 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley { font-weight: $font-editorfont-weight; color: $font-editorfont-color; font-size: $font-editorfont-size; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); display: inline-block; &.sd-rating__min-text, diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index 0ff033b267..26a4b22e45 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -4,27 +4,35 @@ border-collapse: collapse; white-space: normal; } + .sd-table--align-top { .sd-table__cell { vertical-align: top; } } + .sd-table--alternate-rows { margin: 0 8px; width: calc(100% - 2 * #{$base-unit}); + .sd-table__cell:first-of-type { padding-left: calcSize(2); } + .sd-table__cell:last-of-type { padding-right: calcSize(2); } + .sd-table__row:nth-of-type(odd) { - & > td, + + &>td, td:first-of-type { background-color: $background-dim-light; + .sd-input { background-color: $primary-foreground; } + .sd-item__decorator { --sd-item-default-background: var(--primary-foreground, #fff); } @@ -35,11 +43,12 @@ .sd-table__cell { font-weight: normal; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); padding: calcSize(1); color: $foreground; text-align: center; } + .sd-table__cell--item { .sd-selectbase__item { text-align: center; @@ -49,24 +58,30 @@ justify-content: center; } } + .sd-question--disabled .sd-table__cell { opacity: 0.25; } + .sd-root--readonly .sd-question--disabled .sd-table__cell { opacity: 1; } + .sd-table__cell--header { font-weight: 600; vertical-align: top; padding: calcSize(1.5) calcSize(1) calcSize(2.5); + &:not(.sd-table__cell--empty) { min-width: calcSize(14); } } + .sd-matrixdropdown .sd-table__cell--header.sd-table__cell--empty { min-width: calcSize(14); width: calcSize(14); } + .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) { min-width: calcSize(14); width: calcSize(14); @@ -76,27 +91,33 @@ min-width: calcSize(22); width: calcSize(22); } + &.sd-table__cell--boolean { min-width: calcSize(18); width: calcSize(18); } } + .sd-table__cell--detail-panel { padding: 0 calcSize(1) calcSize(1); } + .sd-table__cell--actions, .sd-matrixdynamic__add-btn { .sv-action-bar { overflow: visible; } + .svc-string-editor__button--done { width: calcSize(2); } } + .svc-question__content .sd-table__cell--actions { .sv-action-bar-item:disabled { background: $background; opacity: 1; + use { fill: $foreground-light; } @@ -114,13 +135,16 @@ width: calcSize(4); height: calcSize(4); padding: calcSize(1); + svg { width: calcSize(2); height: calcSize(2); fill: $foreground-light; } + &:hover { background: $green-light; + svg { fill: $primary; } @@ -129,40 +153,49 @@ .sd-table__cell--actions { white-space: nowrap; + &.sd-table__cell--vertical .sd-action-bar { justify-content: center; } } + .sd-table__cell--row-text { font-weight: 600; text-align: left; min-width: calcSize(12); padding: calcSize(2.5) calcSize(1); } + .sd-matrixdynamic__content .sd-table__question-wrapper { position: relative; } + .sd-table__question-wrapper:not(:focus-within):hover { position: relative; + .sd-question__erbox--tooltip { display: inline-block; } } + .sd-table__cell--actions:not(.sd-table__cell--vertical), .sd-table__cell--empty, .sd-table__cell--row-text, .sd-matrix__cell:first-of-type, -.sd-matrix tr > td:first-of-type { +.sd-matrix tr>td:first-of-type { position: sticky; background: $question-background; z-index: 12; + &:first-of-type { left: calcSize(-1); } + &:last-of-type { right: calcSize(-1); } } + .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child { .sd-action-bar { margin-right: calcSize(-3); @@ -170,15 +203,18 @@ background: $question-background; } } + .sd-question.sd-question--table { position: relative; overflow-x: auto; } + .sd-table-wrapper { display: flex; margin: 0 calc(-1 * var(--sd-base-padding)); width: fit-content; min-width: calc(100% + 2 * var(--sd-base-padding)); + &:before, &:after { content: ""; @@ -190,26 +226,33 @@ background: $question-background; z-index: 11; } + &::before { left: calc(-1 * var(--sd-base-padding)); } + &:after { right: calc(-1 * var(--sd-base-padding)); } - & > * { + + &>* { flex-basis: 100%; } } + .sd-question--table { - & > .sd-question__header, + + &>.sd-question__header, .sd-question__description--under-input .sv-string-viewer { position: sticky; left: 0; } - & > .sd-question__content { + + &>.sd-question__content { padding-top: calcSize(2.5); min-width: min-content; } + &:not(.sd-element--with-frame) { padding-right: var(--sd-base-padding); margin-right: calc(-1 * var(--sd-base-padding)); @@ -218,30 +261,36 @@ box-sizing: content-box; } } + .sd-question--scroll { overflow-x: scroll; } + .sd-matrixdropdown.sd-table { table-layout: fixed; } @mixin table_responsive { .sd-question.sd-question--table { - & > .sd-question__content { + &>.sd-question__content { padding-top: 0; } } + .sd-question--table, .sd-question--scroll { overflow-x: visible; } + .sd-table__cell.sd-matrix__cell { display: flex; align-items: flex-start; + .sd-matrix__responsive-title { margin-left: calcSize(1); text-align: left; } + &:first-of-type { padding-top: calcSize(2); padding-bottom: calcSize(1); @@ -251,13 +300,15 @@ .sd-table thead { display: none; } + .sd-table { tr { display: block; } } + .sd-matrix__table { - tr + tr { + tr+tr { margin-top: calcSize(1); } } @@ -265,6 +316,7 @@ .sd-table:not(.sd-matrix__table) { tr { padding-bottom: calcSize(1); + &::after { z-index: 12; content: " "; @@ -279,9 +331,11 @@ } } } + .sd-matrix__label { justify-content: start; } + .sd-table__cell { display: block; padding-top: 0; @@ -292,6 +346,7 @@ .sd-table__cell:not(.sd-matrix__cell):not(:first-of-type) { margin-top: calcSize(1); } + .sd-table__cell:not(.sd-matrix__cell):not(.sd-table__cell--actions):not(.sd-table__cell--row-text) { &::before { padding-top: calcSize(2); @@ -302,8 +357,10 @@ text-align: left; } } + .sd-table__cell.sd-table__cell--actions { width: auto; + .sd-action-bar { margin-right: calcSize(-3); justify-content: flex-end; @@ -314,40 +371,49 @@ .sd-action.sd-action.sd-matrixdynamic__remove-btn { opacity: 1; padding: calcSize(1) calcSize(3); + .sd-action__icon { display: none; } + &:after { content: attr(title); } } + .sd-matrixdynamic__footer { padding-top: calcSize(1); margin-bottom: calcSize(-2); } + .sd-table__cell--row-text:not(.sd-matrix__cell) { color: $foreground-light; padding-top: calcSize(2); } + .sd-matrixdropdown.sd-table { tr:not(:last-child) { padding-bottom: calcSize(2); } + tr::after { bottom: calcSize(-2); } + tr:last-child:after { content: none; } } } + .sd-table__cell--detail-panel { .sd-panel__content { padding-top: calcSize(1); } } + .sd-table__question-wrapper { .sd-boolean-root { - margin: auto; - } + margin: auto; + } } \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-tagbox.scss b/src/defaultV2-theme/blocks/sd-tagbox.scss index 3fd09b22c2..75bca79271 100644 --- a/src/defaultV2-theme/blocks/sd-tagbox.scss +++ b/src/defaultV2-theme/blocks/sd-tagbox.scss @@ -112,8 +112,9 @@ } .sd-tagbox.sd-tagbox--empty { + .sd-tagbox__hint, - .sd-tagbox__hint-suffix-wrapper, + .sd-tagbox__hint-suffix-wrapper, .sd-tagbox__filter-string-input { width: 100%; } @@ -131,10 +132,10 @@ .sd-dropdown__hint-suffix.sd-tagbox__hint-suffix { height: calcSize(5); - line-height: calcSize(5); + line-height: calcLineHeight(2.5); } .sd-dropdown__hint-prefix.sd-tagbox__hint-prefix { height: calcSize(5); - line-height: calcSize(5); -} + line-height: calcLineHeight(2.5); +} \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss index e32b1d2f3d..f628fbd4c3 100644 --- a/src/defaultV2-theme/blocks/sd-title.scss +++ b/src/defaultV2-theme/blocks/sd-title.scss @@ -41,13 +41,13 @@ } h3 { - line-height: calcSize(5); + line-height: calcLineHeight(2.5); } h5 { font-size: calcFontSize(1); font-weight: 400; - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } } @@ -103,4 +103,4 @@ .sd-action-title-bar.sd-action-bar--empty { min-width: 0; -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/defaultV2.m600.scss b/src/defaultV2-theme/defaultV2.m600.scss index 2c947cf0d7..d304714b3d 100644 --- a/src/defaultV2-theme/defaultV2.m600.scss +++ b/src/defaultV2-theme/defaultV2.m600.scss @@ -17,12 +17,15 @@ .sd-element__num { @include num_inline(); } + .sd-element__title--expandable:before { left: calcSize(-2.5); } + .sd-title.sd-container-modern__title { flex-direction: column; } + .sd-header__text { min-width: 100%; } @@ -30,17 +33,20 @@ //multipletext responsiveness .sd-multipletext__cell { display: block; + &:not(:last-child) { padding-right: 0; padding-bottom: calcSize(2); } } + .sd-multipletext__item-container { flex-direction: column; } + .sd-multipletext__item-title { font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); height: calcSize(2); padding-right: 0; border-right: none; @@ -49,23 +55,28 @@ width: 100%; max-width: none; } + .sd-multipletext__item { width: 100%; } + .sd-multipletext__item .sd-input { padding-right: 0; padding-left: 0; margin-top: 0; margin-bottom: calcSize(1); } + //eo multipletext responsiveness .sd-selectbase--multi-column { flex-direction: column; + .sd-selectbase__column:not(:last-child) { padding-right: 0; } } + @include table_responsive(); @include ranking_responsive(); } -} +} \ No newline at end of file diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss index 5b439206cc..865bc1aac5 100644 --- a/src/defaultV2-theme/variables.scss +++ b/src/defaultV2-theme/variables.scss @@ -97,6 +97,11 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px)); @return $result; } +@function calcLineHeight($multiplier) { + $result: calc(#{$multiplier} * #{$font-size}); + @return $result; +} + @function calcCornerRadius($multiplier) { $result: calc(#{$multiplier} * #{$corner-radius}); @return $result; @@ -107,7 +112,7 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px)); font-style: normal; font-weight: 600; font-size: calcFontSize(0.75); - line-height: calcSize(2); + line-height: calcLineHeight(1); } @mixin defaultBold { @@ -115,14 +120,14 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px)); font-style: normal; font-weight: 600; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } @mixin defaultFont { font-family: var(--font-family, $font-family); font-style: normal; font-size: calcFontSize(1); - line-height: calcSize(3); + line-height: calcLineHeight(1.5); } @mixin borderLight {