[scss.global] added tooltip arrow + transformed before-icons to raw icons [ue.view] replaced before-icons with raw icons
This commit is contained in:
parent
e8ed5ab97d
commit
07ab742071
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue