[scss.**] menu color invertion + minmod + fixed margin after search-bar

webpack/scss/constants.scss

@@ -1,5 +1,5 @@
 // BACKGROUND COLOR
-$bg-color: #eef2f5;
+$bg-color: darken(#eef2f5, 5%);
 $primary-color: #545f75;
 $primary-color: #54627c;
 $secondary-color: #b8c0c8;
@@ -25,10 +25,10 @@ $rd-form-search-color:  '1d74e5';
 $rd-form-invalid-color: 'ea4b35';
 
 // Menu
-$menu-bg: #fff;
+$menu-bg: #333;
 $menu-item-inactive: 'b9c4ce';
-$menu-item-width: 3em;
+$menu-item-width: 2.5em;
-$menu-width: #{$menu-item-width + 1em};
+$menu-width: 4em;
 
 // Header
 $header-bg: #fff;

webpack/scss/container.scss

@@ -137,7 +137,6 @@
 			flex: 0 0 calc( 2em - 2*.5em );
 
 			margin: 1em .5em;
-			margin-left: 0;
 
 			font-weight: bold;
 
@@ -672,6 +671,35 @@
 
 		}
 
+		/* (9) Card tag list */
+		& > div.taglist{
+
+			display: flex;
+			margin-top: 1em;
+
+			flex-direction:  row;
+			justify-content: flex-start;
+			align-items:     flex-start;
+			flex-wrap:       wrap;
+
+
+			/* (9.1) inner tags */
+			& > span{
+				padding: .2em .5em;
+				margin-right: .5em;
+
+				border: 1px solid #ddd;
+				border-radius: 3px;
+
+				background-color: #f9f9f9;
+
+				color: #999;
+				font-size: .8em;
+
+			}
+
+		}
+
 	}
 
 }

webpack/scss/header.scss

@@ -13,9 +13,9 @@
 	border-bottom: 1px solid #e3e7eb;
 
 	// flex properties
-	flex-direction: row;
+	flex-direction:  row;
 	justify-content: space-between;
-	align-items: center;
+	align-items:     center;
 
 	z-index: 150;
 

webpack/scss/menu.scss

@@ -25,6 +25,7 @@
 	// flex properties
 	flex-direction: column;
 	justify-content: space-around;
+	// justify-content: flex-start;
 	align-items: center;
 
 	z-index: 101;
@@ -37,13 +38,13 @@
 			width: $menu-item-width;
 			height: $menu-item-width;
 
-		margin-top: .5em;
+		margin: .5em;
 
 		background: $menu-bg center center no-repeat;
 		background-size: auto 50%;
 
 
-		transition: all .1s ease-in-out;
+		transition: background-position .1s ease-in-out;
 
 		cursor: pointer;
 
@@ -58,20 +59,16 @@
 		&[data-icon='login']{    background-image: url('/asset/svg/login.svg@#{$menu-item-inactive}');    }
 		&[data-icon='logout']{   background-image: url('/asset/svg/logout.svg@#{$menu-item-inactive}');   }
 
-		/* (2) On hover */
-		&:hover, &.active{
-			background-size: auto 55%;
-		}
 
 		&[data-icon='home']:hover,     &[data-icon='home'].active{     background-image: url('/asset/svg/home.svg@10d197');     }
 		&[data-icon='teacher']:hover,  &[data-icon='teacher'].active{  background-image: url('/asset/svg/teacher.svg@edb910');  }
 		&[data-icon='ue']:hover,       &[data-icon='ue'].active{       background-image: url('/asset/svg/ue.svg@1fc9ef');       }
-		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@545f75'); }
+		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@dab245'); }
 		&[data-icon='fiche']:hover,    &[data-icon='fiche'].active{    background-image: url('/asset/svg/fiche.svg@ea4C3a');    }
 		&[data-icon='login']:hover,    &[data-icon='login'].active{    background-image: url('/asset/svg/login.svg@dab245');    }
 		&[data-icon='logout']:hover,   &[data-icon='logout'].active{   background-image: url('/asset/svg/logout.svg@dab245');   }
 
-		/* (3) Label */
+		/* (2) Label */
 		&:after{
 
 			content: attr(data-label);
@@ -100,7 +97,7 @@
 			z-index: -1;
 		}
 
-		/* (4) Display label on item hover */
+		/* (3) Display label on item hover */
 		&:hover:after{
 			display: block;
 			left: calc( 100% + 1em );