fix: Sass nested rule deprecation warnings by moving CSS parts

fix all of the following warnings when building (i.e. "yarn build"): ``` 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. To opt into the new behavior, wrap the declaration in `& {}`. More info: https://sass-lang.com/d/mixed-decls ``` by moving CSS parts around, I checked that there were no dependencies between the moved CSS parts that would make the end result functionally different if they were moved. refs KK-1372
City-of-Helsinki · Dec 17, 2024 · ac2529e · ac2529e
1 parent bef6e02
commit ac2529e
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 38 deletions.
diff --git a/src/domain/app/layout/listPageLayout.module.scss b/src/domain/app/layout/listPageLayout.module.scss
@@ -39,6 +39,7 @@ $backButtonAsideBreakpoint: $backButtonWidth + variables.$breakpoint-xl;
     'content content'
     'actions actions';
   row-gap: variables.$spacing-layout-xs;
+  margin-top: variables.$spacing-layout-s;
   align-items: center;
 
   @include layout.respond-above(m) {
@@ -71,8 +72,6 @@ $backButtonAsideBreakpoint: $backButtonWidth + variables.$breakpoint-xl;
     grid-area: actions;
   }
 
-  margin-top: variables.$spacing-layout-s;
-
   // Remove margin from text elements so that we can control them with
   // gaps.
   & * {

diff --git a/src/domain/app/layout/utilityComponents/infoTemplate.module.scss b/src/domain/app/layout/utilityComponents/infoTemplate.module.scss
@@ -2,15 +2,10 @@
 @use '~styles/variables';
 
 .infoPageLayout {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
   color: variables.$color-black-90;
 
   .infoPageLayoutFace {
@@ -31,6 +26,10 @@
     font-size: variables.$fontsize-body-l;
     text-align: center;
   }
+
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
 }
 
 .callToActionButton {

diff --git a/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss b/src/domain/app/layout/utilityComponents/simpleFormTemplate.module.scss
@@ -2,10 +2,6 @@
 @use '~styles/variables';
 
 .simpleFormPageLayout {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -36,4 +32,8 @@
     width: min-content;
     max-width: variables.$container-width-s;
   }
+
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
 }
diff --git a/src/domain/app/notFound/notFound.module.scss b/src/domain/app/notFound/notFound.module.scss
@@ -6,18 +6,18 @@
   align-self: center;
 
   .returnLink {
-    width: 50%;
-    @include layout.respond-below(m) {
-      width: 80%;
-    }
-
     display: block;
     margin: variables.$largeMargin auto auto auto;
     background: variables.$color-summer;
     box-sizing: border-box;
     text-decoration: none;
     padding: variables.$basePadding;
     color: variables.$color-black;
+
+    width: 50%;
+    @include layout.respond-below(m) {
+      width: 80%;
+    }
   }
 }
 

