[webpack.teacher.view] SCSS: gooey effect

This commit is contained in:
xdrm-brackets 2018-03-08 12:12:12 +01:00
parent 8a22a18b96
commit efaaedfd0d
4 changed files with 194 additions and 37 deletions

View File

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="17px"
version="1.1"
viewBox="0 0 14 17"
width="14px"
id="svg12"
sodipodi:docname="a.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview14"
showgrid="false"
inkscape:zoom="13.882353"
inkscape:cx="7"
inkscape:cy="8.5"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="svg12" />
<desc
id="desc4" />
<defs
id="defs6" />
<path
inkscape:connector-curvature="0"
id="fill-edit"
d="m 0,13.5 v 2 h 14 v -2 z M 4.5,9.3 h 5 l 0.9,2.2 h 2.1 L 7.8,0.5 H 6.3 l -4.8,11 H 3.6 Z M 7,2.5 8.9,7.5 H 5.2 Z"
style="fill:#000000;fill-rule:evenodd;stroke:none;stroke-width:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
enable-background="new 0 0 24 24"
height="24px"
id="Layer_1"
version="1.1"
viewBox="0 0 24 24"
width="24px"
xml:space="preserve"
sodipodi:docname="cross.svg"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
id="metadata9"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs7" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1015"
id="namedview5"
showgrid="false"
inkscape:zoom="9.8333333"
inkscape:cx="12"
inkscape:cy="12"
inkscape:window-x="0"
inkscape:window-y="29"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1" /><path
d="m 22.245,4.015 c 0.313,0.313 0.313,0.826 0,1.139 l -6.276,6.27 c -0.313,0.312 -0.313,0.826 0,1.14 l 6.273,6.272 c 0.313,0.313 0.313,0.826 0,1.14 l -2.285,2.277 c -0.314,0.312 -0.828,0.312 -1.142,0 l -6.271,-6.271 c -0.313,-0.313 -0.828,-0.313 -1.141,0 l -6.276,6.267 c -0.313,0.313 -0.828,0.313 -1.141,0 l -2.282,-2.28 c -0.313,-0.313 -0.313,-0.826 0,-1.14 L 7.982,12.56 c 0.313,-0.312 0.313,-0.826 0,-1.14 L 1.709,5.147 C 1.395,4.834 1.395,4.32 1.709,4.007 L 3.993,1.729 C 4.308,1.417 4.821,1.417 5.135,1.73 L 11.405,8 c 0.314,0.314 0.828,0.314 1.141,10e-4 l 6.276,-6.267 c 0.312,-0.312 0.826,-0.312 1.141,0 z"
id="fill-edit"
inkscape:connector-curvature="0" /></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -3,6 +3,17 @@
<div id='CONTAINER'> <div id='CONTAINER'>
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>
<defs>
<filter id='goo-effect'>
<feGaussianBlur in='SourceGraphic' stdDeviation='3' result='blur' />
<feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 15 -5' result='goo' />
<feComposite in='SourceGraphic' in2='goo' operator='atop'/>
</filter>
</defs>
</svg>
<div class='card container'> <div class='card container'>
<input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'> <input class='card instant-search neutral' type='text' @keyup='gstore.is_handler($event)' placeholder='Recherche instantannée' id='teacher_view_instant_search'>
@ -41,9 +52,11 @@
:data-lname='prof.lastName' :data-lname='prof.lastName'
:data-fname='prof.firstName'> :data-fname='prof.firstName'>
<div class='remove' :data-remove='prof.idProfesseur' @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div> <div class='goo-menu'>
<div class='edit' :data-edit='prof.idProfesseur' @click="gstore.ie_handler($event.currentTarget.getAttribute('data-edit'))"></div> <div class='remove' :data-remove='prof.idProfesseur' @click="gstore.ir_handler($event.currentTarget.getAttribute('data-remove'))"></div>
<div class='admin' :data-admin='prof.idProfesseur' :data-active='prof.admin?1:0' @click="gstore.ia_handler(pi)"></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> <span class='category'>{{ prof.categorie }}</span>
<h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }} <span :data-visible='prof.casLogin.length'>({{ prof.casLogin }})</span></h1> <h1 :class="prof.hoursToDo > prof.equiTD ? 'warning' : ''">{{ prof.firstName }} {{ prof.lastName }} <span :data-visible='prof.casLogin.length'>({{ prof.casLogin }})</span></h1>

View File

@ -175,54 +175,96 @@
/* (2) REMOVE+EDIT+ADMIN button */ /* (2) REMOVE+EDIT+ADMIN button */
& > div.remove[data-remove], & > div.goo-menu{
& > div.edit[data-edit],
& > div.admin[data-admin]{ $btn-size: 1.5em;
$btn-space: 0em;
$nb-btn: 3;
$nb-spc: $nb-btn - 1;
$cont-w: $btn-size * $nb-btn + $nb-spc * $btn-space;
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 1.3em; top: 1em;
left: calc( 100% - 2em ); left: calc( 100% - 1em - #{$btn-size} - .5em );
width: 1em; width: $btn-size;
height: 1em; height: $btn-size;
background: url('/asset/svg/remove.svg@bbbbbb') center center no-repeat; -webkit-filter: url('#goo-effect');
background-size: auto 100%; filter: url('#goo-effect');
transform: scale(1);
transition: transform .2s ease-in-out;
cursor: pointer; cursor: pointer;
&:hover{ transition: left .3s ease-in-out,
background-image: url('/asset/svg/remove.svg@#{$rd-form-invalid-color}'); width .3s ease-in-out;
transform: scale(1.5);
}
}
/* (2.1) EDIT button */
& > div.edit[data-edit]{
left: calc( 100% - 2em - 1.3em );
background-image: url('/asset/svg/td.svg@bbbbbb');
background-size: 80% auto;
&:hover{ &:hover{
background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}'); left: calc( 100% - 1em - #{$cont-w} - .5em );
width: $cont-w;
} }
}
/* (2.2) ADMIN switch */ & > div.remove[data-remove],
& > div.admin[data-admin]{ & > div.edit[data-edit],
left: calc( 100% - 2em - 1.3em - 1.3em ); & > div.admin[data-admin]{
display: inline-block;
position: absolute;
top: 0;
left: calc( 100% - #{$btn-size} );
width: $btn-size;
height: $btn-size;
background-image: url('/asset/svg/admin.svg@bbbbbb');
background-size: 85% auto;
&:hover{ background-image: url('/asset/svg/admin.svg@bbbbbb'); } border-radius: 50%;
transition: .4s ease-in-out;
background: url('/asset/svg/cross.svg@bbbbbb') center center no-repeat;
background-size: auto 50%;
background-color: darken(#fff, 10%);
cursor: pointer;
z-index: 105;
&:hover{ background-image: url('/asset/svg/cross.svg@555555'); }
&:active{ background-image: url('/asset/svg/cross.svg@#{$rd-form-invalid-color}'); }
}
// 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'); }
}
&[data-active='1']{ background-image: url('/asset/svg/admin.svg@f4bd18'); }
} }