chore: refactor sass to fix deprecation warnings

nrkno · Dec 9, 2024 · a96f615 · a96f615
1 parent 7a5dc15
commit a96f615
Show file tree

Hide file tree

Showing 12 changed files with 189 additions and 178 deletions.
diff --git a/packages/webui/src/client/styles/_itemTypeColors.scss b/packages/webui/src/client/styles/_itemTypeColors.scss
@@ -359,24 +359,6 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 	&.source-unknown-state,
 	&.source-not-ready {
 		&::before {
-			@keyframes animated-zebra {
-				0% {
-					opacity: 0.4;
-				}
-				49% {
-					opacity: 0.4;
-				}
-				50% {
-					opacity: 0.9;
-				}
-				99% {
-					opacity: 0.9;
-				}
-				100% {
-					opacity: 0.4;
-				}
-			}
-
 			content: ' ';
 			display: block;
 			position: absolute;
@@ -404,6 +386,24 @@ $layer-types: join($layer-types-solid, $layer-types-gradient);
 				transparent 13px,
 				transparent 16px
 			);
+
+			@keyframes animated-zebra {
+				0% {
+					opacity: 0.4;
+				}
+				49% {
+					opacity: 0.4;
+				}
+				50% {
+					opacity: 0.9;
+				}
+				99% {
+					opacity: 0.9;
+				}
+				100% {
+					opacity: 0.4;
+				}
+			}
 		}
 	}
 

diff --git a/packages/webui/src/client/styles/_variables.scss b/packages/webui/src/client/styles/_variables.scss
@@ -27,5 +27,5 @@ $segment-storyboard-thumbnail-height: 2.9rem;
 $portrait-mode-breakpoint: 35em;
 
 @function rem($pixels, $context: $browser-context) {
-	@return #{$pixels/$context}rem;
+	@return #{calc($pixels/$context)}rem;
 }
diff --git a/packages/webui/src/client/styles/notifications.scss b/packages/webui/src/client/styles/notifications.scss
@@ -216,8 +216,8 @@
 	.notifications__toggle-button__icon {
 		> svg {
 			position: absolute;
-			width: #{$fullscreen-controls__button--radius / 1.75};
-			height: #{$fullscreen-controls__button--radius / 1.75};
+			width: calc($fullscreen-controls__button--radius / 1.75);
+			height: calc($fullscreen-controls__button--radius / 1.75);
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);