Search and Filters

search-filters.html

<div class="uim-search-filter">
    <form class="search">
        <input type="text" placeholder="Search by Name, Description or Sales Channel" class="form-control input-lg" autofocus="">

        <div class="uim-btn-filter dropdown">
            <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
                <span class="uim-filter-count badge">0</span>
                <i class="fa fa-filter"></i>&nbsp;
                <span class="caret"></span>
            </button>

            <ul class="dropdown-menu">
                <li class="dropdown-header">Status</li>
                    <li>
                        <a tabindex="-1" href="javascript:void(0)">
                            <label class="checkbox"><input type="checkbox"> Actives</label>
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="javascript:void(0)">
                            <label class="checkbox"><input type="checkbox"> Inactives</label>
                        </a>
                    </li>
                <li class="divider"></li>
                <li class="dropdown-header">Kind</li>
                    <li>
                        <a tabindex="-1" href="javascript:void(0)">
                            <label class="checkbox"><input type="checkbox"> Regular</label>
                        </a>
                    </li>
                    <li>
                        <a tabindex="-1" href="javascript:void(0)">
                            <label class="checkbox"><input type="checkbox"> Special</label>
                        </a>
                    </li>
            </ul>
        </div>

        <!-- Clear input and filters -->
        <div class="uim-btn-clear-query hide">
            <button type="btn" class="btn btn-default uim-filter-clear">
                <i class="fa fa-remove"></i>
            </button>
        </div>

        <div class="uim-active-filters hide">
            <span class="label label-primary">
                Actives 
                <a href="javascript:void(0);"><i class="fa fa-times-circle"></i></a>
            </span>
            <span class="label label-primary">
                Special 
                <a href="javascript:void(0);"><i class="fa fa-times-circle"></i></a>
            </span>
        </div>

    </form>
</div>

search-filters.less

.uim-search-filter {
	position: relative;
	.input-lg {
		height: 49px;
		text-indent: 64px;
		padding-right: 44px;
	}
	input, 
	.btn, 
	.uim-filter-count,
	a {
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		    -ms-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
	}
	label {
		margin: 0;
		padding: 4px 20px 4px 35px;
		font-weight: normal;
		cursor: pointer;
	}
	.uim-btn-clear-query {
		position: absolute;
		right: 6px;
		top: 6px;
		.btn {
			color: #B7B7B7;
			border-color: #EAEAEA;
			background-color: #F6F6F6;
			height: 38px;
			width: 36px;

			&:hover {
				border-color: #F4D09E;
				color: #F1C384;
				background-color: #FDEDD7;
			}
		}
	}
	.uim-active-filters {
		margin-top: 4px;
		.label {
			font-size: 14px;
			margin-right: 5px;
			background-color: #3a87ad;

			a {
				color: #fff;
				padding: 3px 8px;
				margin-right: -10px;
				&:hover {
					color: #F1C384;
				}
			}
		}
	}
}

// No filter variation
.uim-search-no-filter {
	.input-lg {text-indent: 4px;}
}

.uim-btn-filter {
	position: absolute;
	top: 2px;
	left: 2px;

	.caret {opacity: .3;}

	.btn {color: #999;}

	.dropdown-header {
		font-weight: bold;
		text-transform: uppercase;
		color: #999;
		padding-left: 15px;
	}

	&.uim-filter-checked .btn,
	&.uim-filter-checked.open .btn {
		background: #3a87ad;
		color: #fff;
		border-color: #1674A9;
	}
	&.dropdown.open .btn,
	&.uim-filter-checked.open .btn {
		box-shadow: inset 0 2px 2px 1px rgba(0,0,0,.15);
	}

	.dropdown-menu>li>a {padding: 0;}

	.uim-filter-count {
		position: absolute;
		top: -5px;
		right: -5px;
		border: 1px solid #729FB6;
		border-radius: 10px;
		padding: 2px 6px;
		background: #fff;
		color: #005580;
		box-shadow: 0 0 2px rgba(0,0,0,.4);
		opacity: 0;
	}
	//Show filters count
	&.uim-filter-checked .uim-filter-count {opacity: 1;}

}