ETR Component Library

search-bar 

<form class="search-bar relative mt-4 w-full">
    <input type="text" class="border border-gray bg-white rounded mt-1 w-full h-12 px-2 text-gray-darkest text-lg font-sans" placeholder="What are you looking for?">
    <button type="submit" class=" flex text-primary text-lg absolute">Search <i class="search-icon ml-3 h-6 w-6"><?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="stroke-current">
<title>icon-search</title>
<g fill="none" fill-rule="evenodd">
<circle cx="15" cy="15" r="14" stroke-width="2"/>
<rect transform="translate(31.778 31.778) rotate(-45) translate(-31.778 -31.778)" x="31.278" y="22.278" width="1" height="19" fill="#D8D8D8"/>
</g>
</svg>
</i> </button>
</form>
 
<form class="search-bar relative mt-4 w-full">
  <input type="text" class="border border-gray bg-white rounded mt-1 w-full h-12 px-2 text-gray-darkest text-lg font-sans" placeholder="{{placeholder}}">
  <button type="submit" class=" flex text-primary text-lg absolute">Search <i class="search-icon ml-3 h-6 w-6">{{> @icon-search}}</i> </button>
</form>
 
{
  "placeholder": "What are you looking for?"
}
  • Content: 
    .search-bar {
  input {
    border-color: #E6ECF2;
  }
  &_expand {
width: 8rem;
  transition: width .7s;
  &--search-icon {
    left: 2px;
    top: 2px;
  }

}

  button {
    top: 15px;
    right: 15px;
  }

  .search-icon {

    padding-top: 4px;
  }

}
  • URL: /components/raw/search-bar/search-bar.scss
  • Filesystem Path: components/02-general-components/search-bar/search-bar.scss
  • Size: 257 Bytes

There are no notes for this item.