uikit/src/less/theme/search.less

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

//
// Component: Search
//
// ========================================================================


// Variables
// ========================================================================

@search-default-background:                         transparent;

@search-navbar-focus-background:                    @search-navbar-background;

@search-medium-background:                          transparent;

@search-large-background:                           transparent;

//
// New
//

@search-default-border-width:                       @global-border-width;
@search-default-border:                             @global-border;
@search-default-focus-border:                       @global-primary-background;

@search-navbar-border-width:                        @global-border-width;
@search-navbar-border:                              @global-border;
@search-navbar-focus-border:                        @global-primary-background;

@search-medium-border-width:                        @global-border-width;
@search-medium-border:                              @global-border;
@search-medium-focus-border:                        @global-primary-background;

@search-large-border-width:                         @global-border-width;
@search-large-border:                               @global-border;
@search-large-focus-border:                         @global-primary-background;


// Component
// ========================================================================

.hook-search-input() {}


// Icon
// ========================================================================

.hook-search-icon() {}


// Default modifiers
// ========================================================================

.hook-search-default-input() { border: @search-default-border-width solid @search-default-border; }

.hook-search-default-input-focus() { border-color: @search-default-focus-border; }


// Navbar modifiers
// ========================================================================

.hook-search-navbar-input() { border: @search-navbar-border-width solid @search-navbar-border; }

.hook-search-navbar-input-focus() { border-color: @search-navbar-focus-border; }


// Medium modifiers
// ========================================================================

.hook-search-medium-input() { border: @search-medium-border-width solid @search-medium-border; }

.hook-search-medium-input-focus() { border-color: @search-medium-focus-border; }


// Large modifiers
// ========================================================================

.hook-search-large-input() { border: @search-large-border-width solid @search-large-border; }

.hook-search-large-input-focus() { border-color: @search-large-focus-border; }


// Toggle
// ========================================================================

.hook-search-toggle() {}

.hook-search-toggle-hover() {}


// Miscellaneous
// ========================================================================

.hook-search-misc() {}


// Inverse
// ========================================================================

@inverse-search-default-background:             transparent;

@inverse-search-navbar-background:              transparent;

@inverse-search-medium-background:              transparent;

@inverse-search-large-background:               transparent;

.hook-inverse-search-default-input() { border-color: @inverse-global-border; }
.hook-inverse-search-default-input-focus() {}

.hook-inverse-search-navbar-input() { border-color: @inverse-global-border; }
.hook-inverse-search-navbar-input-focus() {}

.hook-inverse-search-medium-input() { border-color: @inverse-global-border; }
.hook-inverse-search-medium-input-focus() {}

.hook-inverse-search-large-input() { border-color: @inverse-global-border; }
.hook-inverse-search-large-input-focus() {}

.hook-inverse-search-toggle() {}
.hook-inverse-search-toggle-hover() {}