added 'constants' file + global for input/button etc -> 4 modes:

invalid(red), valid(green), neutral(blue), search(purple)

webpack/scss/constants.scss

@@ -0,0 +1,19 @@
+/* COULEUR DES ERREURS */
+$error-color: #cc5857;
+
+/* FORMULAIRES */
+$form-valid-color:   #27a560;
+$form-neutral-color: #2193e6;
+$form-search-color:  #5630ed;
+$form-invalid-color: #d52918;
+$form-grey-color: #8d8d8d;
+
+
+/* GESTION DES LONGUEURS */
+
+
+// POUR RESOURCE_DISPATCHER
+$rd-form-valid-color:   '27a560';
+$rd-form-neutral-color: '2193e6';
+$rd-form-search-color:  '5630ed';
+$rd-form-invalid-color: 'd52918';

webpack/scss/global.scss

@@ -0,0 +1,266 @@
+@import 'constants';
+
+/* [3] Formulaires
+=========================================================*/
+section > form, .form{
+	display: inline-block;
+	position: relative;
+		left: 50%;
+		margin: .3em 0;
+		padding: 1em;
+
+	border-radius: 3px;
+	border-color: $form-invalid-color;
+	box-shadow: 0 0 1px #b7b7b7;
+
+	background-color: #fff;
+
+	-webkit-transform: translateX(-50%);
+	transform: translateX(-50%);
+
+	&#choose-cluster{
+		left: 0;
+		-webkit-transform: none;
+		transform: none;
+	}
+
+	&.valid{
+		border-color: $form-valid-color;
+	}
+
+	&.neutral{
+		border-color: $form-neutral-color;
+	}
+
+	&.search{
+		border-color: $form-neutral-color;
+	}
+
+	// Textes centres
+	.edit_search_view,
+	.remove_search_view{
+		display: inline-block;
+			width: 100%;
+
+		text-align: center;
+		color: #aaaaaa;
+
+		span{
+			color: #888888;
+		}
+	}
+
+	span.error-msg{
+		display: inline-block;
+		color: #F03C3C;
+		font-size: 0.7em;
+	}
+
+}
+
+
+/* (1) Champs de texte */
+input[type=text],
+input[type=mail],
+input[type=password],
+select,
+.invalid > input[type=text],
+.invalid > input[type=mail],
+.invalid > input[type=password],
+.invalid > select,
+input.invalid[type=text],
+input.invalid[type=mail],
+input.invalid[type=password],
+select.invalid{
+	display: inline-block;
+	margin: 1em 0;
+	padding: .7em 1em;
+
+	border-radius: 3px;
+	border: 1px solid #d7dde8;
+
+	color: #2f3033;
+
+	transition: border .4s ease-in-out;
+
+	&:focus,
+	&:hover{
+		border-color: $form-invalid-color;
+	}
+}
+
+
+select{
+	width: 100%;
+	display: block;
+	background: #fff;
+
+	option{
+		padding: .5em;
+	}
+}
+
+
+// Champs valides
+.valid > input[type=text],
+.valid > input[type=mail],
+.valid > input[type=password],
+.valid > select,
+input.valid[type=text],
+input.valid[type=mail],
+input.valid[type=password],
+select.valid{
+	&:focus,
+	&:hover{
+		border-color: $form-valid-color;
+	}
+}
+
+// Champs neutres
+.neutral > input[type=text],
+.neutral > input[type=mail],
+.neutral > input[type=password],
+.neutral > select,
+input.neutral[type=text],
+input.neutral[type=mail],
+input.neutral[type=password],
+select.neutral{
+	&:focus,
+	&:hover{
+		border-color: $form-neutral-color;
+	}
+}
+
+// Champs neutres
+.search > input[type=text],
+.search > input[type=mail],
+.search > input[type=password],
+.search > select,
+input.search[type=text],
+input.search[type=mail],
+input.search[type=password]{
+	&:focus,
+	&:hover{
+		border-color: $form-search-color;
+	}
+}
+
+
+
+/* (2) Boutons */
+button,
+button.invalid,
+.invalid > button{
+	display: inline-block;
+	position: relative;
+		left: 50%;
+
+	padding: .7em 1em;
+
+	border-radius: 3px;
+	border: 1px solid $form-invalid-color;
+
+	background: $form-invalid-color center center no-repeat;
+
+	color: #fff;
+
+	cursor: pointer;
+
+	transition: background .4s ease-in-out;
+
+	-webkit-transform: translateX(-50%);
+	transform: translateX(-50%);
+
+	&:hover,
+	&:focus,
+	&:disabled{
+		background-color: #fff;
+		color: $form-invalid-color;
+	}
+}
+
+// Boutons grisés
+button.grey,
+.grey > button{
+	border-color: $form-grey-color;
+
+	background-color: $form-grey-color;
+
+	&:hover,
+	&:focus,
+	&:disabled{
+		background-color: #fff;
+		color: $form-grey-color;
+	}
+}
+
+// Boutons valides
+button.valid,
+.valid > button{
+	border-color: $form-valid-color;
+
+	background-color: $form-valid-color;
+
+	&:hover,
+	&:focus,
+	&:disabled{
+		background-color: #fff;
+		color: $form-valid-color;
+	}
+}
+
+// Boutons neutres
+button.neutral,
+.neutral > button{
+	border-color: $form-neutral-color;
+
+	background-color: $form-neutral-color;
+
+	&:hover,
+	&:focus,
+	&:disabled{
+		background-color: #fff;
+		color: $form-neutral-color;
+	}
+}
+
+// Boutons recherche
+button.search,
+.search > button{
+	border-color: $form-search-color;
+
+	background-color: $form-search-color;
+
+	&:hover,
+	&:focus,
+	&:disabled{
+		background-color: #fff;
+		color: $form-search-color;
+	}
+}
+
+
+// Boutons quand action validee
+.invalid > button.active,
+button.invalid.active,
+button.active{
+	background-color: #fff;
+	background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
+	background-size: 1em auto;
+
+	color: transparent !important;
+}
+
+
+button.valid.active,
+.valid > button.active{
+	background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg')   !important;
+}
+button.neutral.active,
+.neutral > button.active{
+	background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
+}
+button.search.active,
+.search > button.active{
+	background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg')  !important;
+}

