310 lines
8.0 KiB
Plaintext
310 lines
8.0 KiB
Plaintext
// Name: Search
|
|
// Description: Defines a search component
|
|
//
|
|
// Component: `uk-search`
|
|
//
|
|
// Sub-objects: `uk-search-field`
|
|
//
|
|
// 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
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-search -->
|
|
// <form class="uk-search" data-uk-search>
|
|
// <input class="uk-search-field" type="search" placeholder="">
|
|
// </form>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// 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);
|
|
|
|
// 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`
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Removes inner padding and border in Firefox 4+.
|
|
*/
|
|
|
|
.uk-search-field::-moz-focus-inner {
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/*
|
|
* Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
|
|
*/
|
|
|
|
.uk-search-field::-webkit-search-cancel-button,
|
|
.uk-search-field::-webkit-search-decoration { -webkit-appearance: none; }
|
|
|
|
/*
|
|
* Removes cancel button in IE10
|
|
*/
|
|
|
|
.uk-search-field::-ms-clear { display: none; }
|
|
|
|
/*
|
|
* Removes placeholder transparency in Firefox.
|
|
*/
|
|
|
|
.uk-search-field::-moz-placeholder { opacity: 1; }
|
|
|
|
/*
|
|
* 1. Define consistent box sizing.
|
|
* 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
|
|
* 3. Remove `border-radius` in iOS.
|
|
* 4. Correct `font` properties and `color` not being inherited.
|
|
* 5. Remove default style in iOS.
|
|
* 6. Style
|
|
*/
|
|
|
|
.uk-search-field {
|
|
/* 1 */
|
|
box-sizing: border-box;
|
|
/* 2 */
|
|
margin: 0;
|
|
/* 3 */
|
|
border-radius: 0;
|
|
/* 4 */
|
|
font: inherit;
|
|
color: @search-color;
|
|
/* 5 */
|
|
-webkit-appearance: none;
|
|
/* 6 */
|
|
width: @search-width;
|
|
height: @search-height;
|
|
padding: 0 0 0 @search-padding;
|
|
border: @search-border-width solid @search-border;
|
|
background: @search-background;
|
|
-webkit-transition: all 0.2s linear;
|
|
transition: all 0.2s linear;
|
|
vertical-align: middle;
|
|
.hook-search-field;
|
|
}
|
|
|
|
/* Placeholder */
|
|
.uk-search-field:-ms-input-placeholder { color: @search-placeholder-color !important; }
|
|
.uk-search-field::-moz-placeholder { color: @search-placeholder-color; }
|
|
.uk-search-field::-webkit-input-placeholder { color: @search-placeholder-color; }
|
|
|
|
/* Focus */
|
|
.uk-search-field:focus {
|
|
outline: 0;
|
|
.hook-search-field-focus;
|
|
}
|
|
|
|
/* Focus + Active */
|
|
.uk-search-field:focus,
|
|
.uk-search.uk-active .uk-search-field { width: @search-focus-width; }
|
|
|
|
|
|
/* 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 !important; }
|
|
.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-dropdown-search() {}
|
|
.hook-nav-search() {}
|
|
.hook-nav-search-active() {}
|
|
.hook-nav-search-header() {}
|
|
.hook-nav-search-divider() {}
|
|
.hook-offcanvas-search-field() {}
|
|
|
|
.hook-search-misc() {}
|