[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 class='table little'>
|
||||||
<div>
|
<div>
|
||||||
<span class='active reflow' :data-error='ue.nbrCours!=ue.nbrProfCours || ue.modCours != 0?1:0'>{{ ue.nbrCours }} CM</span>
|
<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.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 reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
<span v-show='ue.modCours != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class='active reflow' :data-error='ue.nbrTD!=ue.nbrProfTD || ue.modTD != 0?1:0'>{{ ue.nbrTD }} TD</span>
|
<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.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 reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
<span v-show='ue.modTD != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span class='active reflow' :data-error='ue.nbrTP!=ue.nbrProfTP || ue.modTP != 0?1:0'>{{ ue.nbrTP }} TP</span>
|
<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.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 reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
<span v-show='ue.modTP != 0' class='notlast time-icon reflow nospace' data-tooltip='volume horaire incohérent'></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -59,25 +59,43 @@ a{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* (8) Striked text */
|
||||||
[data-strike='1'],
|
[data-strike='1'],
|
||||||
.strike{
|
.strike{
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
opacity: .5;
|
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]{
|
[data-tooltip]{
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:after{
|
&:before{
|
||||||
content: attr(data-tooltip);
|
content: attr(data-tooltip);
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc( 100% + .3em );
|
top: calc( 100% + 1em );
|
||||||
left: 50%;
|
left: 50%;
|
||||||
|
|
||||||
margin-left: -.1em;
|
margin-left: -.1em;
|
||||||
|
@ -90,6 +108,7 @@ a{
|
||||||
|
|
||||||
font-size: .7em;
|
font-size: .7em;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
|
letter-spacing: 0;
|
||||||
|
|
||||||
background-color: #444;
|
background-color: #444;
|
||||||
|
|
||||||
|
@ -97,11 +116,36 @@ a{
|
||||||
|
|
||||||
transition: transform .1s ease-in-out;
|
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;
|
z-index: 1000;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover:not([data-tooltip='']):after{
|
&:hover:not([data-tooltip='']):after{
|
||||||
transform: translateX(-50%) translateY(0) scale(1);
|
transform: translateX(-50%) rotate(45deg) scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue