Login Register

Kayzen

Search Box

assets/modules/objects/search

Files

  • _search.scss
  • search.js
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/search

Module Overview

  • Name: search-box
  • Modifiers: visible
  • Components: go, close

Examples

<div class="search-box">
    <form class="container">
        <input required type="search" placeholder="Enter search query..." />
        <div class="button_group-small">
            <button class="search-box_go button-icon-primary" type="submit">
                <i class="fa fa-search"></i>
            </button>
            <span class="search-box_close button-icon">
                <i class="fa fa-times"></i>
            </span>
        </div>
    <<form>
</div>


<span id="search-trigger">
    <i class="fa fa-search"></i>
</span>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the searchBox() function on your desired trigger:

$('#search-trigger').searchBox();

Options

$('#search-trigger').searchBox({
    container    : '.search-box',
    input        : '[type="search"]',
    closeTrigger : '.search-box_close',
    visibleClass : 'search-box-visible'
});

Customizing

The Search module can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name Default Value Description
output-JSON true This allows the config to be accessed in the JavaScript.
background color('greyscale', 'grey-5') The background color for the main search module.
height option($top-bar, 'height') The height of the module.
input-background color('greyscale', 'grey-5') The background of the input element.
input-color color('greyscale', 'grey-5') The text color of the input element.
input-weight lighter The font weight of the input element.
placeholder-color base('text-color') The color of the input placeholder.
placeholder-weight lighter The font weight of the input placeholder.

To change one of the above values, pass your new value(s) to the search-box() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include search-box((
    'background'  : white,
    'input-color' : #222222
));