From 07ab742071afaa7f1bf397f1415b3d6e6a115b89 Mon Sep 17 00:00:00 2001 From: xdrm-brackets 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 @@
{{ 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); }