From af673423f9990100400dc505618b3da33402d4f8 Mon Sep 17 00:00:00 2001 From: Lawrence Owen Date: Wed, 21 Aug 2024 12:09:20 +1000 Subject: [PATCH] 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 | 1 + .../standard-user-interface.scss | 8 +++----- lib/ReactViews/Story/story-editor.scss | 8 ++++---- lib/ReactViews/Story/story-panel.scss | 9 +++++---- lib/ReactViews/Workbench/Controls/legend.scss | 8 +++----- lib/Sass/common/_base.scss | 20 +++++++++---------- lib/Sass/common/_buttons.scss | 13 ++++++------ 7 files changed, 32 insertions(+), 35 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 20b4e038346..3828a67e777 100644 --- a/CHANGES.md +++ b/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 diff --git a/lib/ReactViews/StandardUserInterface/standard-user-interface.scss b/lib/ReactViews/StandardUserInterface/standard-user-interface.scss index e8c8a154c58..60a491ec911 100644 --- a/lib/ReactViews/StandardUserInterface/standard-user-interface.scss +++ b/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; diff --git a/lib/ReactViews/Story/story-editor.scss b/lib/ReactViews/Story/story-editor.scss index 7d166eae92b..65a3e8348db 100644 --- a/lib/ReactViews/Story/story-editor.scss +++ b/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; diff --git a/lib/ReactViews/Story/story-panel.scss b/lib/ReactViews/Story/story-panel.scss index 3e922791415..4cc2b38dad1 100644 --- a/lib/ReactViews/Story/story-panel.scss +++ b/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; } diff --git a/lib/ReactViews/Workbench/Controls/legend.scss b/lib/ReactViews/Workbench/Controls/legend.scss index 2d80290343c..6896f67a87f 100644 --- a/lib/ReactViews/Workbench/Controls/legend.scss +++ b/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 { diff --git a/lib/Sass/common/_base.scss b/lib/Sass/common/_base.scss index 3ba9c9e415e..9d83ff804bc 100644 --- a/lib/Sass/common/_base.scss +++ b/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 { diff --git a/lib/Sass/common/_buttons.scss b/lib/Sass/common/_buttons.scss index ccf7bfd0599..84684c7bfa7 100644 --- a/lib/Sass/common/_buttons.scss +++ b/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;