diff --git a/src/domain/event/event.module.scss b/src/domain/event/event.module.scss
@@ -80,18 +80,18 @@
 }
 
 .eventWrapper {
+  display: grid;
   @include layout.respond-above(l) {
     z-index: 1;
   }
-  display: grid;
   .event {
+    background-color: var(--color-white);
     @include layout.respond-above(l) {
       padding: variables.$largePadding;
       h1 {
         margin-top: 0;
       }
     }
-    background-color: var(--color-white);
   }
   @include layout.respond-below(l) {
     padding: 0 variables.$basePadding;
@@ -111,12 +111,13 @@
   background: variables.$color-fog-medium-light;
   box-sizing: border-box;
   padding: variables.$spacing-2-xs;
+  display: block;
 
   width: 100%;
   @include layout.respond-above(l) {
     width: auto;
   }
-  display: block;
+
   .label {
     display: inline-flex;
     width: min-content;

diff --git a/src/domain/home/form/homePreliminaryForm.module.scss b/src/domain/home/form/homePreliminaryForm.module.scss
@@ -28,11 +28,11 @@
 }
 
 .submitButton {
+  justify-self: center;
   width: 80%;
   @include layout.respond-above(m) {
     width: 60%;
   }
-  justify-self: center;
 }
 
 .heading {

diff --git a/src/domain/home/hero/hero.module.scss b/src/domain/home/hero/hero.module.scss
@@ -24,14 +24,14 @@
 
 .kidsImage {
   grid-column: 2;
-  min-height: calc(0.265 * 100vw);
-  @media (min-width: map.get(layout.$breakpoints, xl-minus)) {
-    min-height: 0.265 * variables.$containerMaxWidth;
-  }
   background-image: url('/images/[email protected]');
   background-repeat: no-repeat;
   background-position: center bottom -2px;
   background-size: 100% auto;
+  min-height: calc(0.265 * 100vw);
+  @media (min-width: map.get(layout.$breakpoints, xl-minus)) {
+    min-height: 0.265 * variables.$containerMaxWidth;
+  }
 }
 
 .heroContainer {

diff --git a/src/domain/home/partners/partnerLogoList.module.scss b/src/domain/home/partners/partnerLogoList.module.scss
@@ -3,6 +3,7 @@
 
 .big {
   display: grid;
+  margin-bottom: variables.$largeMargin;
   @include layout.respond-below(l) {
     justify-content: center;
     gap: 2em;
@@ -11,7 +12,6 @@
     grid-template-columns: repeat(2, 1fr);
     gap: variables.$xlargeMargin;
   }
-  margin-bottom: variables.$largeMargin;
 
   .container {
     @include layout.respond-above(m) {

diff --git a/src/domain/profile/modal/editProfileModal.module.scss b/src/domain/profile/modal/editProfileModal.module.scss
@@ -35,30 +35,28 @@
 
 .buttonsWrapper {
   display: grid;
-  @include layout.respond-above(m) {
-    grid-template-columns: 1fr 1fr;
-  }
   grid-gap: variables.$baseMargin;
   margin: variables.$largeMargin 0;
   button: {
     width: 100%;
   }
+  @include layout.respond-above(m) {
+    grid-template-columns: 1fr 1fr;
+  }
 }
 
 .cancelButton {
+  width: 100%;
   @include layout.respond-below(m) {
     grid-row: 2;
   }
-
-  width: 100%;
 }
 
 .submitButton {
+  width: 100%;
   @include layout.respond-below(m) {
     grid-row: 1;
   }
-
-  width: 100%;
 }
 
 .profileName {

diff --git a/src/domain/registration/form/partial/childFormFields.module.scss b/src/domain/registration/form/partial/childFormFields.module.scss
@@ -17,12 +17,12 @@ $childIconHeight: 4rem;
 
 .childName,
 .childFixedInfo {
+  padding: variables.$baseMargin 0;
   @include layout.respond-above(l) {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: variables.$baseMargin;
   }
-  padding: variables.$baseMargin 0;
 }
 
 .childBirthyear,

diff --git a/src/domain/registration/form/registrationForm.module.scss b/src/domain/registration/form/registrationForm.module.scss
@@ -59,10 +59,10 @@ $plusIconHeight: 2rem;
 }
 
 .registrationGrayContainer {
+  margin: variables.$baseMargin;
   > * {
     grid-column: 2;
   }
-  margin: variables.$baseMargin;
 }
 
 .guardianInfo {

diff --git a/src/domain/registration/notEligible/notEligible.module.scss b/src/domain/registration/notEligible/notEligible.module.scss
@@ -2,16 +2,16 @@
 @use '~styles/variables';
 
 .notEligible {
-  @include layout.respond-below(l) {
-    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
-  }
-
   font-weight: bold;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
+  @include layout.respond-below(l) {
+    margin: 0 variables.$baseMargin variables.$largeMargin variables.$baseMargin;
+  }
+
   .notEligibleFace {
     height: 4rem;
     width: 4rem;