Search

index.html

<div id="search-bar" class="search-bar">
    <input type="text" />
    <div id="close" class="toggle"></div>
</div>

<p>
    Inspired by <a href="https://dribbble.com/shots/1992789-Search?list=buckets&offset=0" target="_blank">this dribbble</a>
</p>

script.js

$('#close').click(function(){
	$(this).parent().toggleClass('closed');
    $(this).prev().focus();
});

setTimeout(function() {
    $('#close').click();
}, 100);

setTimeout(function() {
    $('#close').click();
}, 1500);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

search.markdown

Search

Just felt like recreating this wonderful little dribbble: https://dribbble.com/shots/1992789-Search?list=buckets&offset=0

A Pen by SH20RAJ on CodePen.

License.

style.scss

@import "compass/css3";

body {
    background: #E62878;
    padding-top: 8em;
    color: white;
    text-align: center;
    font-family: "europa",sans-serif;
    font-style: normal;
    font-weight: 300;
}
p { margin-top: 3em; }
a { color: lighten(#E62878, 20); }

$height: 50px;
$width: 300px;
$border-width: 4px;
$color: white;
$bg-color: #E62878;
$defualt-transition-function: cubic-bezier(.73,.01,.53,1.38);
$defualt-animation-timing-function: cubic-bezier(1,.01,.46,1.48);

.search-bar {
    @include transition(all 0.5s cubic-bezier(.7,.03,.17,.97) .25s);
    position: relative;
    width: $width;
    height: $height;
    margin: 0 auto;
    input {
        outline: none;
        box-shadow: none;
        height: $height;
        line-height: $height;
        width: 100%;
        padding: 0 1em;
        box-sizing: border-box;
        background: transparent;
        color: $color;
        border: $border-width solid $color;
        border-radius: $height;
    }
    .toggle {
        @include transition(all 0.5s cubic-bezier(.98,.02,.46,.99) .25s);
        position: absolute;
        width: $height; height: $height;
        cursor: pointer;
        right: 0; top: 0;
        border-radius: $height;
        .toggle:after, .toggle:before { border-color: lighten($bg-color, 15); }
    }
    .toggle:after, .toggle:before {
        @include transition;
        content:'';
        display: block;
        position: absolute;
        right: 0; width: 0; height: $height/2;
        border-left: $border-width solid $color;
        border-radius: $border-width;
        top: 0;
    }
    .toggle:before {
        @include animation(close-one-reverse .85s 1 normal cubic-bezier(1,.01,.46,1.48));
        @include transform(translate(-$height/2, $height/4) rotate(45deg));
    }
    .toggle:after {
        @include animation(close-two-reverse .85s 1 normal cubic-bezier(1,.01,.46,1.48));
        @include transform(translate(-$height/2, $height/4) rotate(-45deg));
    }
    &.closed {
        width: $height;
        input { color: $bg-color; }
        .toggle:before {
            @include animation(close-one .85s 1 normal cubic-bezier(1,.01,.46,1.48));
            height: 0px; @include transform(translate(-8px, 8px) rotate(45deg));
        }
        .toggle:after {
            @include animation(close-two .85s 1 normal cubic-bezier(1,.01,.46,1.48));
            height: $height/2; @include transform(translate(0, $height*0.75) rotate(-45deg));
        }
    }
}
@include keyframes(close-one) {
    0% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(45deg)); }
    10% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(45deg)); }
    60% { height: 0px; @include transform(translate(-8px, 8px) rotate(45deg)); }
    100% { height: 0px; @include transform(translate(-8px, 8px) rotate(45deg)); }
}
@include keyframes(close-two) {
    0% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(-45deg)); }
    60% { height: 2px; @include transform(translate(-6px, $height*0.75) rotate(-45deg)); }
    70% { height: 2px; @include transform(translate(-6px, $height*0.75) rotate(-45deg)); }
    100% { height: $height/2; @include transform(translate(0, $height*0.75) rotate(-45deg)); }
}

@include keyframes(close-one-reverse) {
    0% { height: 0px; @include transform(translate(-8px, 8px) rotate(45deg)); }
    40% { height: 0px; @include transform(translate(-8px, 8px) rotate(45deg)); }
    80% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(45deg)); }
    100% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(45deg)); }
}
@include keyframes(close-two-reverse) {
    0% { height: $height/2; @include transform(translate(0, $height*0.75) rotate(-45deg)); }
    40% { height: 2px; @include transform(translate(-6px, $height*0.75 + 3) rotate(-45deg)); }
    50% { height: 2px; @include transform(translate(-6px, $height*0.75 + 3) rotate(-45deg)); }
    100% { height: $height/2; @include transform(translate(-$height/2, $height/4) rotate(-45deg)); }
}