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 <[email protected]>
surveyjs · Jul 16, 2024 · fb239d4 · fb239d4
1 parent ccce5c2
commit fb239d4
Show file tree

Hide file tree

Showing 13 changed files with 45 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }
diff --git 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
@@ -586,15 +586,15 @@
     }
 
     tr:not(.sd-table__row--has-end-actions) {
+      padding-bottom: calcSize(0);
+
       &:not(:last-of-type) {
         padding-bottom: calcSize(3);
 
         &::after {
           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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {