Your IP : 216.73.216.170
// Name: Search
// Description: Defines a search component
//
// Component: `uk-search`
//
// Sub-objects: `uk-search-field`
// `uk-search-close`
//
// Modifier: (Nav) `uk-nav-search`
// (Dropdown) `uk-dropdown-search`
//
// States: `uk-active`
// `uk-loading`
//
// Uses: Animation
// Icon: FontAwesome
// Navbar: `uk-navbar-flip`
//
// Used by: Off-canvas
//
// ========================================================================
// Variables
// ========================================================================
@search-width: 120px;
@search-focus-width: 180px;
@search-height: 30px;
@search-padding: 30px;
@search-border: rgba(0,0,0,0);
@search-border-width: 1px;
@search-background: rgba(0,0,0,0);
@search-color: #444;
@search-placeholder-color: #999;
@search-icon: "\f002";
@search-icon-size: 14px;
@search-icon-color: rgba(0,0,0,0.2);
@search-close-icon: "\f00d";
@search-close-size: 14px;
@search-close-color: rgba(0,0,0,0.2);
@search-close-icon-loading: "\f110";
// Dropdown modifier
@dropdown-search-width: 300px;
@dropdown-search-margin-top: 0;
@dropdown-search-background: #f5f5f5;
@dropdown-search-color: #444;
@dropdown-search-animation: uk-slide-top-fixed;
@dropdown-search-navbar-margin-top: 5px;
@dropdown-search-navbar-margin-right: -15px;
// Nav modifier
@nav-search-color: #444;
@nav-search-active-background: #00a8e6;
@nav-search-active-color: #fff;
@nav-search-header-color: #999;
@nav-search-divider-border: #ddd;
@nav-search-divider-border-width: 1px;
@nav-search-nested-color: #07D;
@nav-search-nested-hover-color: #059;
// Search in offcanvas
@offcanvas-search-margin: 20px 15px;
@offcanvas-search-background: #1a1a1a;
@offcanvas-search-border: rgba(0,0,0,0);
@offcanvas-search-color: #ccc;
@offcanvas-search-placeholder-color: #777;
@offcanvas-search-icon-color: #777;
/* ========================================================================
Component: Search
========================================================================== */
/*
* 1. Create position context for dropdowns
* 2. Needed for `form` element
*/
.uk-search {
display: inline-block;
/* 1 */
position: relative;
/* 2 */
margin: 0;
.hook-search;
}
/*
* Icon
*/
.uk-search:before {
content: @search-icon;
position: absolute;
top: 0;
left: 0;
width: @search-padding;
line-height: @search-height;
text-align: center;
font-family: FontAwesome;
font-size: @search-icon-size;
color: @search-icon-color;
.hook-search-icon;
}
/* Sub-object `uk-search-field`
========================================================================== */
/*
* 1. Needed to reset iOS `input[type="search"]` appearance
*/
.uk-search-field {
width: @search-width;
height: @search-height;
padding: 0 @search-padding;
border: @search-border-width solid @search-border;
background: @search-background;
color: @search-color;
-webkit-transition: all linear 0.2s;
transition: all linear 0.2s;
/* 1 */
border-radius: 0;
.hook-search-field;
}
/*
* Needed to reset iOS `input[type="search"]` appearance
* Higher specificity to override appearance set by normalize.less
*/
input.uk-search-field { -webkit-appearance: none; }
/* Placeholder */
.uk-search-field:-ms-input-placeholder { color: @search-placeholder-color; }
.uk-search-field::-moz-placeholder { color: @search-placeholder-color; }
.uk-search-field::-webkit-input-placeholder { color: @search-placeholder-color; }
/* Removes cancel button in IE10 */
.uk-search-field::-ms-clear { display: none; }
/* Focus */
.uk-search-field:focus {
outline: 0;
.hook-search-field-focus;
}
/* Focus + active */
.uk-search-field:focus,
.uk-active .uk-search-field { width: @search-focus-width; }
/* Sub-object `uk-search-close`
========================================================================== */
/*
* 1. Required for `button` elements
* 2. Needed for Safari
*/
.uk-search-close {
display: none;
position: absolute;
top: 0;
right: 0;
width: @search-padding;
line-height: @search-height;
text-align: center;
font-size: @search-close-size;
color: @search-close-color;
/* 1. */
padding: 0;
border: 0;
-webkit-appearance: none;
/* 2. */
background: transparent;
.hook-search-close;
}
.uk-loading > .uk-search-close,
.uk-active > .uk-search-close { display: block; }
/*
* Icon
*/
.uk-search-close:after {
display: block;
content: @search-close-icon;
font-family: FontAwesome;
}
/* Loading icon */
.uk-loading > .uk-search-close:after {
content: @search-close-icon-loading;
-webkit-animation: uk-spin 2s infinite linear;
animation: uk-spin 2s infinite linear;
}
/* Dropdown modifier: `uk-dropdown-search`
========================================================================== */
.uk-dropdown-search {
width: @dropdown-search-width;
margin-top: @dropdown-search-margin-top;
background: @dropdown-search-background;
color: @dropdown-search-color;
.hook-dropdown-search;
}
.uk-open > .uk-dropdown-search {
-webkit-animation: @dropdown-search-animation 0.2s ease-in-out;
animation: @dropdown-search-animation 0.2s ease-in-out;
}
/*
* Dependency `uk-navbar-flip`
*/
.uk-navbar-flip .uk-dropdown-search {
margin-top: @dropdown-search-navbar-margin-top;
margin-right: @dropdown-search-navbar-margin-right;
}
/* Nav modifier `uk-nav-search`
========================================================================== */
/*
* Items
*/
.uk-nav-search > li > a {
color: @nav-search-color;
.hook-nav-search;
}
/*
* Active
* 1. Remove default focus style
*/
.uk-nav-search > li.uk-active > a {
background: @nav-search-active-background;
color: @nav-search-active-color;
/* 1 */
outline: none;
.hook-nav-search-active;
}
/*
* Sub-object: `uk-nav-header`
*/
.uk-nav-search .uk-nav-header {
color: @nav-search-header-color;
.hook-nav-search-header;
}
/*
* Sub-object: `uk-nav-divider`
*/
.uk-nav-search .uk-nav-divider {
border-top: @nav-search-divider-border-width solid @nav-search-divider-border;
.hook-nav-search-divider;
}
/*
* Nested items
*/
.uk-nav-search ul a { color: @nav-search-nested-color; }
.uk-nav-search ul a:hover { color: @nav-search-nested-hover-color; }
/* Search in offcanvas
========================================================================== */
.uk-offcanvas .uk-search {
display: block;
margin: @offcanvas-search-margin;
}
.uk-offcanvas .uk-search:before { color: @offcanvas-search-icon-color; }
.uk-offcanvas .uk-search-field {
width: 100%;
border-color: @offcanvas-search-border;
background: @offcanvas-search-background;
color: @offcanvas-search-color;
.hook-offcanvas-search-field;
}
.uk-offcanvas .uk-search-field:-ms-input-placeholder { color: @offcanvas-search-placeholder-color; }
.uk-offcanvas .uk-search-field::-moz-placeholder { color: @offcanvas-search-placeholder-color; }
.uk-offcanvas .uk-search-field::-webkit-input-placeholder { color: @offcanvas-search-placeholder-color; }
// Hooks
// ========================================================================
.hook-search-misc;
.hook-search() {}
.hook-search-icon() {}
.hook-search-field() {}
.hook-search-field-focus() {}
.hook-search-close() {}
.hook-dropdown-search() {}
.hook-nav-search() {}
.hook-nav-search-active() {}
.hook-nav-search-header() {}
.hook-nav-search-divider() {}
.hook-offcanvas-search-field() {}
.hook-search-misc() {}