arles-2020: refactor navigation and header (#40679)

static/arles-2020/_custom.scss

@@ -1,4 +1,4 @@
-$header-height: 150px;
+$header-height: 90px;
 $mobile-header-height: 80px;
 
 %cancel-button {
@@ -13,11 +13,8 @@ $mobile-header-height: 80px;
 	background: #fff;
 }
 
-.gru-nav-wrapper {
-	margin-top: -50px;
-}
-
 div.gru-nav {
+	border-radius: 0;
 	.gru-nav-button .icon-bar {
 		border-width: 2px;
 		border-radius: 10px 0 0 10px;
@@ -25,27 +22,30 @@ div.gru-nav {
 	&.toggled .gru-nav-button .icon-bar {
 		border-radius: 10px;
 	}
-	ul > li a {
-		font-weight: normal;
-		padding: 0.55em 20px;
+	ul > li {
+		a {
+			font-weight: normal;
+			padding: 0.55em 20px;
+		}
+		&:first-child > a {
+			border-radius: 0;
+		}
 	}
 }
 
 
 div.gru-nav .gru-nav-button {
-	top: -20px;
-	@media screen and ($max-mobile-viewport) {
-		top: -15px;
-	}
 	@media screen and (max-width: 360px) {
 		left: -10px;
 	}
 	+ ul {
-		margin-bottom: 0;
-		position: absolute;
-		width: $width;
-		border-top: 0;
-		z-index: 1000;
+		margin: 0;
+		@media screen and ($max-mobile-viewport) {
+			width: 100%;
+			position: absolute;
+			z-index: 1000;
+			margin-top: 8px;
+		}
 	}
 }
 
@@ -93,6 +93,10 @@ div.trackingcodeinputcell form {
 	margin-top: 0.5rem;
 }
 
+div#header-wrapper {
+	box-shadow: 0 10px 10px #dedede;
+}
+
 div#footer-wrapper {
 	font-size: 90%;
 	background: linear-gradient(#bbb, #eee);
@@ -105,38 +109,48 @@ div#footer-wrapper {
 }
 
 div#header {
-	border-top: $nav-mobile-bottom-bar-height solid $primary-color;
 	height: $header-height;
+	padding: 0;
 	@media screen and ($max-mobile-viewport) {
 		height: $mobile-header-height;
-		border-top: 0;
+		h1 {
+			padding-left: 0;
+		}
 	}
-	#top #logo a {
-		display: block;
-		position: absolute;
-		right: 40%;
-		top: 20%;
+	#top {
+		background: linear-gradient(#00407c, $primary-color);
+		height: $header-height;
 		@media screen and ($max-mobile-viewport) {
-			display: none;
+			height: $mobile-header-height;
+		}
+		#logo a {
+			display: block;
+			text-indent: -9999px;
+			height: $header-height;
+			@media screen and ($max-mobile-viewport) {
+				height: $mobile-header-height;
+			}
 		}
 	}
 	#logo {
-		background: url('img/bandeau.png') top right no-repeat;
-		background-size: auto 66px;
+		background: url('img/bandeau-arles.png') no-repeat;
+		background-position: left top;
 		@media screen and ($max-mobile-viewport) {
-			height: 60px;
-			background-size: auto 60px;
+			background-position: 60px bottom;
+			background-size: auto 70px;
+		}
+		@media screen and (max-width: 360px) {
+			background-position: 40px bottom;
 		}
-		height: $header-height - $nav-mobile-bottom-bar-height;
-		z-index: 10;
-		position: absolute;
-		width: $width;
-		right: 0;
-		bottom: 0;
 	}
 }
 
 .gru-content {
+	div#sidebar {
+		@media screen and ($max-mobile-viewport) {
+			margin-top: 0.5rem;
+		}
+	}
 	div.wcsformsofcategorycell {
 		picture img {
 			padding: 0;
@@ -166,17 +180,17 @@ div#header {
 }
 
 #toplinks {
-	height: $header-height - $nav-mobile-bottom-bar-height + 15px;
 	background: $primary-color;
 	box-sizing: border-box;
 	border-radius: 0;
 	box-shadow: none;
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	position: absolute;
-	top: 0 - $nav-mobile-bottom-bar-height;
+	min-width: 200px;
+	height: $header-height;
 	right: 0;
-	min-width: 340px;
 	a {
 		color: #fff;
 	}
@@ -184,21 +198,7 @@ div#header {
 		display: none;
 	}
 	@media screen and ($max-mobile-viewport) {
-		top: 0;
-		height: $mobile-header-height;
-		padding-top: 0;
-		min-width: 261px;
-		padding-left: 1em;
-		padding-right: 1em;
-		a {
-			font-size: 90%;
-			&.logout {
-				display: none;
-			}
-			&.registration {
-				display: none;
-			}
-		}
+		display: none;
 	}
 }
 

static/arles-2020/_vars.scss

@@ -8,24 +8,29 @@ $lighter-primary-color: lighten($primary-color, 65%);
 $width: 1200px;
 $body-background: #efefef;
 $footer-color: #000;
-$nav-border-color: white;
 
 $border-radius: 3px;
 
-$nav-after-image: false;
-
-$nav-button-background: white;
-$nav-button-color: $primary-color;
+$nav-color: $primary-color;
+$nav-menu-color: $primary-color;
 $nav-active-color: $primary-color;
 
-$nav-mobile-bottom-bar-background: #ffffff;
+$nav-button-background: transparent;
+$nav-button-color: white;
+
+$nav-item-selected-color: white;
+$nav-item-hover-background: $lighter-primary-color;
+$nav-item-hover-color: $primary-color;
+
+$nav-mobile-menu-item-hover-background: $primary-color;
+$nav-mobile-menu-background: $lighter-primary-color;
+$nav-mobile-menu-item-hover-color: white;
+
+$nav-mobile-bottom-bar-background: white;
 $nav-mobile-bottom-bar-item-hover-background: #f4f4f4;
 $nav-mobile-bottom-bar-item-selected-background: #f4f4f4;
-$nav-mobile-bottom-bar-item-selected-color: $primary-color;
-$nav-mobile-bottom-bar-item-hover-color: $primary-color;
-$nav-mobile-bottom-bar-color: $primary-color;
 $nav-mobile-bottom-bar-height: 60px;
-$nav-mobile-menu-background: $lighter-primary-color;
+$nav-mobile-bottom-bar-item-selected-color: $primary-color;
 
 $buttons-order: cancel (grow), previous, submit;