mti
/
ptut-vhost
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[webpack.teacher.view] SCSS: gooey effect order change

This commit is contained in:
xdrm-brackets 2018-03-08 12:25:28 +01:00
parent efaaedfd0d
commit 56b858c044
2 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webpack/component/teacher/view.vue
View File

@ -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>

81
webpack/scss/container.scss
View File

@ -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) */