Merge pull request Sofie-Automation#1339 from nrkno/chore/deprecated-sass

Fix scss deprecation warnings

Author: nytamin

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;
+				}
+			}
 		}
 	}
 

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;
 }

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%);