From ddd12ef8214d469d311eef6bcc9878b053577184 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 1 Mar 2018 13:16:22 +0100
Subject: [PATCH] fixed css design features + working on list view

---
 public_html/page/home.php        |   3 +-
 public_html/page/login.php       |   3 +-
 webpack/component/home/page1.vue |  18 ++-
 webpack/page/home.js             |   2 +-
 webpack/scss/constants.scss      |  26 ++--
 webpack/scss/container.scss      |  69 ++++++++-
 webpack/scss/global.scss         | 238 +++++++++++--------------------
 webpack/scss/header.scss         |  21 +++
 webpack/scss/layout.scss         | 118 +--------------
 webpack/scss/menu.scss           |  45 +++---
 webpack/scss/pop-up.scss         | 107 ++++++++++++++
 11 files changed, 340 insertions(+), 310 deletions(-)
 create mode 100644 webpack/scss/pop-up.scss

diff --git a/public_html/page/home.php b/public_html/page/home.php
index 576181a..f39dc6d 100644
--- a/public_html/page/home.php
+++ b/public_html/page/home.php
@@ -13,9 +13,10 @@
 	<link rel='shortcut icon' href='/favicon.ico'>
 
 	<!-- CSS dependencies -->
-	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
 	<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
 	<link rel='stylesheet' type='text/css' href='/css/global.css'>
+	<link rel='stylesheet' type='text/css' href='/css/pop-up.css'>
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
diff --git a/public_html/page/login.php b/public_html/page/login.php
index 4706a8f..bb1bd49 100644
--- a/public_html/page/login.php
+++ b/public_html/page/login.php
@@ -13,9 +13,10 @@
 	<link rel='shortcut icon' href='/favicon.ico'>
 
 	<!-- CSS dependencies -->
-	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
 	<link rel='stylesheet' type='text/css' href='/css/font-loader.css'>
 	<link rel='stylesheet' type='text/css' href='/css/global.css'>
+	<link rel='stylesheet' type='text/css' href='/css/pop-up.css'>
 	<link rel='stylesheet' type='text/css' href='/css/layout.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container-login.css'>
 
diff --git a/webpack/component/home/page1.vue b/webpack/component/home/page1.vue
index 5bee200..c7bd812 100644
--- a/webpack/component/home/page1.vue
+++ b/webpack/component/home/page1.vue
@@ -1,6 +1,22 @@
 <template>
 
-	<div id='CONTAINER' class='page1'>
+	<div id='CONTAINER' class='list'>
+
+		<section>bla</section>
+		<section>bla</section>
+		<hr>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<h1>Some Title</h1>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<section>bla</section>
+		<h1>Some Title</h1>
+		<section>bla</section>
+		<section>bla</section>
 
 	</div>
 
