From 56b858c0441a3034d515af0d3e6b1b4b79b7f67f Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Thu, 8 Mar 2018 12:25:28 +0100
Subject: [PATCH] [webpack.teacher.view] SCSS: gooey effect order change

---
 webpack/component/teacher/view.vue |  2 +-
 webpack/scss/container.scss        | 81 ++++++++++++++++--------------
 2 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/webpack/component/teacher/view.vue b/webpack/component/teacher/view.vue
index fce059b..60121e8 100644
--- a/webpack/component/teacher/view.vue
+++ b/webpack/component/teacher/view.vue
@@ -53,9 +53,9 @@
 				:data-fname='prof.firstName'>
 
 				<div class='goo-menu'>
+					<div class='admin'  :data-admin='prof.idProfesseur'  :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
 					<div class='remove' :data-remove='prof.idProfesseur'                               @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div>
 					<div class='edit'   :data-edit='prof.idProfesseur'                                 @click="gstore.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div>
-					<div class='admin'  :data-admin='prof.idProfesseur'  :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
 				</div>
 
 				<span class='category'>{{ prof.categorie }}</span>
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 1ea6406..f3829c8 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -196,15 +196,28 @@
 
 			cursor: pointer;
 
-			transition: left .3s ease-in-out,
-						width .3s ease-in-out;
+			z-index: 103;
 
+			/* (2.1) Pan all on hover */
 			&:hover{
-				left:   calc( 100% - 1em - #{$cont-w} - .5em );
-				width:  $cont-w;
+				left:   calc( 100% - 1em - #{$cont-w} - .5em - 1em );
+				width:  calc( #{$cont-w} + 1em );
+
+				/* (2.1.1) lighter color on hover */
+				& > div.remove[data-remove],
+				& > div.edit[data-edit],
+				& > div.admin[data-admin]{
+					background-color: darken(#fff, 5%);
+
+					/* (2.1.2) displace all but 1st element */
+					&.edit[data-edit]{   left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
+					&.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
+
+				}
+
 			}
 
-
+			/* (2.2) Design elements */
 			& > div.remove[data-remove],
 			& > div.edit[data-edit],
 			& > div.admin[data-admin]{
@@ -226,44 +239,36 @@
 
 				cursor: pointer;
 
-				z-index: 105;
+				z-index: 103;
 
+				/* (2.1) Feedback */
 				&:hover{ background-image: url('/asset/svg/cross.svg@555555'); }
 				&:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
 
+				/* (2.2) EDIT button */
+				&.edit[data-edit]{
+					background-image: url('/asset/svg/a.svg@bbbbbb');
+					background-size: auto 60%;
+					z-index: 104;
+
+					&:hover{ background-image: url('/asset/svg/a.svg@555555'); }
+					&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
+				}
+
+				/* (2.3) ADMIN switch */
+				&.admin[data-admin]{
+					background-image: url('/asset/svg/admin.svg@bbbbbb');
+					z-index: 105;
+
+					&:hover{                  background-image: url('/asset/svg/admin.svg@555555'); }
+					&[data-active='1']{       background-image: url('/asset/svg/admin.svg@f4bd18'); }
+					&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); }
+				}
+
+
 			}
 
-			// lighter color on hover
-			&:hover > div.remove[data-remove],
-			&:hover > div.edit[data-edit],
-			&:hover > div.admin[data-admin]{
-				background-color: darken(#fff, 5%);
-			}
 
-			/* (2) Flow on hover */
-			&:hover > div.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
-			&:hover > div.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
-
-
-			/* (2.1) EDIT button */
-			& > div.edit[data-edit]{
-				background-image: url('/asset/svg/a.svg@bbbbbb');
-				background-size: auto 60%;
-				z-index: 104;
-
-				&:hover{ background-image: url('/asset/svg/a.svg@555555'); }
-				&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
-			}
-
-			/* (2.2) ADMIN switch */
-			& > div.admin[data-admin]{
-				background-image: url('/asset/svg/admin.svg@bbbbbb');
-				z-index: 103;
-
-				&:hover{                  background-image: url('/asset/svg/admin.svg@555555'); }
-				&[data-active='1']{       background-image: url('/asset/svg/admin.svg@f4bd18'); }
-				&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); }
-			}
 
 
 		}
@@ -274,7 +279,7 @@
 
 			display: block;
 			position: relative;
-			width: calc( 100% - 5em );
+			width: 100%;
 
 			margin-bottom: .5em;
 
@@ -283,6 +288,8 @@
 			text-transform: uppercase;
 			letter-spacing: .05em;
 
+			z-index: 102;
+
 		}
 
 		/* (4-edit) Card generic title (select) */