Lehigh Clutch Style Guide

Search Box 

<div class="searchbox">
    <form class="form-inline my-2 my-lg-0 main-search">
        <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
        <div class="search-container input-group ">
            <input class="form-control border-right-0 border" type="search" placeholder="Search" aria-label="Search">
            <div class="search_buttons_wrapper">
                <span class="input-group-append">
                    <button data-drupal-selector="edit-submit" id="edit-submit" class="btn btn-outline-info border-left-0 border-right-0 border js-form-submit form-submit" type="submit"><i class="fas fa-search"></i><span class="sr-only">Search</span></button>
                </span>
                <span class="input-group-append close_search">
                    <button class="btn btn-outline-danger border-left-0 border" type="button"><i class="fa fa-times"></i><span class="sr-only">Close the search box</span></button>
                </span>
            </div><!-- end search_buttons_wrapper -->
        </div>
    </form>
</div>
 
<div class="searchbox">
  <form class="form-inline my-2 my-lg-0 main-search">
    <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
    <div class="search-container input-group ">
      <input class="form-control border-right-0 border" type="search" placeholder="Search" aria-label="Search">
      <div class="search_buttons_wrapper">
        <span class="input-group-append">
          <button data-drupal-selector="edit-submit" id="edit-submit" class="btn btn-outline-info border-left-0 border-right-0 border js-form-submit form-submit" type="submit"><i class="fas fa-search"></i><span class="sr-only">Search</span></button>
        </span>
        <span class="input-group-append close_search">
          <button class="btn btn-outline-danger border-left-0 border" type="button"><i class="fa fa-times"></i><span class="sr-only">Close the search box</span></button>
        </span>
      </div><!-- end search_buttons_wrapper -->
    </div>
  </form>
</div>
 
/* No context defined. */
  • Content: 
    .searchbox {
  .main-search {
    .btn {
      &::after {
        content: "";
        position: unset;
        right: unset;
      }
    }
  }

  .search-container {
    justify-content: space-between;

    .search_buttons_wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
    }
  }

  .search-form {
    .form-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      margin: 0 0 $spacer 0;

      &.search-advanced {
        margin: $spacer 0;
      }

      .custom-control {
        padding-left: 0;
        margin: $spacer $spacer 0 0;

        .custom-control-label {
          font-weight: bold;

          &::before,
          &::after {
            display: none;
          }
        }
      }

      .form-search {
        margin: $space_one_quarter 0 0 0;
      }

      input[type="submit"] {
        width: unset;
        height: fit-content;
        padding: $spacer;
      }
    }
  }

  .custom-control-input {
    position: unset;
    opacity: 1;
  }

  .search-advanced {
    summary[role="button"] {
      &::before {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/search_box/search_box.scss
  • Filesystem Path: bits/04-components/_search_box/search_box.scss
  • Size: 1.2 KB

No notes defined.