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'> :data-fname='prof.firstName'>
<div class='goo-menu'> <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='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='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> </div>
<span class='category'>{{ prof.categorie }}</span> <span class='category'>{{ prof.categorie }}</span>

57
webpack/scss/container.scss
View File

@ -196,15 +196,28 @@
cursor: pointer; cursor: pointer;
transition: left .3s ease-in-out, z-index: 103;
width .3s ease-in-out;
/* (2.1) Pan all on hover */
&:hover{ &:hover{
left: calc( 100% - 1em - #{$cont-w} - .5em ); left: calc( 100% - 1em - #{$cont-w} - .5em - 1em );
width: $cont-w; 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.remove[data-remove],
& > div.edit[data-edit], & > div.edit[data-edit],
& > div.admin[data-admin]{ & > div.admin[data-admin]{
@ -226,27 +239,14 @@
cursor: pointer; cursor: pointer;
z-index: 105; z-index: 103;
/* (2.1) Feedback */
&:hover{ background-image: url('/asset/svg/cross.svg@555555'); } &:hover{ background-image: url('/asset/svg/cross.svg@555555'); }
&:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); } &:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
} /* (2.2) EDIT button */
&.edit[data-edit]{
// 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-image: url('/asset/svg/a.svg@bbbbbb');
background-size: auto 60%; background-size: auto 60%;
z-index: 104; z-index: 104;
@ -255,10 +255,10 @@
&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); } &:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
} }
/* (2.2) ADMIN switch */ /* (2.3) ADMIN switch */
& > div.admin[data-admin]{ &.admin[data-admin]{
background-image: url('/asset/svg/admin.svg@bbbbbb'); background-image: url('/asset/svg/admin.svg@bbbbbb');
z-index: 103; z-index: 105;
&:hover{ background-image: url('/asset/svg/admin.svg@555555'); } &:hover{ background-image: url('/asset/svg/admin.svg@555555'); }
&[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); } &[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); }
@ -268,13 +268,18 @@
} }
}
/* (4) Card generic title */ /* (4) Card generic title */
& > span.category, & > span.category,
& > select.category{ & > select.category{
display: block; display: block;
position: relative; position: relative;
width: calc( 100% - 5em ); width: 100%;
margin-bottom: .5em; margin-bottom: .5em;
@ -283,6 +288,8 @@
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .05em; letter-spacing: .05em;
z-index: 102;
} }
/* (4-edit) Card generic title (select) */ /* (4-edit) Card generic title (select) */