From 07ab742071afaa7f1bf397f1415b3d6e6a115b89 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Fri, 30 Mar 2018 17:03:35 +0200
Subject: [PATCH] [scss.global] added tooltip arrow + transformed before-icons
 to raw icons [ue.view] replaced before-icons with raw icons

---
 webpack/component/ue/view.vue | 12 ++++-----
 webpack/scss/global.scss      | 50 ++++++++++++++++++++++++++++++++---
 2 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index f26b75c..df2408a 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -75,18 +75,18 @@
 				<div class='table little'>
 					<div>
 						<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
-						<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
-						<span v-show='ue.modCours != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+						<span v-show='ue.nbrCours!=ue.nbrProfCours' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modCours != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
 					</div>
 					<div>
 						<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
-						<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
-						<span v-show='ue.modTD != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+						<span v-show='ue.nbrTD!=ue.nbrProfTD' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modTD != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
 					</div>
 					<div>
 						<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
-						<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
-						<span v-show='ue.modTP != 0' class='notlast time reflow nospace' data-tooltip='volume horaire incohérent'></span>
+						<span v-show='ue.nbrTP!=ue.nbrProfTP' class='notlast user-icon reflow nospace' data-tooltip='enseignant(s) manquant(s)'></span>
+						<span v-show='ue.modTP != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
 					</div>
 				</div>
 
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index d0189e2..3a12192 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -59,25 +59,43 @@ a{
 }
 
 
+/* (8) Striked text */
 [data-strike='1'],
 .strike{
 	text-decoration: line-through;
 	opacity: .5;
 }
 
+/* (9) Icons (1em wide) */
+.user-icon, .time-icon{
 
+	display: block;
+	position: relative;
+		width: 1em;
+		height: 1em;
+
+	background: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}') center center no-repeat;
+	background-size: contain;
+
+	&.time-icon{
+		background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}');
+	}
+}
+
+
+/* (10) Toggling tooltip on hover */
 [data-tooltip]{
 
 	position: relative;
 
 	cursor: pointer;
 
-	&:after{
+	&:before{
 		content: attr(data-tooltip);
 
 		display: block;
 		position: absolute;
-			top: calc( 100% + .3em );
+			top: calc( 100% + 1em );
 			left: 50%;
 
 		margin-left: -.1em;
@@ -90,6 +108,7 @@ a{
 
 		font-size: .7em;
 		color: #ddd;
+		letter-spacing: 0;
 
 		background-color: #444;
 
@@ -97,11 +116,36 @@ a{
 
 		transition: transform .1s ease-in-out;
 
+		z-index: 999;
+	}
+
+	&:hover:not([data-tooltip='']):before{
+		transform: translateX(-50%) translateY(0) scale(1);
+	}
+
+
+	&:after{
+		content: '';
+
+		display: block;
+		position: absolute;
+			top: calc( 100% + .6em );
+			left: 50%;
+			width:  .4em;
+			height: .4em;
+
+		background-color: #444;
+
+		transform: translateX(-50%) rotate(45deg) scale(0);
+
+		transition: transform .1s ease-in-out;
+
 		z-index: 1000;
+
 	}
 
 	&:hover:not([data-tooltip='']):after{
-		transform: translateX(-50%) translateY(0) scale(1);
+		transform: translateX(-50%) rotate(45deg) scale(1);
 	}