Skip to content

Instantly share code, notes, and snippets.

@woodcox

woodcox/Search-xpand.scss

Last active March 21, 2021 21:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save woodcox/fde09316b7319cae9ecac745c9d2aafa to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save woodcox/fde09316b7319cae9ecac745c9d2aafa to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
markup.html
<div id="app-cover">
<div id="app">
<form method="get" action="">
<div id="f-element">
<div id="inp-cover"><input type="text" name="query" placeholder="Type something to search ..." autocomplete="off"></div>
</div>
<button type="submit" class="shadow"><i class="fas fa-search"></i></button>
</form>
</div>
<div id="layer" title="Click the blue area to hide the form"></div>
<div id="init"></div>
</div>
<script>
$(function()
{
var app = $('#app'), init = $('#init'), layer = $('#layer'), input = $('#inp-cover input'), button = $('button');
function toggleApp()
{
app.toggleClass('opened');
if( button.hasClass('shadow') )
button.toggleClass('shadow');
else
setTimeout(function(){ button.toggleClass('shadow'); },300);
if( app.hasClass('opened') )
{
setTimeout(function(){ input.toggleClass('move-up'); },200);
setTimeout(function(){ input.focus(); },500);
}
else
setTimeout(function(){ input.toggleClass('move-up').val(''); },200);
if( ! layer.hasClass('sl') )
{
setTimeout(function()
{
layer.addClass('sl');
},800);
}
else
setTimeout(function(){ layer.removeClass('sl'); },300);
}
layer.on('click',toggleApp);
init.on('click',toggleApp);
});
</script>
Raw
output.css
* {
outline: none;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
}
body, input {
cursor: url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 32 32, auto;
cursor: -webkit-image-set(url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 1x, url(http://k003.kiwi6.com/hotlink/z6fy599487/c2.png) 2x) 32 32, auto;
}
body:active, input:active {
cursor: url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 32 32, auto;
cursor: -webkit-image-set(url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 1x, url(http://k003.kiwi6.com/hotlink/6ma7828al1/c2a.png) 2x) 32 32, auto;
}
#app-cover {
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 434px;
margin: -41px auto 0 auto;
}
#app {
position: relative;
width: 82px;
height: 82px;
border-radius: 120px;
margin: 0 auto;
transition: 0.15s ease width;
z-index: 2;
}
form {
position: relative;
height: 82px;
cursor: auto;
border-radius: 120px;
}
#f-element {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 120px;
}
#inp-cover {
position: absolute;
top: 0;
right: 41px;
bottom: 0;
left: 0;
padding: 0 35px;
background-color: #fff;
}
input {
display: block;
width: 100%;
font-size: 19px;
font-family: Arial, Helvetica, sans-serif;
color: #00688a;
border: 0;
padding: 30px 0;
margin: 0;
margin-top: 52px;
line-height: 1;
background-color: transparent;
transition: 0.15s ease margin-top;
cursor: auto;
}
button {
position: absolute;
top: 0;
right: 0;
width: 82px;
height: 82px;
color: #fff;
font-size: 30px;
line-height: 1;
padding: 26px;
margin: 0;
border: 0;
background-color: #1eaddc;
transition: 0.2s ease background-color;
border-radius: 50%;
}
button.shadow {
box-shadow: 0 10px 30px #d0d0d0;
}
button i.fas {
display: block;
line-height: 1;
}
#layer {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #1eaddc;
transition: 0.9s ease all;
z-index: 1;
}
#layer.sl {
transition: 0.3s ease all;
}
#layer, #init {
position: fixed;
top: 50%;
margin: -40px auto 0 auto;
}
#layer {
right: -100px;
left: -100px;
}
#init {
right: 0;
left: 0;
width: 82px;
height: 82px;
cursor: pointer;
z-index: 2;
}
#app.opened {
width: 434px;
box-shadow: 0 10px 30px #0190bf;
}
.opened input.move-up {
margin-top: 0;
}
.opened button {
color: #1eaddc;
background-color: #fff;
box-shadow: none;
cursor: pointer;
}
#app.opened + #layer {
width: 4000px;
height: 4000px;
margin-top: -2000px;
opacity: 1;
z-index: 0;
}
#app.opened ~ #init {
z-index: -1;
}
Raw
Search-xpand.scss
*
{
outline: none;
}
html, body
{
height: 100%;
min-height: 100%;
}
body
{
margin: 0;
}
body, input
{
cursor: url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 32 32, auto;
cursor: -webkit-image-set(url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 1x,url(http://k003.kiwi6.com/hotlink/z6fy599487/c2.png) 2x) 32 32, auto;
}
body:active, input:active
{
cursor: url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 32 32, auto;
cursor: -webkit-image-set( url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 1x, url(http://k003.kiwi6.com/hotlink/6ma7828al1/c2a.png) 2x ) 32 32, auto;
}
#app-cover
{
position: absolute;
top: 50%;
right: 0;
left: 0;
width: 434px;
margin: -41px auto 0 auto;
}
#app
{
position: relative;
width: 82px;
height: 82px;
border-radius: 120px;
margin: 0 auto;
transition: 0.15s ease width;
z-index: 2;
}
form
{
position: relative;
height: 82px;
cursor: auto;
border-radius: 120px;
}
#f-element
{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: 120px;
}
#inp-cover
{
position: absolute;
top: 0;
right: 41px;
bottom: 0;
left: 0;
padding: 0 35px;
background-color: #fff;
}
input
{
display: block;
width: 100%;
font-size: 19px;
font-family: Arial, Helvetica, sans-serif;
color: #00688a;
border: 0;
padding: 30px 0;
margin: 0;
margin-top: 52px;
line-height: 1;
background-color: transparent;
transition: 0.15s ease margin-top;
cursor: auto;
}
button
{
position: absolute;
top: 0;
right: 0;
width: 82px;
height: 82px;
color: #fff;
font-size: 30px;
line-height: 1;
padding: 26px;
margin: 0;
border: 0;
background-color: #1eaddc;
transition: 0.2s ease background-color;
border-radius: 50%;
}
button.shadow
{
box-shadow: 0 10px 30px #d0d0d0;
}
button i.fas
{
display: block;
line-height: 1;
}
#layer
{
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #1eaddc;
transition: 0.9s ease all;
z-index: 1;
}
#layer.sl
{
transition: 0.3s ease all;
}
#layer, #init
{
position: fixed;
top: 50%;
margin: -40px auto 0 auto;
}
#layer
{
right: -100px;
left: -100px;
}
#init
{
right: 0;
left: 0;
width: 82px;
height: 82px;
cursor: pointer;
z-index: 2;
}
#app.opened
{
width: 434px;
box-shadow: 0 10px 30px #0190bf;
}
.opened input.move-up
{
margin-top: 0;
}
.opened button
{
color: #1eaddc;
background-color: #fff;
box-shadow: none;
cursor: pointer;
}
#app.opened + #layer
{
width: 4000px;
height: 4000px;
margin-top: -2000px;
opacity: 1;
z-index: 0;
}
#app.opened ~ #init
{
z-index: -1;
}
Raw
settings.json
{
"sass": {
"compiler": "Ruby Sass/3.7.4",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment