From fb239d4761e150d841ffee3a59ff6f4ddab1654b Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Tue, 16 Jul 2024 09:46:38 +0300 Subject: [PATCH] fix Deprecation Warning: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. (#8564) Co-authored-by: OlgaLarina --- src/common-styles/sv-brand-info.scss | 4 +-- src/common-styles/window.scss | 3 ++- src/defaultV2-theme/blocks/sd-boolean.scss | 3 +-- .../blocks/sd-context-btn.scss | 3 +-- src/defaultV2-theme/blocks/sd-file.scss | 18 ++++++------- src/defaultV2-theme/blocks/sd-list.scss | 4 +-- .../blocks/sd-paneldynamic.scss | 3 +-- src/defaultV2-theme/blocks/sd-table.scss | 4 +-- src/defaultV2-theme/defaultV2.fontless.scss | 4 +-- src/main.scss | 26 ++++++++----------- src/modern/blocks/sv-container.scss | 7 +++-- src/modern/blocks/sv-dropdown.scss | 7 +++-- src/modern/blocks/sv-rating.scss | 15 +++++------ 13 files changed, 45 insertions(+), 56 deletions(-) diff --git a/src/common-styles/sv-brand-info.scss b/src/common-styles/sv-brand-info.scss index 41914a96f2..4da7b8a629 100644 --- a/src/common-styles/sv-brand-info.scss +++ b/src/common-styles/sv-brand-info.scss @@ -29,11 +29,11 @@ sv-brand-info, .sv-brand-info { } .sv-brand-info__logo { + display: inline-block; + img { width: 118px; } - - display: inline-block; } .sv-brand-info__terms { diff --git a/src/common-styles/window.scss b/src/common-styles/window.scss index 8afd5c9ea6..1b6eebf2fb 100644 --- a/src/common-styles/window.scss +++ b/src/common-styles/window.scss @@ -13,10 +13,11 @@ z-index: 100; max-height: 50vh; overflow: auto; - @include scrollRules; box-sizing: border-box; background: $background-dim; width: calc(100% - calcSize(4)) !important; + + @include scrollRules; } .sv_window_root-content { diff --git a/src/defaultV2-theme/blocks/sd-boolean.scss b/src/defaultV2-theme/blocks/sd-boolean.scss index e85ccfd325..bafa3b52e7 100644 --- a/src/defaultV2-theme/blocks/sd-boolean.scss +++ b/src/defaultV2-theme/blocks/sd-boolean.scss @@ -72,14 +72,13 @@ transition-timing-function: linear; color: $primary; font-weight: 600; + z-index: 2; .sv-string-viewer { &.sv-string-viewer--multiline { white-space: nowrap; } } - - z-index: 2; } .sd-boolean--checked:not(.sd-boolean--exchanged) .sd-boolean__thumb, diff --git a/src/defaultV2-theme/blocks/sd-context-btn.scss b/src/defaultV2-theme/blocks/sd-context-btn.scss index 0dc7e3ed8e..7115d457f9 100644 --- a/src/defaultV2-theme/blocks/sd-context-btn.scss +++ b/src/defaultV2-theme/blocks/sd-context-btn.scss @@ -4,6 +4,7 @@ border-radius: calcSize(12.5); border: none; outline: none; + cursor: pointer; .sv-svg-icon { margin: 0; @@ -20,8 +21,6 @@ fill: $foreground-light; transition: fill $transition-duration; } - - cursor: pointer; } .sd-context-btn:hover, diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss index e35252978d..f7e9b0103d 100644 --- a/src/defaultV2-theme/blocks/sd-file.scss +++ b/src/defaultV2-theme/blocks/sd-file.scss @@ -369,15 +369,6 @@ } .sd-context-btn.sd-file__take-picture-button { - .sv-svg-icon { - height: calcSize(4); - width: calcSize(4); - - use { - fill: $background; - } - } - background-color: $red; position: absolute; bottom: 16px; @@ -389,6 +380,15 @@ &:focus { box-shadow: 0 0 0 2px $red; } + + .sv-svg-icon { + height: calcSize(4); + width: calcSize(4); + + use { + fill: $background; + } + } } .sd-file__video-container { diff --git a/src/defaultV2-theme/blocks/sd-list.scss b/src/defaultV2-theme/blocks/sd-list.scss index e9a9ddbd64..f6259d35c6 100644 --- a/src/defaultV2-theme/blocks/sd-list.scss +++ b/src/defaultV2-theme/blocks/sd-list.scss @@ -15,9 +15,9 @@ } .sd-list__item.sd-list__item--focused:not(.sd-list__item--selected) { + outline: none; + .sd-list__item-body { padding-block: calcSize(1.25); } - - outline: none; } \ No newline at end of file diff --git a/src/defaultV2-theme/blocks/sd-paneldynamic.scss b/src/defaultV2-theme/blocks/sd-paneldynamic.scss index 0d18471223..736d94eaff 100644 --- a/src/defaultV2-theme/blocks/sd-paneldynamic.scss +++ b/src/defaultV2-theme/blocks/sd-paneldynamic.scss @@ -14,14 +14,13 @@ } & .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header { + padding-top: var(--sd-base-vertical-padding); padding-bottom: 0; &:after { display: none; } - padding-top: var(--sd-base-vertical-padding); - & > .sd-panel__title { color: $foreground-light; } diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index 4e70a5df38..f190d63e27 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -586,6 +586,8 @@ } tr:not(.sd-table__row--has-end-actions) { + padding-bottom: calcSize(0); + &:not(:last-of-type) { padding-bottom: calcSize(3); @@ -593,8 +595,6 @@ bottom: calcSize(-3); } } - - padding-bottom: calcSize(0); } tfoot tr::before, diff --git a/src/defaultV2-theme/defaultV2.fontless.scss b/src/defaultV2-theme/defaultV2.fontless.scss index 38f5291f38..25d2fa45fa 100644 --- a/src/defaultV2-theme/defaultV2.fontless.scss +++ b/src/defaultV2-theme/defaultV2.fontless.scss @@ -60,8 +60,6 @@ body { } .sd-root-modern { - @include scrollRules; - -webkit-font-smoothing: antialiased; --sd-mobile-width: 600px; --sd-timer-size: calc(18 * #{$base-unit}); @@ -70,6 +68,8 @@ body { background-color: $background-dim; position: relative; + @include scrollRules; + form { // z-index: 1; position: relative; diff --git a/src/main.scss b/src/main.scss index 38b870a398..a4517ebd6a 100644 --- a/src/main.scss +++ b/src/main.scss @@ -115,21 +115,20 @@ body { } .sv_q_dropdown__hint-prefix { + opacity: 0.5; + span { word-break: unset; } - - opacity: 0.5; } .sv_q_dropdown__hint-suffix { display: flex; + opacity: 0.5; span { word-break: unset; } - - opacity: 0.5; } .sv_q_dropdown_control__input-field-component { @@ -337,11 +336,8 @@ body { } } - .sv_q_rating__item-star>svg { - &.sv-star-2 { - display: none; - } - + .sv_q_rating__item-star > svg { + fill: var(--text-color, $text-color); height: 32px; width: 32px; display: inline-block; @@ -351,15 +347,17 @@ body { &:hover { border: 1px solid var(--main-hover-color, $main-hover-color); } - - fill: var(--text-color, $text-color); + &.sv-star-2 { + display: none; + } } - .sv_q_rating__item-star--selected>svg { + .sv_q_rating__item-star--selected > svg { fill: var(--main-color, $main-color); } - .sv_q_rating__item-smiley>svg { + .sv_q_rating__item-smiley > svg { + fill: var(--text-color, $text-color); height: 24px; width: 24px; padding: 4px; @@ -374,8 +372,6 @@ body { &:hover { border: 1px solid var(--main-hover-color, $main-hover-color); } - - fill: var(--text-color, $text-color); } .sv_q_rating__item-smiley--selected>svg { diff --git a/src/modern/blocks/sv-container.scss b/src/modern/blocks/sv-container.scss index ac29b7a4da..71cad5790c 100644 --- a/src/modern/blocks/sv-container.scss +++ b/src/modern/blocks/sv-container.scss @@ -5,7 +5,10 @@ } .sv-container-modern__title { + color: var(--main-color, $main-color); padding-left: 0.55em; + padding-top: 5em; + padding-bottom: 0.9375em; @media only screen and (min-width: 1000px) { margin-right: 5%; @@ -16,10 +19,6 @@ margin-right: 10px; margin-left: 10px; } - - color: var(--main-color, $main-color); - padding-top: 5em; - padding-bottom: 0.9375em; } .sv-container-modern__title h3 { diff --git a/src/modern/blocks/sv-dropdown.scss b/src/modern/blocks/sv-dropdown.scss index b99a421bdb..d612b7cdac 100644 --- a/src/modern/blocks/sv-dropdown.scss +++ b/src/modern/blocks/sv-dropdown.scss @@ -70,23 +70,22 @@ } .sv-dropdown__hint-prefix { + opacity: 0.5; + span { word-break: unset; line-height: 28px; } - - opacity: 0.5; } .sv-dropdown__hint-suffix { display: flex; + opacity: 0.5; span { word-break: unset; line-height: 28px; } - - opacity: 0.5; } .sv-dropdown_clean-button { padding: 3px 12px; diff --git a/src/modern/blocks/sv-rating.scss b/src/modern/blocks/sv-rating.scss index 25b9de326b..6d32cee063 100644 --- a/src/modern/blocks/sv-rating.scss +++ b/src/modern/blocks/sv-rating.scss @@ -52,11 +52,8 @@ } } -.sv-rating__item-star>svg { - &.sv-star-2 { - display: none; - } - +.sv-rating__item-star > svg { + fill: var(--text-color, $text-color); height: 32px; width: 32px; display: inline-block; @@ -66,8 +63,9 @@ &:hover { border: 1px solid var(--main-hover-color, $main-hover-color); } - - fill: var(--text-color, $text-color); + &.sv-star-2 { + display: none; + } } .sv-rating__item-star--selected>svg { @@ -83,6 +81,7 @@ border: 3px solid var(--border-color, $border-color); margin: 3px 0; margin-right: 0.26em; + fill: var(--main-hover-color, $main-hover-color); &>use { display: block; @@ -92,8 +91,6 @@ border: 3px solid var(--main-hover-color, $main-hover-color); background-color: var(--main-hover-color, $main-hover-color); } - - fill: var(--main-hover-color, $main-hover-color); } .sv-rating__item-smiley--selected>svg {