.search-module

quick ux module (midnight)

by heavyhorse

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<h1>.search-module</h1>

<div class="module">
    <div class="wrapper">
        <div class="box">
            <input type="text" placeholder="search module"></input>
        </div>
        <div class="icon">
            <i class="icon-remove-sign"></i>
        </div>
    </div>
</div>

CSS

*{ box-sizing: border-box; }

h1{
    line-height:1.75;
    font-size: 1.3em;
    font-family: sans-serif;
}

body {
    /* background: #0C95E1; */
    background: transparent;
    margin:0;
    padding:0.33em;
}

.module {
    min-width: 230px;
    width: 100%;
    height: 29px;
/*     background: #f3f3f3; */
    overflow: hidden;
    position: relative;
}

.wrapper {
    display: inline-block;
    width: 25%;
    height: 100%;
    transition: all .75s ease-out;
    padding: 0;
    position: relative;            
}

.box {
    width: 100%;
    height:100%;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 3px #ccc;
    padding: .22em 23px 0 .4em;
}

.box input {
    background: transparent;
    width: 100%;
    font-size: .75em;
    border: none;
    color: #282828;
    outline: 0;
}

.box-focus {
    border: 1px solid #36B2F7;
    box-shadow: inset 0 0 2px #36B2F7;
}

.icon {
    font-size: 1em;
    position: absolute;
    top:0.33em; right:.5em;
    cursor: pointer;
}

JavaScript

$(function(){
    var $input = $('input');
    var $icon = $('.icon');
    var $box = $('.box');
    var $wrapper = $('.wrapper');
    
    $input.on('focus', function() {
        $box.addClass('box-focus');
        $wrapper.css('width', '100%');
    })
    .on('blur', function() {
        $box.removeClass('box-focus');
        $wrapper.css('width', '25%');
    });
    
    $icon.on('click', function() {
        $input.val('');
    });
    
});