Input Addons

/../hex/src/forms/_addons.scss

These components help you to build more complex input elements. Now, you can create input fields with buttons and dropdowns.

<div>
  <label for="search">Search</label>
  <div class="input-group">
    <input id="search" placeholder="Describe your issue..." />
    <button class="button">Search</button>
  </div>
</div>

<div class="margin-t-big">
  <label for="search">Search</label>
  <div class="input-group">
    <input id="search" placeholder="Describe your issue..." />
    <div class="dropdown dropdown-right">
      <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">Open Dropdown</button>
      <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true" aria-label="submenu"
        aria-label="Select the element" role="menu">
        <li><a href="#" role="menuitem">First element</a></li>
        <li><a href="#" role="menuitem">Second element</a></li>
        <li class="dropdown__list__separator" aria-hidden="true"></li>
        <li><a href="#" role="menuitem">Last element</a></li>
      </ul>
    </div>
  </div>
</div>
/../hex/src/forms/_dropdown.scss
<div class="container margin-v-huge">
  <div class="row">
    <div class="col-3">
      <div class="dropdown">
        <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
        <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
          aria-label="Select the element" role="menu">
          <li><a href="#" role="menuitem">First element</a></li>
          <li><a href="#" role="menuitem">Second element</a></li>
          <li class="dropdown__list__separator" aria-hidden="true"></li>
          <li><a href="#" role="menuitem">Last element</a></li>
        </ul>
      </div>
    </div>

    <div class="col-3">
      <div class="dropdown">
        <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">Open Dropdown</button>
        <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
          aria-label="Select the element" role="menu">
          <li><a href="#" role="menuitem">First element</a></li>
          <li><a href="#" role="menuitem">Second element</a></li>
          <li class="dropdown__list__separator" aria-hidden="true"></li>
          <li><a href="#" role="menuitem">Last element</a></li>
        </ul>
      </div>
    </div>

    <div class="col-3">
      <div class="dropdown dropdown-right">
        <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">Right aligned drop</button>
        <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
          aria-label="Select the element" role="menu">
          <li><a href="#" role="menuitem">First element</a></li>
          <li><a href="#" role="menuitem">Second element</a></li>
          <li class="dropdown__list__separator"></li>
          <li><a href="#" role="menuitem">Last element</a></li>
        </ul>
      </div>
    </div>

    <div class="col-3">
      <div class="dropdown dropdown-top">
        <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">Top align</button>
        <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
          aria-label="Select the element" role="menu">
          <li><a href="#" role="menuitem">First element</a></li>
          <li><a href="#" role="menuitem">Second element</a></li>
          <li class="dropdown__list__separator" aria-hidden="true"></li>
          <li><a href="#" role="menuitem">Last element</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
/../hex/src/forms/_search.scss

Display a Search form and the results.

<form class="search">
  <label for="search">Search</label>
  <div class="input-group">
    <div class="search__input">
      <input id="search" placeholder="Describe your issue..."></input>
    </div>
    <div class="dropdown dropdown-right">
      <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">All Bitnami sites</button>
      <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
        aria-label="Select the element" role="menu">
        <li><a href="#" role="menuitem">Filter 1</a></li>
        <li><a href="#" role="menuitem">Filter 2</a></li>
        <li class="dropdown__list__separator" aria-hidden="true"></li>
        <li><a href="#" role="menuitem">Other section</a></li>
      </ul>
    </div>
  </div>

  <div class="search__results">
    <p class="search__results__caption">Query / 4 Results</p>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
  </div>
</form>
/../hex/src/forms/_search.scss

You only need to add the search-overlay class. In this example the results layer is visible due to inline-css, remember that the layer is hidden by default.

<form class="search search-overlay" style="min-height: 600px">
  <label for="search">Search</label>
  <div class="input-group">
    <div class="search__input">
      <input id="search" placeholder="Describe your issue..."></input>
    </div>
    <div class="dropdown dropdown-right">
      <button class="button button-dropdown" aria-haspopup="true" aria-expanded="false">All Bitnami sites</button>
      <ul class="dropdown__list remove-style elevation-1 slide-in" aria-hidden="true"
        aria-label="Select the element" role="menu">
        <li><a href="#" role="menuitem">Filter 1</a></li>
        <li><a href="#" role="menuitem">Filter 2</a></li>
        <li class="dropdown__list__separator" aria-hidden="true"></li>
        <li><a href="#" role="menuitem">Other section</a></li>
      </ul>
    </div>
  </div>

  <!-- This is hidden by default!!! -->
  <div class="search__results elevation-3" style="display: block;">
    <p class="search__results__caption">Query / 4 Results</p>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
    <div class="search__results__result">
      <h5>
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          Mail stopped working in virtual macine - Canvas LMS - Bitnami Community
        </a>
      </h5>
      <p class="margin-t-small type-small">
        <a href="https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100">
          https://community.bitnami.com/t/mail-stopped-working-in-virtual-macine/52100
        </a>
      </p>
      <p class="margin-b-normal">
        found that its working in Bitnami virtual machine but not working in Bitnami installer canvas. the settings of outgoinmail.yml is as follow. <em>test</em>...
      </p>
      <span class="tag tag-small">
        community.bitnami.com
      </span>
    </div>
  </div>
</form>