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 @@
{{ ue.nbrCours }} CM
-
-
+
+
{{ ue.nbrTD }} TD
-
-
+
+
{{ ue.nbrTP }} TP
-
-
+
+
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);
}