Hero Search Horizontal

A Hero Search component represents a search form with a special styling. It contains form elements styled as Floating Placeholder.

---

Default Style

Default .h-search-h looks like this:

Copy
<div class="h-search-h">    
    <form action="#" class="hero-search-form">
       <div class="search-item">
            <div class="fltp">
                <input type="text" value="" required>
                <label class="placeholder" data-big-placeholder="Pickup location" data-little-placeholder="Pickup location"></label>
            </div>
       </div>
        <div class="search-item">
            <div class="fltp calendar-sq" id="rangestart">
                    <input type="text" class="filter" value="" required placeholder="enter date">
                    <label class="placeholder"  data-big-placeholder="Pickup date" data-little-placeholder="Pickup date"></label>
            </div>
            <i class="icon icon-little-arrow"></i>
            <div class="fltp calendar-sq" id="rangeend">
                <input type="text" class="filter" value="" required placeholder="enter date">
                <label class="placeholder"  data-big-placeholder="Return date" data-little-placeholder="Return date"></label>
            </div>
        </div>
        <div class="search-item">
            <div class="fltp">
                <select name="dropdown" size="13" class="dropdown" required>
                    <option value="0" selected>&nbsp;</option>
                    <option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
                </select>
                <label class="placeholder">Guests</label>
            </div>
        </div>
        <div class="search-item">
            <button class="button-sq hero-search-button">
                <i class="icon icon-account-circle-1"></i>
            </button>
        </div>

    </form>
</div>

---

Shadow

Hero Search Horizontal can get a shadow by adding .shadow-sq class.

Copy
<div class="h-search-h shadow-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

---

Height Option

Default Hero Search Horizontal component has 100% width and the same height as the floating placeholder.

Adding .thin-sq class will have a smaller height.

Copy
<div class="h-search-h thin-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

---

Color Option

Adding .colored-sq class to the Hero Search Horizontal component will have a background with the color from @linkColor Less variable.

You can animate this sample adding .animate-sq class. animate sample

Copy
<div class="h-search-v thin-sq shadow-sq colored-sq">
    <form action="#" class="hero-search-form">
        ...
    </form>
</div>

As you can observe, we can apply options in the same time from different categories to this module.

---