[webpack.teacher.view] SCSS: gooey effect order change
This commit is contained in:
parent
efaaedfd0d
commit
56b858c044
|
@ -53,9 +53,9 @@
|
|||
:data-fname='prof.firstName'>
|
||||
|
||||
<div class='goo-menu'>
|
||||
<div class='admin' :data-admin='prof.idProfesseur' :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
|
||||
<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div>
|
||||
<div class='edit' :data-edit='prof.idProfesseur' @click="gstore.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div>
|
||||
<div class='admin' :data-admin='prof.idProfesseur' :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></div>
|
||||
</div>
|
||||
|
||||
<span class='category'>{{ prof.categorie }}</span>
|
||||
|
|
|
@ -196,15 +196,28 @@
|
|||
|
||||
cursor: pointer;
|
||||
|
||||
transition: left .3s ease-in-out,
|
||||
width .3s ease-in-out;
|
||||
z-index: 103;
|
||||
|
||||
/* (2.1) Pan all on hover */
|
||||
&:hover{
|
||||
left: calc( 100% - 1em - #{$cont-w} - .5em );
|
||||
width: $cont-w;
|
||||
left: calc( 100% - 1em - #{$cont-w} - .5em - 1em );
|
||||
width: calc( #{$cont-w} + 1em );
|
||||
|
||||
/* (2.1.1) lighter color on hover */
|
||||
& > div.remove[data-remove],
|
||||
& > div.edit[data-edit],
|
||||
& > div.admin[data-admin]{
|
||||
background-color: darken(#fff, 5%);
|
||||
|
||||
/* (2.1.2) displace all but 1st element */
|
||||
&.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
|
||||
&.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* (2.2) Design elements */
|
||||
& > div.remove[data-remove],
|
||||
& > div.edit[data-edit],
|
||||
& > div.admin[data-admin]{
|
||||
|
@ -226,44 +239,36 @@
|
|||
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 105;
|
||||
z-index: 103;
|
||||
|
||||
/* (2.1) Feedback */
|
||||
&:hover{ background-image: url('/asset/svg/cross.svg@555555'); }
|
||||
&:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
|
||||
|
||||
/* (2.2) EDIT button */
|
||||
&.edit[data-edit]{
|
||||
background-image: url('/asset/svg/a.svg@bbbbbb');
|
||||
background-size: auto 60%;
|
||||
z-index: 104;
|
||||
|
||||
&:hover{ background-image: url('/asset/svg/a.svg@555555'); }
|
||||
&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
|
||||
}
|
||||
|
||||
/* (2.3) ADMIN switch */
|
||||
&.admin[data-admin]{
|
||||
background-image: url('/asset/svg/admin.svg@bbbbbb');
|
||||
z-index: 105;
|
||||
|
||||
&:hover{ background-image: url('/asset/svg/admin.svg@555555'); }
|
||||
&[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); }
|
||||
&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// lighter color on hover
|
||||
&:hover > div.remove[data-remove],
|
||||
&:hover > div.edit[data-edit],
|
||||
&:hover > div.admin[data-admin]{
|
||||
background-color: darken(#fff, 5%);
|
||||
}
|
||||
|
||||
/* (2) Flow on hover */
|
||||
&:hover > div.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
|
||||
&:hover > div.admin[data-admin]{ left: calc( 100% - #{$btn-size * 3 + $btn-space * 2} ); }
|
||||
|
||||
|
||||
/* (2.1) EDIT button */
|
||||
& > div.edit[data-edit]{
|
||||
background-image: url('/asset/svg/a.svg@bbbbbb');
|
||||
background-size: auto 60%;
|
||||
z-index: 104;
|
||||
|
||||
&:hover{ background-image: url('/asset/svg/a.svg@555555'); }
|
||||
&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
|
||||
}
|
||||
|
||||
/* (2.2) ADMIN switch */
|
||||
& > div.admin[data-admin]{
|
||||
background-image: url('/asset/svg/admin.svg@bbbbbb');
|
||||
z-index: 103;
|
||||
|
||||
&:hover{ background-image: url('/asset/svg/admin.svg@555555'); }
|
||||
&[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); }
|
||||
&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
@ -274,7 +279,7 @@
|
|||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: calc( 100% - 5em );
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: .5em;
|
||||
|
||||
|
@ -283,6 +288,8 @@
|
|||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
|
||||
z-index: 102;
|
||||
|
||||
}
|
||||
|
||||
/* (4-edit) Card generic title (select) */
|
||||
|
|
Loading…
Reference in New Issue