Replace deprecated SCSS @import with @use

otacke · Oct 14, 2024 · adb5e38 · adb5e38
1 parent 45ed96d
commit adb5e38
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/src/scripts/components/panel-list/panel/cycle-button.scss b/src/scripts/components/panel-list/panel/cycle-button.scss
@@ -1,4 +1,4 @@
-@import "@styles/main";
+@use "@styles/main";
 
 .h5p-discrete-option-multi-choice-cycle-button {
   background-color: rgba(255,255,255,0.5);
@@ -26,20 +26,20 @@
   }
 
   &:disabled {
-    color: $color-disabled;
+    color: main.$color-disabled;
     &::before {
-      color: $color-disabled;
+      color: main.$color-disabled;
     }
   }
 
   &:not(:disabled) {
     &:hover {
-      background-color: $color-primary-5;
+      background-color: main.$color-primary-5;
       cursor: pointer;
     }
 
     &:active {
-      background-color: $color-primary-15;
+      background-color: main.$color-primary-15;
     }
   }
 }
diff --git a/src/scripts/components/panel-list/panel/option-button.scss b/src/scripts/components/panel-list/panel/option-button.scss
@@ -1,4 +1,4 @@
-@import "@styles/main";
+@use "@styles/main";
 
 .h5p-discrete-option-multi-choice-option-button {
   background-color: rgba(255,255,255,0.5);
@@ -28,50 +28,50 @@
   }
 
   &.selected {
-    border-color: $color-primary;
-    box-shadow: 0 0 0.5em 0 $color-primary;
+    border-color: main.$color-primary;
+    box-shadow: 0 0 0.5em 0 main.$color-primary;
 
     &.answer-correct {
-      border-color: $color-correct;
-      box-shadow: 0 0 0.5em 0 $color-correct;
+      border-color: main.$color-correct;
+      box-shadow: 0 0 0.5em 0 main.$color-correct;
     }
 
     &.answer-incorrect {
-      border-color: $color-incorrect;
-      box-shadow: 0 0 0.5em 0 $color-incorrect;
+      border-color: main.$color-incorrect;
+      box-shadow: 0 0 0.5em 0 main.$color-incorrect;
     }
   }
 
   &:disabled {
     &::before {
-      color: $color-disabled;
+      color: main.$color-disabled;
     }
   }
 
   &:not(:disabled) {
     &:hover {
-      background-color: $color-primary-5;
+      background-color: main.$color-primary-5;
       cursor: pointer;
     }
 
     &:active {
-      background-color: $color-primary-15;
+      background-color: main.$color-primary-15;
     }
   }
 
   &.option-correct {
-    background-color: $color-correct-background;
+    background-color: main.$color-correct-background;
 
     &::before {
-      color: $color-correct;
+      color: main.$color-correct;
     }
   }
 
   &.option-incorrect {
-    background-color: $color-incorrect-background;
+    background-color: main.$color-incorrect-background;
 
     &::before {
-      color: $color-incorrect;
+      color: main.$color-incorrect;
     }
   }
 

diff --git a/src/styles/h5p-discrete-option-multi-choice.scss b/src/styles/h5p-discrete-option-multi-choice.scss
@@ -1,8 +1,8 @@
-@import "@styles/main";
+@use "@styles/main";
 
 .h5p-discrete-option-multi-choice {
-  background-color: $color-background;
-  color: $color-text;
+  background-color: main.$color-background;
+  color: main.$color-text;
 
   .h5p-question-introduction.display-none {
     display: none;