webpack/scss/layout.scss

@@ -17,4 +17,108 @@ body{
 	font-family: 'Open Sans';
 
 	color: #333;
+}
+
+/* [4] Popup background - window
+==========================================*/
+#POPUP{
+	display: none;
+	position: fixed;
+		top: 50%;
+		left: 50%;
+		min-width: 50%;
+		max-width: 50%;
+		min-height: 30%;
+		max-height: 50%;
+
+	// flex properties
+	flex-direction: column;
+	justify-content: space-between;
+
+	border-radius: 5px;
+
+	background: #fff;
+	color: #34495e;
+
+	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
+
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+
+	z-index: 101;
+
+	&.active{
+		display: flex;
+	}
+
+
+	& > .header{
+		display: block;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		border-radius: 5px 5px 0 0;
+		border-bottom: 2px solid #ecf0f1;
+
+		font-size: 1.1em;
+		font-weight: bold;
+	}
+
+	& > .body{
+		display: block;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		b, strong{
+			color: #5630ed;
+		}
+	}
+
+	& > .footer{
+		display: flex;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		background-color: #ecf0f1;
+
+		border-radius: 0 0 5px 5px;
+
+		// flex props.
+		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+
+		& button{
+			left: auto;
+			margin: 0 1em;
+			-webkit-transform: none;
+			transform: none;
+		}
+
+	}
+}
+
+
+#POPUP-BG{
+	display: none;
+	position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	background: #29333f;
+	background: rgba(41, 51, 63, .8);
+
+	z-index: 100;
+}
+
+#POPUP.active ~ #POPUP-BG{
+	display: block;
 }