diff --git a/webpack/page/home.js b/webpack/page/home.js
index 6061ad7..8134c6b 100644
--- a/webpack/page/home.js
+++ b/webpack/page/home.js
@@ -36,4 +36,4 @@ new Vue({
 
 
 // popup test
-// popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'search' }, function(e){ console.log("Resultat Popup: "+!!e); });
\ No newline at end of file
+// popup.ask({title: 'Un exemple de popup', content: "Un <b>PopUp</b> <i>sauvage</i> apparait !!<br>contenu HTML quelconque ...<br> une question, validation de suppression, etc.", action: 'Bouton d\'action', 'type': 'neutral' }, function(e){ console.log("Resultat Popup: "+!!e); });
\ No newline at end of file
diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss
index 3e272f3..e5f8582 100644
--- a/webpack/scss/constants.scss
+++ b/webpack/scss/constants.scss
@@ -1,15 +1,18 @@
 // BACKGROUND COLOR
-$bg-color: #eee;
+$bg-color: darken(#f9f9f9, 2%);
+$bg-color: #f4f8f9;
+$primary-color: #545f75;
+$secondary-color: #b8c0c8;
 
 /* 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;
+$form-valid-color:   #20d696;
+$form-neutral-color: #b8c0c8;
+$form-search-color:  #e5c41d;
+$form-invalid-color: #ea4b35;
+$form-grey-color: lighten($secondary-color, 5%);
 
 
 /* GESTION DES LONGUEURS */
@@ -22,9 +25,14 @@ $rd-form-search-color:  '5630ed';
 $rd-form-invalid-color: 'd52918';
 
 // Menu
-$menu-bg: #303030;
-$menu-width: 3em;
-$menu-outer-width: #{$menu-width + 1em};
+$menu-bg: #fff;
+$menu-item-inactive: 'b9c4ce';
+$menu-item-width: 3em;
+$menu-width: #{$menu-item-width + 1em};
+
+// Header
+$header-bg: #fff;
+$header-height: 3em;
 
 
 $c404-bubble-width: 40vh;
\ No newline at end of file
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 61885e0..ddc8948 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -5,11 +5,72 @@
 
 	display: block;
 	position: absolute;
-		top: 0;
-		left: $menu-outer-width;
-		height: 100%;
-		width: calc( 100% - #{$menu-outer-width} );
+		top: $header-height;
+		left: $menu-width;
+		min-height: calc( 100% - #{$header-height} );
+		width: calc( 100% - #{$menu-width} );
+		height: auto;
+
 
 	background-color: $bg-color;
 
+	overflow: hidden;
+	overflow-y: auto;
+
+	z-index: 100;
+
+}
+
+
+
+/* [1] List style
+---------------------------------*/
+#CONTAINER.list{
+	display: flex;
+
+	// flex properties
+	flex-direction: column;
+	justify-content: flex-start;
+
+
+	& > *:first-child{ margin-top: 1em; }
+	& > *:last-child{ margin-bottom: 3em; }
+
+	/* (1) List element */
+	& > section{
+
+		display: block;
+
+		margin: .3em 1em;
+		padding: .8em 1em;
+
+		border-radius: 5px / 5px;
+
+		background-color: #fff;
+
+	}
+
+	/* (2) List title */
+	& > h1{
+		display: inline-block;
+
+		margin: 0 1.2em;
+		margin-top: .8em;
+
+		font-size: inherit;
+		color: darken($secondary-color, 5%);
+
+	}
+
+	/* (3) List separator */
+	& > hr{
+		display: block;
+		position: relative;
+
+		margin: 1em 1.5em;
+
+		border: 0;
+		border-bottom: 2px solid darken($bg-color, 5%);
+	}
+
 }
\ No newline at end of file
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index d76c193..c8243f3 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -1,92 +1,34 @@
 @import 'constants';
 
-/* [3] Formulaires
-=========================================================*/
-section > form, .form{
+/* (1) Champs de texte */
+input[type=text],     .neutral > input[type=text],
+input[type=mail],     .neutral > input[type=mail],
+input[type=password], .neutral > input[type=password],
+select,               .neutral > select,
+input[type=text].neutral,
+input[type=mail].neutral,
+input[type=password].neutral,
+select.neutral{
+
 	display: inline-block;
-	position: relative;
-		left: 50%;
-		margin: .3em 0;
-		padding: 1em;
+	margin: 1em;
+	padding: .5em 1em;
 
 	border-radius: 3px;
-	border-color: $form-invalid-color;
-	box-shadow: 0 0 1px #b7b7b7;
+	border: 1px dashed $form-neutral-color;
 
 	background-color: #fff;
 
-	-webkit-transform: translateX(-50%);
-	transform: translateX(-50%);
+	color: $form-neutral-color;
 
-	&#choose-cluster{
-		left: 0;
-		-webkit-transform: none;
-		transform: none;
+	transition: border .2s ease-in-out,
+				color .2s ease-in-out;
+
+	&:focus, &:hover{
+		border-color: darken($form-neutral-color, 10%);
+		color: $primary-color;
 	}
 
-	&.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;
-	}
 }
 
 
@@ -110,25 +52,33 @@ input.valid[type=text],
 input.valid[type=mail],
 input.valid[type=password],
 select.valid{
-	&:focus,
-	&:hover{
-		border-color: $form-valid-color;
+
+	border-color: darken($form-valid-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-valid-color, 10%);
 	}
+
 }
 
 // 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;
+.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{
+
+	border-color: darken($form-invalid-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-invalid-color, 10%);
 	}
+
 }
 
 // Champs neutres
@@ -139,104 +89,88 @@ select.neutral{
 input.search[type=text],
 input.search[type=mail],
 input.search[type=password]{
-	&:focus,
-	&:hover{
-		border-color: $form-search-color;
+
+	border-color: darken($form-search-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-search-color, 10%);
 	}
+
 }
 
 
 
 /* (2) Boutons */
-button,
-button.invalid,
-.invalid > button{
+button,             .neutral > button,
+input[type=button], .neutral > input[type=button],
+input[type=submit], .neutral > input[type=submit],
+button.neutral,
+input[type=button].neutral,
+input[type=submit].neutral{
+
 	display: inline-block;
 	position: relative;
-		left: 50%;
 
-	padding: .7em 1em;
+	padding: .5em 1em;
 
 	border-radius: 3px;
-	border: 1px solid $form-invalid-color;
+	border: 1px dashed $form-neutral-color;
 
-	background: $form-invalid-color center center no-repeat;
+	background: $bg-color center center no-repeat;
+	text-transform: uppercase;
 
-	color: #fff;
+	color: $form-neutral-color;
 
 	cursor: pointer;
 
-	transition: background .4s ease-in-out;
+	transition: color .2s ease-in-out,
+				border-color .2s ease-in-out,
+				background .2s ease-in-out;
 
-	-webkit-transform: translateX(-50%);
-	transform: translateX(-50%);
-
-	&:hover,
-	&:focus,
-	&:disabled{
+	&:hover, &:focus{
+		color: darken($form-neutral-color, 10%);
+		border-color: $primary-color;
 		background-color: #fff;
-		color: $form-invalid-color;
 	}
 }
 
 // Boutons grisés
-button.grey,
-.grey > button{
+button:disabled,
+button.grey,             .grey > button,
+input[type=button].grey, .grey > input[type=button],
+input[type=submit].grey, .grey > input[type=submit]{
+
 	border-color: $form-grey-color;
 
-	background-color: $form-grey-color;
-
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-grey-color;
-	}
+	cursor: default;
 }
 
 // Boutons valides
-button.valid,
-.valid > button{
+button.valid,             .valid > button,
+input[type=button].valid, .valid > input[type=button],
+input[type=submit].valid, .valid > input[type=submit]{
+
 	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;
+// Boutons invalides
+button.invalid,             .invalid > button,
+input[type=button].invalid, .invalid > input[type=button],
+input[type=submit].invalid, .invalid > input[type=submit]{
 
-	background-color: $form-neutral-color;
+	border-color: $form-invalid-color;
 
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-neutral-color;
-	}
 }
 
 // Boutons recherche
-button.search,
-.search > button{
+button.search,             .search > button,
+input[type=button].search, .search > input[type=button],
+input[type=submit].search, .search > input[type=submit]{
+
 	border-color: $form-search-color;
 
-	background-color: $form-search-color;
-
-	&:hover,
-	&:focus,
-	&:disabled{
-		background-color: #fff;
-		color: $form-search-color;
-	}
 }
 
 
diff --git a/webpack/scss/header.scss b/webpack/scss/header.scss
index e69de29..892e2f0 100644
--- a/webpack/scss/header.scss
+++ b/webpack/scss/header.scss
@@ -0,0 +1,21 @@
+@import 'constants';
+
+#HEADER{
+
+	display: flex;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: calc( #{$header-height} - 1px );
+
+	background-color: $header-bg;
+	border-bottom: 1px solid #e3e7eb;
+
+	// flex properties
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+
+	z-index: 150;
+}
\ No newline at end of file
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index 11fae28..e9a3938 100644
--- a/webpack/scss/layout.scss
+++ b/webpack/scss/layout.scss
@@ -13,12 +13,8 @@ body{
 		width: 100%;
 		height: 100%;
 
-	background: $bg-color;
-
 	font-size: 16px;
-	font-family: 'Open Sans';
-
-	color: #333;
+	font-family: 'Fira Sans';
 }
 
 
@@ -32,11 +28,7 @@ body{
 		height: 100%;
 
 	background: $bg-color;
-
-
-	&.login{
-		background: #ddd;
-	}
+	color: $primary-color;
 }
 
 
@@ -80,109 +72,3 @@ body{
 		}
 	}
 }
-
-
-
-/* [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: 1000;
-
-	&.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: 999;
-}
-
-#POPUP.active ~ #POPUP-BG{
-	display: block;
-}
\ No newline at end of file
diff --git a/webpack/scss/menu.scss b/webpack/scss/menu.scss
index 935d6c0..da64ac3 100644
--- a/webpack/scss/menu.scss
+++ b/webpack/scss/menu.scss
@@ -14,65 +14,59 @@
 	---------------------------------------------------------*/
 	display: flex;
 	position: absolute;
-		top: 0;
+		top: $header-height;
 		left: 0;
-		width: $menu-outer-width;
-		height: 100%;
+		width: calc( #{$menu-width} - 1px );
+		height: calc( 100% - #{$header-height} );
 
 	background-color: $menu-bg;
+	border-right: 1px solid #e3e7eb;
 
 	// flex properties
 	flex-direction: column;
 	justify-content: space-around;
 	align-items: center;
 
+	z-index: 200;
+
 	/* (2) Items
 	---------------------------------------------------------*/
 	.item{
 		display: block;
 		position: relative;
-			width: $menu-width;
-			height: $menu-width;
+			width: $menu-item-width;
+			height: $menu-item-width;
 
 		margin-top: .5em;
 
-		border-radius: 3px / 3px;
-
-		box-shadow: inset 0 0 0 transparent;
-
 		background: $menu-bg center center no-repeat;
 		background-size: auto 50%;
 
-		border: 1px solid lighten($menu-bg, 5%);
 
-		transition: all .2s ease-in-out;
+		transition: all .1s ease-in-out;
 
 		cursor: pointer;
 
 		z-index: 1;
 
 		/* (1) Set icons */
-		&[data-icon='home']{     background-image: url('/asset/svg/home.svg@7992a3');     }
-		&[data-icon='teacher']{  background-image: url('/asset/svg/teacher.svg@7992a3');  }
-		&[data-icon='ue']{       background-image: url('/asset/svg/ue.svg@7992a3');       }
-		&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@7992a3'); }
-		&[data-icon='fiche']{    background-image: url('/asset/svg/fiche.svg@7992a3');    }
-		&[data-icon='login']{    background-image: url('/asset/svg/login.svg@7992a3');    }
-		&[data-icon='logout']{   background-image: url('/asset/svg/logout.svg@7992a3');   }
+		&[data-icon='home']{     background-image: url('/asset/svg/home.svg@#{$menu-item-inactive}');     }
+		&[data-icon='teacher']{  background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');  }
+		&[data-icon='ue']{       background-image: url('/asset/svg/ue.svg@#{$menu-item-inactive}');       }
+		&[data-icon='settings']{ background-image: url('/asset/svg/settings.svg@#{$menu-item-inactive}'); }
+		&[data-icon='fiche']{    background-image: url('/asset/svg/fiche.svg@#{$menu-item-inactive}');    }
+		&[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{
-			border: 1px solid lighten($menu-bg, 20%);
-			// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
-			box-shadow: 0 0 8px darken($menu-bg, 7%);
+			background-size: auto 55%;
 		}
 
-		color: #4a71dd;
-
 		&[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@b7b7b7'); }
+		&[data-icon='settings']:hover, &[data-icon='settings'].active{ background-image: url('/asset/svg/settings.svg@545f75'); }
 		&[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');   }
@@ -91,8 +85,9 @@
 			padding: .3em .7em;
 
 			background-color: $menu-bg;
+			border: 1px solid darken($menu-bg, 5%);
 
-			color: #fff;
+			color: invert(#fff);
 
 			border-radius: 3px / 3px;
 
diff --git a/webpack/scss/pop-up.scss b/webpack/scss/pop-up.scss
new file mode 100644
index 0000000..47c963e
--- /dev/null
+++ b/webpack/scss/pop-up.scss
@@ -0,0 +1,107 @@
+@import 'constants';
+
+/* [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: $bg-color;
+	color: $secondary-color;
+
+	box-shadow: -10px 10px 0 rgba(26, 33, 40, .8);
+
+	-webkit-transform: translateX(-50%) translateY(-50%);
+	transform: translateX(-50%) translateY(-50%);
+
+	z-index: 1000;
+
+	&.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 darken($bg-color, 5%);
+
+		font-size: 1.1em;
+		font-weight: bold;
+
+		color: $primary-color;
+	}
+
+	& > .body{
+		display: block;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		b, strong{
+			color: $primary-color;
+		}
+	}
+
+	& > .footer{
+		display: flex;
+		position: relative;
+			width: calc( 100% - 2*1em );
+
+		padding: 1em;
+
+		background-color: darken($bg-color, 5%);
+
+		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: 999;
+}
+
+#POPUP.active ~ #POPUP-BG{
+	display: block;
+}
\ No newline at end of file