[webpack.teacher.view] SCSS: gooey effect
This commit is contained in:
xdrm-brackets
parent
8a22a18b96
commit
efaaedfd0d
|
|
@ -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 |
|
|
@ -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 |
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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'); }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue