fix: resolve deprecation warnings for sass (#2118)

* fix: resolve deprecation warnings for sass * Loading as module
origo-map · Jan 21, 2025 · ce8377f · ce8377f
1 parent b7713d5
commit ce8377f
Show file tree

Hide file tree

Showing 54 changed files with 697 additions and 594 deletions.
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/scss/_bookmark.scss b/scss/_bookmark.scss
@@ -1,55 +1,57 @@
+@use './ui/variables';
+
 .o-bookmark-button:focus {
-  background-color: $grey-lighter;
+  background-color: variables.$grey-lighter;
 }
 
 .o-bookmark-button.light:focus {
-  background-color: $grey-lighter;
+  background-color: variables.$grey-lighter;
 }
 
 .o-bookmark-button.primary:focus {
-  background-color: $primary-color-dark;
+  background-color: variables.$primary-color-dark;
 }
 
 .o-bookmark-button.danger:focus {
-  background-color: $danger-color-dark;
+  background-color: variables.$danger-color-dark;
 }
 
 .o-bookmark-button.grey-light:focus {
-  background-color: $grey-light;
+  background-color: variables.$grey-light;
 }
 
 .o-bookmark-button.grey-lighter:focus {
-  background-color: $grey-lighter;
+  background-color: variables.$grey-lighter;
 }
 
 .o-bookmark-button.grey-lightest:focus {
-  background-color: $grey-lightest;
+  background-color: variables.$grey-lightest;
 }
 
 .o-bookmark-button:focus:not(:focus-visible) {
-  background-color: $light-color;
+  background-color: variables.$light-color;
 }
 
 .o-bookmark-button.light:focus:not(:focus-visible) {
-  background-color: $light-color;
+  background-color: variables.$light-color;
 }
 
 .o-bookmark-button.primary:focus:not(:focus-visible) {
-  background-color: $primary-color;
+  background-color: variables.$primary-color;
 }
 
 .o-bookmark-button.danger:focus:not(:focus-visible) {
-  background-color: $danger-color;
+  background-color: variables.$danger-color;
 }
 
 .o-bookmark-button.grey-light:focus:not(:focus-visible) {
-  background-color: $grey-light;
+  background-color: variables.$grey-light;
 }
 
 .o-bookmark-button.grey-lighter:focus:not(:focus-visible) {
-  background-color: $grey-lighter;
+  background-color: variables.$grey-lighter;
 }
 
 .o-bookmark-button.grey-lightest:focus:not(:focus-visible) {
-  background-color: $grey-lightest;
+  background-color: variables.$grey-lightest;
 }
diff --git a/scss/_button.scss b/scss/_button.scss
@@ -1,3 +1,5 @@
+@use './variables';
+
 .o-button-container {
   border-radius: 4px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
@@ -9,10 +11,10 @@
 }
 
 .o-button {
-  background-color: $o-btn-bg;
+  background-color: variables.$o-btn-bg;
   border: 0;
   border-radius: 4px;
-  color: $o-btn-color;
+  color: variables.$o-btn-color;
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
@@ -31,8 +33,8 @@
 
 .o-button:hover,
 .o-button:focus {
-  background-color: $o-btn-hover-bg;
-  color: $o-btn-hover-color;
+  background-color: variables.$o-btn-hover-bg;
+  color: variables.$o-btn-hover-color;
   text-decoration: none;
 }
 
@@ -56,12 +58,12 @@
 }
 
 .o-button-lg {
-  background-color: $o-btn-bg;
+  background-color: variables.$o-btn-bg;
   border: 0;
   border-radius: 50%;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
-  color: $o-btn-color;
+  color: variables.$o-btn-color;
   cursor: pointer;
   display: inline-block;
   height: 2.5rem;

diff --git a/scss/_embedded-overlay.scss b/scss/_embedded-overlay.scss
@@ -1,3 +1,5 @@
+@use './ui/variables';
+
 .o-embedded-overlay {
   background-color: rgba(37, 129, 196, 0.5);
   border-width: 0;
@@ -18,7 +20,7 @@
 }
 
 .o-embedded-overlay p {
-  color: $white;
+  color: variables.$white;
   font-family: Roboto,Arial,sans-serif;
   font-size: 20px;
   margin: 0 50px;

diff --git a/scss/_icon.scss b/scss/_icon.scss
@@ -1,6 +1,8 @@
+@use './variables' as vars;
+
 [class^='o-icon-'],
 [class*=' o-icon-'] {
-  fill: $o-btn-color;
+  fill: vars.$o-btn-color;
   float: right;
   height: 1.3em;
   padding: .35em;
@@ -9,7 +11,7 @@
 
 [class^='o-icon-24'],
 [class*=' o-icon-24'] {
-  fill: $o-btn-color;
+  fill: vars.$o-btn-color;
   height: 1.5rem;
   padding: 0;
   width: 1.5rem;
@@ -24,19 +26,19 @@
 
 .o-image-carousel [class^='o-icon-'],
 .o-image-carousel [class*=' o-icon-'] {
-  fill: $o-btn-color;
+  fill: vars.$o-btn-color;
 }
 
 .ol-control>button:hover [class^='o-icon-'],
 .ol-control>button:hover [class*=' o-icon-'],
 .o-button:hover [class^='o-icon-'],
 .o-button:hover [class*='o-icon-'] {
-  fill: $o-btn-bg;
+  fill: vars.$o-btn-bg;
 }
 
 .o-toolbar button:hover [class^='o-icon-'],
 .o-toolbar button:hover [class*='o-icon-'] {
-  fill: $o-btn-active-color;
+  fill: vars.$o-btn-active-color;
 }
 
 button.o-disabled:hover [class^='o-icon-'],

diff --git a/scss/_infowindow.scss b/scss/_infowindow.scss
@@ -1,8 +1,11 @@
 
+@use './ui/variables';
+@use './variables' as vars;
+
 .sidebarcontainer {
   display: flex;
   flex-direction: column;
-  background-color: $white;
+  background-color: variables.$white;
   border-radius: 0.5em;
   box-shadow: 0 0 8px #888;
   font-size: 12px;
@@ -83,7 +86,7 @@
 }
 
 .urvalelement {
-  border-bottom: 3px solid  $white;
+  border-bottom: 3px solid  variables.$white;
   cursor: pointer;
   display: inline-block;
   font-weight: normal;
@@ -208,7 +211,7 @@
 }
 
 .highlighted {
-  background-color: $whitesmoke;
+  background-color: variables.$whitesmoke;
   border-radius: 0 1em 1em 0;
   transition: background-color 0.5s;
   transition: background-color 0.5s;
@@ -239,10 +242,10 @@
 }
 
 .export-button {
-  background-color: $whitesmoke;
+  background-color: variables.$whitesmoke;
   border: 1px solid #ccc;
   border-radius: 2em;
-  color: $black;
+  color: variables.$black;
   font-size: 12px;
   font-weight: normal;
   max-width: 280px;
@@ -295,7 +298,7 @@
   border-radius: 4px;
 }
 
-&[class*=#{$media-l}] {
+[class*=#{vars.$media-l}] {
   .sidebarcontainer {
     left: 50%;
     top: 5em;
@@ -317,13 +320,13 @@
   }
 }
 
-&[class*=#{$media-l-m}] {
+[class*=#{vars.$media-l-m}] {
   .sidebarcontainer {
     width: 250px;
   }
 }
 
-&[class*=#{$media-l-m-s}] {
+[class*=#{vars.$media-l-m-s}] {
   .sidebarcontainer {
     left: 5em;
     transform: none;

diff --git a/scss/_mapmenu.scss b/scss/_mapmenu.scss
@@ -1,10 +1,12 @@
-&[class*=#{$media-l-m-s}] {
+@use './variables' as vars;
+
+[class*=#{vars.$media-l-m-s}] {
   #o-sidebar {
     max-width: 230px;
     width: 100%;
   }
 }
-&[class*=#{$media-l-m-s-xs}] {
+[class*=#{vars.$media-l-m-s-xs}] {
   #o-sidebar {
     display: none;
   }

diff --git a/scss/_measure.scss b/scss/_measure.scss
@@ -1,3 +1,6 @@
+@use './ui/variables';
+@use './variables' as vars;
+
 .o-icon-minicons-square-vector {
   height: 1.4em;
   padding: .3em;
@@ -13,7 +16,7 @@
 .o-tooltip-measure {
   background: rgba(0, 0, 0, 0.4);
   border-radius: 4px;
-  color: $white;
+  color: variables.$white;
   font: 70% normal, sans-serif;
   opacity: 0.6;
   padding: 1px 2px;
@@ -26,7 +29,7 @@
 .o-measure-button-true .o-icon-steady-measure,
 .o-measure-button-true .o-icon-minicons-square-vector,
 .o-measure-button-true .o-icon-minicons-line-vector {
-  fill: $o-btn-active-color;
+  fill: vars.$o-btn-active-color;
 }
 
 .o-measure-snap .icon svg,

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -1,3 +1,6 @@
+@use './ui/variables';
+@use './variables' as vars;
+
 #o-modal {
   font-size: 1em;
   line-height: 1.42857143;
@@ -14,7 +17,7 @@
 }
 
 .o-modal {
-  background-color: $white;
+  background-color: variables.$white;
   border-radius: 6px;
   bottom: auto;
   box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.45);
@@ -73,7 +76,7 @@
   padding: 3px 5px;
 }
 
-&[class*=#{$media-l}] {
+[class*=#{vars.$media-l}] {
   .o-modal {
     max-width: 300px;
     width: 90%;

diff --git a/scss/_o-scale.scss b/scss/_o-scale.scss
@@ -1,7 +1,9 @@
+@use './ui/variables';
+
 .o-scale {
   font-family: Arial, 'Helvetica Neue', sans-serif;
   font-size: .625rem;
-  line-height: $line-height-larger;
+  line-height: variables.$line-height-larger;
   padding-right: 5px;
   padding-right: 10px;
 }
diff --git a/scss/_ol.scss b/scss/_ol.scss
@@ -1,4 +1,4 @@
-@import 'externs/ol';
+@use 'externs/ol';
 
 .ol-attribution li a {
   color: #bbb;

diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -1,3 +1,5 @@
+@use './ui/variables';
+
 .o-popover-container {
   display: inline-block;
   position: relative;
@@ -32,7 +34,7 @@
 }
 
 .o-popover::after {
-  border-top-color: $white;
+  border-top-color: variables.$white;
   border-width: 10px;
   bottom: -20px;
   left: 50%;

diff --git a/scss/_popup.scss b/scss/_popup.scss
@@ -1,3 +1,6 @@
+@use './ui/variables';
+@use './variables' as vars;
+
 #o-popup {
   display: none;
   width: 270px;
@@ -51,31 +54,31 @@
 }
 
 .popup-top-center .o-popup::after {
-  border-bottom-color: $white;
+  border-bottom-color: variables.$white;
   border-width: 10px;
   top: -20px;
   left: 50%;
   margin-left: -10px;
 }
 
 .popup-bottom-center .o-popup::after {
-  border-top-color: $white;
+  border-top-color: variables.$white;
   border-width: 10px;
   bottom: -20px;
   left: 50%;
   margin-left: -10px;
 }
 
 .popup-center-left .o-popup::after {
-  border-right-color: $white;
+  border-right-color: variables.$white;
   border-width: 10px;
   left: -10px;
   top: calc(50% - 6px);
   margin-left: -10px;
 }
 
 .popup-center-right .o-popup::after {
-  border-left-color: $white;
+  border-left-color: variables.$white;
   border-width: 10px;
   right: -20px;
   top: calc(50% - 6px);
@@ -94,12 +97,12 @@
   pointer-events: none;
   display: block;
 }
-&[class*=#{$media-l-m-s}] {
+[class*=#{vars.$media-l-m-s}] {
   #o-popup, .o-popup {
     width: 240px;
   }
 }
-&[class*=#{$media-l-m-s-xs}] {
+[class*=#{vars.$media-l-m-s-xs}] {
   #o-popup, .o-popup {
     width: 200px;
   }