Merge pull request #3530 from nextcloud/scss-variables

Implement scss variables

1 files changed, 15 insertions, 16 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index fd2da104c38..0687a6fed13 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -25,8 +25,7 @@
 	&.menu:after,
 	.menu:after {
 		border: 10px solid transparent;
-		border-color: transparent;
-		border-bottom-color: #fff;
+		border-bottom-color: $color-main-background;
 		bottom: 100%;
 		content: ' ';
 		height: 0;
@@ -47,7 +46,7 @@
 	&:focus {
 		left: 76px;
 		top: -9px;
-		color: #fff;
+		color: $color-primary-text;
 		width: auto;
 		height: auto;
 	}
@@ -64,7 +63,7 @@
 	right: 0;
 	z-index: 2000;
 	height: 45px;
-	background-color: #0082c9;
+	background-color: $color-primary;
 	box-sizing: border-box;
 	justify-content: space-between;
 }
@@ -90,7 +89,7 @@
 
 #header {
 	.logo {
-		background-image: url('../img/logo-icon.svg?v=1');
+		background-image: url('#{$image-logo}');
 		background-repeat: no-repeat;
 		background-size: 175px;
 		background-position: center;
@@ -101,7 +100,7 @@
 	.logo-icon {
 		/* display logo so appname can be shown next to it */
 		display: inline-block;
-		background-image: url('../img/logo-icon.svg?v=1');
+		background-image: url($image-logo);
 		background-repeat: no-repeat;
 		background-position: center center;
 		width: 62px;
@@ -176,7 +175,7 @@
 .header-appname {
 	display: inline-block;
 	position: relative;
-	color: #fff;
+	color: $color-primary-text;
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
@@ -203,8 +202,8 @@ nav {
 	max-height: 85%;
 	margin-top: 0;
 	padding-bottom: 10px;
-	background-color: rgba(255, 255, 255, .97);
-	box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
+	background-color: $color-main-background;
+	box-shadow: 0 1px 10px $color-box-shadow;
 	border-radius: 3px;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
@@ -275,7 +274,7 @@ nav {
 			padding-left: 0;
 			width: 80px;
 			text-align: center;
-			color: #000;
+			color: $color-main-text;
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -358,7 +357,7 @@ nav {
 
 #settings {
 	display: inline-block;
-	color: #ddd;
+	color: rgba($color-primary-text, 0.7);
 	cursor: pointer;
 	.icon-loading-small-dark {
 		display: inline-block;
@@ -386,7 +385,7 @@ nav {
 	&:hover,
 	&:focus,
 	&:active {
-		color: #fff;
+		color: $color-primary-text;
 		img {
 			-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
 			opacity: 1;
@@ -418,8 +417,8 @@ nav {
 	top: 45px;
 	z-index: 2000;
 	display: none;
-	background: rgb(255, 255, 255);
-	box-shadow: 0 1px 10px rgba(150, 150, 150, .75);
+	background: $color-main-background;
+	box-shadow: 0 1px 10px $color-box-shadow;
 	border-radius: 3px;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
@@ -431,10 +430,10 @@ nav {
 	a {
 		display: block;
 		height: 40px;
-		color: #000;
+		color: $color-main-text;
+		opacity: .5;
 		padding: 10px 12px 0;
 		-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
-		opacity: .5;
 		box-sizing: border-box;
 		img {
 			margin-bottom: -3px;