Fix Deprecation warnings caused by declarations after nested blocks. (#…

…7249)

* Fix Deprecation warnings caused by declarations after nested blocks.
See: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
* Remove redundant font-size rule

CHANGES.md

@@ -6,6 +6,7 @@
   - getFeaturesFromPickResult now async to handle I3SNode.loadFields()
   - extract common style logic to new Cesium3dTilesStyleMixin.ts
 - Set default value for date and datetime WPS fields only when the field is marked as required.
+- Fix Sass deprecation warnings (declarations after nested blocks)
 - Fix legend shown for WMS difference output item
 - Add `diffItemProperties` trait to override properties of WSM difference output item. Useful for customizing feature info template strings etc.
 - Add Proj4 definition for EPSG:8059

lib/ReactViews/StandardUserInterface/standard-user-interface.scss

@@ -40,15 +40,15 @@
 .ui-root {
   // This is a workaround for a bug in IE11 on Windows 7.
   // https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom
-  svg use {
-    pointer-events: none;
-  }
   position: relative;
   flex-basis: 100%;
   height: 100vh;
   @media (max-width: $sm) {
     position: unset;
   }
+  svg use {
+    pointer-events: none;
+  }
 }
 
 .ui {
@@ -153,8 +153,6 @@
 }
 
 @media (min-width: $sm) {
-  .ui {
-  }
   .uiInner {
     display: flex;
     overflow: hidden;

lib/ReactViews/Story/story-editor.scss

@@ -2,10 +2,6 @@
 @import "../../Sass/common/mixins";
 
 .popupEditor {
-  &.is-mounted {
-    opacity: 1;
-    @include transform(none);
-  }
   @include transform(translateY(20%));
   opacity: 0;
   @include transition(all 0.3s);
@@ -19,6 +15,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  &.is-mounted {
+    opacity: 1;
+    @include transform(none);
+  }
   .inner {
     max-width: 800px;
     width: 80vw;

lib/ReactViews/Story/story-panel.scss

@@ -2,10 +2,6 @@
 @import "../../Sass/common/mixins";
 
 .story-container {
-  &.is-mounted {
-    opacity: 1;
-    @include transform(none);
-  }
   @include transform(translateY(20%));
   opacity: 0;
   @include transition(all 0.3s);
@@ -20,6 +16,11 @@
   box-sizing: border-box;
   box-shadow: 0 0 15px 6px rgba(100, 100, 100, 0.3);
 
+  &.is-mounted {
+    opacity: 1;
+    @include transform(none);
+  }
+
   .left {
     border-right: 1px solid $field-border;
   }

lib/ReactViews/Workbench/Controls/legend.scss

@@ -4,15 +4,13 @@
   composes: clearfix from "../../../Sass/common/_base.scss";
   composes: list-reset from "../../../Sass/common/_base.scss";
   font-family: $font-mono;
-  font-size: $font-size-small;
+  // Small font size prevents the font from dictating the table row height.
+  font-size: 5px;
 
   li {
     display: block;
   }
 
-  // Small font size prevents the font from dictating the table row height.
-  font-size: 5px;
-
   .legendOpenExternally {
     font-size: $font-size-small;
     color: $text-light;
@@ -25,11 +23,11 @@
 }
 
 .legend__inner {
+  padding: $padding 0 0 0;
   a {
     // Only the actual legend should be clickable rather than the whole area
     display: inline-block;
   }
-  padding: $padding 0 0 0;
 }
 
 .legend__legendBoxImg {

lib/Sass/common/_base.scss

@@ -429,6 +429,16 @@
 // This is what happens when we mess up with CSS Modules so make it SUPER SUPER OBVIOUS
 // TODO: Remove in build
 .undefined {
+  position: relative;
+  background: #f00 !important;
+  color: magenta !important;
+  border: 3px orange dashed !important;
+
+  animation-name: flash;
+  animation-duration: 1s;
+  animation-timing-function: step-start;
+  animation-iteration-count: infinite;
+
   &:before {
     position: fixed !important;
     top: 0 !important;
@@ -439,16 +449,6 @@
     opacity: 1 !important;
     z-index: 100000 !important;
   }
-
-  position: relative;
-  background: #f00 !important;
-  color: magenta !important;
-  border: 3px orange dashed !important;
-
-  animation-name: flash;
-  animation-duration: 1s;
-  animation-timing-function: step-start;
-  animation-iteration-count: infinite;
 }
 
 @keyframes flash {

lib/Sass/common/_buttons.scss

@@ -153,23 +153,22 @@ $btn-setting-size: 35px;
 
 .btn--catalog {
   padding: $padding 30px + $padding;
-  @media (min-width: $sm) {
-    padding: $padding-small 30px + $padding;
-  }
-
   position: relative;
   width: 100%;
   font-weight: bold;
+  @media (min-width: $sm) {
+    padding: $padding-small 30px + $padding;
+  }
   .btn--group-indicator {
     position: absolute;
     left: 0;
     padding: $padding $padding * 2.2 $padding $padding * 1.5;
-    @media (min-width: $sm) {
-      padding: $padding-small $padding * 2.2 $padding-small $padding * 1.5;
-    }
     top: 0;
     font-size: $font-size-mid-large;
     opacity: 0.5;
+    @media (min-width: $sm) {
+      padding: $padding-small $padding * 2.2 $padding-small $padding * 1.5;
+    }
   }
   &:before {
     position: absolute;