Header scss

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

core/css/header.scss

@@ -33,7 +33,7 @@
 	&:focus {
 		left: 76px;
 		top: -9px;
-		color: $color-primary-text;
+		color: var(--color-primary-text);
 		width: auto;
 		height: auto;
 	}
@@ -50,7 +50,7 @@
 	right: 0;
 	z-index: 2000;
 	height: 50px;
-	background-color: $color-primary;
+	background-color: var(--color-primary);
 	box-sizing: border-box;
 	justify-content: space-between;
 }
@@ -72,8 +72,8 @@
 #header {
 	/* Header menu */
 	.menu {
-		background-color: $color-main-background;
-		filter: drop-shadow(0 1px 10px $color-box-shadow);
+		background-color: var(--color-main-background);
+		filter: drop-shadow(0 1px 10px var(--color-box-shadow));
 		border-radius: 0 0 3px 3px;
 		box-sizing: border-box;
 		z-index: 2000;
@@ -91,7 +91,7 @@
 		/* Dropdown arrow */
 		&:after {
 			border: 10px solid transparent;
-			border-bottom-color: $color-main-background;
+			border-bottom-color: var(--color-main-background);
 			bottom: 100%;
 			content: ' ';
 			height: 0;
@@ -103,7 +103,7 @@
 	}
 	.logo {
 		display: inline-flex;
-		background-image: url($image-logo);
+		background-image: var(--image-logo);
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
@@ -207,7 +207,7 @@
 .header-appname {
 	display: inline-block;
 	position: relative;
-	color: $color-primary-text;
+	color: var(--color-primary-text);
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
@@ -239,8 +239,8 @@ nav[role='navigation'] {
 .header-left #navigation,
 .ui-datepicker,
 .ui-timepicker.ui-widget {
-	background-color: $color-main-background;
-	filter: drop-shadow(0 1px 10px $color-box-shadow);
+	background-color: var(--color-main-background);
+	filter: drop-shadow(0 1px 10px var(--color-box-shadow));
 	&:after {
 		/* position of dropdown arrow */
 		left: 50%;
@@ -252,7 +252,7 @@ nav[role='navigation'] {
 		position: absolute;
 		pointer-events: none;
 		border-color: rgba(0, 0, 0, 0);
-		border-bottom-color: $color-main-background;
+		border-bottom-color: var(--color-main-background);
 		border-width: 10px;
 		margin-left: -10px; /* border width */
 	}
@@ -276,7 +276,7 @@ nav[role='navigation'] {
 			display: inline-block;
 			padding-bottom: 0;
 			padding-left: 10px;
-			color: $color-main-text;
+			color: var(--color-main-text);
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -340,7 +340,7 @@ nav[role='navigation'] {
 #settings {
 	display: inline-block;
 	height: 100%;
-	color: rgba($color-primary-text, 0.7);
+	color: rgba(var(--color-primary-text), 0.7);
 	cursor: pointer;
 	flex: 0 0 auto;
 
@@ -356,7 +356,7 @@ nav[role='navigation'] {
 		&:hover,
 		&:focus,
 		&:active {
-			color: $color-primary-text;
+			color: var(--color-primary-text);
 
 			img, #expandDisplayName {
 				opacity: 1;
@@ -397,7 +397,7 @@ nav[role='navigation'] {
 			position: absolute;
 			pointer-events: none;
 			border: 0 solid transparent;
-			border-bottom-color: $color-main-background;
+			border-bottom-color: var(--color-main-background);
 			border-width: 10px;
 			bottom: 0;
 			z-index: 100;
@@ -414,7 +414,7 @@ nav[role='navigation'] {
 		display: inline-flex;
 		align-items: center;
 		height: 40px;
-		color: $color-main-text;
+		color: var(--color-main-text);
 		padding: 12px;
 		box-sizing: border-box;
 		opacity: .7;
@@ -434,7 +434,7 @@ nav[role='navigation'] {
 		&:active,
 		&.active {
 			opacity: 1;
-			box-shadow: inset 4px 0 $color-primary;
+			box-shadow: inset 4px 0 var(--color-primary);
 		}
 	}
 }
@@ -494,19 +494,19 @@ nav[role='navigation'] {
 		display: none;
 		position: absolute;
 		overflow: visible;
-		background-color: $color-main-background;
+		background-color: var(--color-main-background);
 		white-space: nowrap;
 		border: none;
-		border-radius: $border-radius;
+		border-radius: var(--border-radius);
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		color: rgba($color-main-text, .7);
+		color: rgba(var(--color-main-text), .7);
 		width: auto;
 		left: 50%;
 		top: 100%;
 		transform: translateX(-50%);
 		padding: 4px 10px;
-		filter: drop-shadow(0 1px 10px $color-box-shadow);
+		filter: drop-shadow(0 1px 10px var(--color-box-shadow));
 		z-index: 100;
 	}
 
@@ -523,7 +523,7 @@ nav[role='navigation'] {
 		position: absolute;
 		pointer-events: none;
 		border: 0 solid transparent;
-		border-bottom-color: $color-main-background;
+		border-bottom-color: var(--color-main-background);
 		border-width: 10px;
 		transform: translateX(-50%);
 		left: 50%;