fix SCSS warnings

dominikks · Feb 7, 2025 · 97fe589 · 97fe589
1 parent e3b24cb
commit 97fe589
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 17 deletions.
diff --git a/frontend/src/app/keybind-generator/keybind-generator.component.scss b/frontend/src/app/keybind-generator/keybind-generator.component.scss
@@ -1,5 +1,3 @@
-@import 'variables';
-
 .max-width {
   max-width: 1500px;
   margin: 0 auto;

diff --git a/frontend/src/app/keybind-generator/keycombination-input/key-combination-input.component.scss b/frontend/src/app/keybind-generator/keycombination-input/key-combination-input.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables';
 
 .keybind-input {
   width: 250px;
@@ -9,11 +9,11 @@
   user-select: none;
 
   &:focus {
-    border-color: $primary;
+    border-color: variables.$primary;
   }
 
   &.invalid:not(:focus) {
-    border-color: $warn;
+    border-color: variables.$warn;
   }
 }
 

diff --git a/frontend/src/app/login/login.component.scss b/frontend/src/app/login/login.component.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables';
 
 :host {
   display: flex;
@@ -18,7 +18,7 @@ mat-card {
 }
 
 .login-title {
-  background-color: $primary;
+  background-color: variables.$primary;
   color: rgba(black, 0.87);
   height: 3em;
   display: flex;

diff --git a/frontend/src/app/recorder/recorder.component.scss b/frontend/src/app/recorder/recorder.component.scss
@@ -1,5 +1,3 @@
-@import 'variables';
-
 :host {
   flex: 1;
   display: flex;

diff --git a/frontend/src/app/settings/guild-settings/guild-settings.component.scss b/frontend/src/app/settings/guild-settings/guild-settings.component.scss
@@ -37,6 +37,8 @@
 }
 
 .save-state-idle-icon {
+  animation: fadeout 1s ease-out 1s both;
+
   @keyframes fadeout {
     0% {
       opacity: 1;
@@ -45,6 +47,4 @@
       opacity: 0;
     }
   }
-
-  animation: fadeout 1s ease-out 1s both;
 }
diff --git a/frontend/src/app/soundboard/soundboard.component.scss b/frontend/src/app/soundboard/soundboard.component.scss
@@ -32,6 +32,8 @@ mat-toolbar.controls-toolbar {
 
   mat-form-field,
   app-volume-slider {
+    flex: 49%;
+
     @media (min-width: 900px) {
       &:not(.search-field) {
         flex: 1 1 150px;
@@ -42,8 +44,6 @@ mat-toolbar.controls-toolbar {
         flex: 1 0 150px;
       }
     }
-
-    flex: 49%;
   }
 }
 

diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
@@ -2,9 +2,11 @@
 @use '@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
 // Plus imports for other components in your app.
-@import 'ress/ress.css';
-@import 'variables';
-@import 'overrides';
+@use 'variables';
+@use 'overrides';
+@use 'sass:meta';
+
+@include meta.load-css('ress/ress.css');
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -16,4 +18,4 @@
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include mat.all-component-themes($soundboard-theme);
+@include mat.all-component-themes(variables.$soundboard-theme);