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

[webpack.teacher.view] gooey effect now invisible when not :hover

This commit is contained in:
xdrm-brackets 2018-03-08 13:07:15 +01:00
parent 7a3ac8ff64
commit c9563ab36d
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
webpack/scss/container.scss
View File

@ -191,8 +191,8 @@
width: $btn-size; width: $btn-size;
height: $btn-size; height: $btn-size;
-webkit-filter: url('#goo-effect'); -webkit-filter: url('#goo-effect') drop-shadow(-5px 0 0 #fff);
filter: url('#goo-effect'); filter: url('#goo-effect') drop-shadow(-5px 0 0 #fff);
cursor: pointer; cursor: pointer;
@ -207,7 +207,7 @@
& > div.remove[data-remove], & > div.remove[data-remove],
& > div.edit[data-edit], & > div.edit[data-edit],
& > div.admin[data-admin]{ & > div.admin[data-admin]{
background-color: darken(#fff, 5%); background-color: darken(#fff, 12%);
/* (2.1.2) displace all but 1st element */ /* (2.1.2) displace all but 1st element */
&.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); } &.edit[data-edit]{ left: calc( 100% - #{$btn-size * 2 + $btn-space} ); }
@ -231,38 +231,36 @@
border-radius: 50%; border-radius: 50%;
transition: .4s ease-in-out; transition: background-color .1s ease-in-out,
left .2s ease-in-out;
background: url('/asset/svg/cross.svg@bbbbbb') center center no-repeat; background: #fff url('/asset/svg/cross.svg@aaaaaa') center center no-repeat;
background-size: auto 50%; background-size: auto 50%;
background-color: darken(#fff, 10%);
cursor: pointer; cursor: pointer;
z-index: 103; z-index: 103;
/* (2.1) Feedback */ /* (2.1) Feedback */
&:hover{ background-image: url('/asset/svg/cross.svg@555555'); } &:hover{ 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 */ /* (2.2) EDIT button */
&.edit[data-edit]{ &.edit[data-edit]{
background-image: url('/asset/svg/a.svg@bbbbbb'); background-image: url('/asset/svg/a.svg@aaaaaa');
background-size: auto 60%; background-size: auto 60%;
z-index: 104; z-index: 104;
&:hover{ background-image: url('/asset/svg/a.svg@555555'); } &:hover{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
&:active{ background-image: url('/asset/svg/a.svg@#{$rd-form-search-color}'); }
} }
/* (2.3) ADMIN switch */ /* (2.3) ADMIN switch */
&.admin[data-admin]{ &.admin[data-admin]{
background-image: url('/asset/svg/admin.svg@bbbbbb'); background-image: url('/asset/svg/admin.svg@aaaaaa');
z-index: 105; 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'); }
&[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4d118'); } &[data-active='1']:hover{ background-image: url('/asset/svg/admin.svg@f4a118'); }
} }
@ -279,7 +277,7 @@
display: block; display: block;
position: relative; position: relative;
width: 100%; width: calc( 100% - 1em );
margin-bottom: .5em; margin-bottom: .5em;