<div class="search__wrapper">
    <form method="get" class="search__form">
        <label class="search__label">
          <span class="vgr-visually-hidden">Sök på webbplatsen</span>
          <input type="search" name="q" placeholder="Sök på webbplatsen" class="search-input-box search__field">
      </label>

        <button class="vgr-button" type="submit">
<svg class="vgr-icon vgr-icon--" ><use xlink:href="/icons/sprite/icons.svg#search"></use></svg>
 
</button>

    </form>
</div>
<div class="search__wrapper">
  <form method="get" class="search__form">
      <label class="search__label">
          <span class="vgr-visually-hidden">Sök på webbplatsen</span>
          <input type="search" name="q" placeholder="Sök på webbplatsen" class="search-input-box search__field">
      </label>
      {% render "@button--icon" %}
  </form>
</div>
/* No context defined for this component. */
  • Content:
    .search__wrapper {
      display: block!important;
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 15px;
      padding-left: 15px;
      position: relative;
    }
    
    .search__form {
      display: flex;
      top: -3rem;
      right: 15px;
    
      .search__label {
        display: flex;
        width: 100%;
      }
    
      .search__field {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border: none;
        padding: .5rem .625rem;
        color: #494746;
        flex-grow: 1;
        line-height: normal;
        -webkit-appearance: none;
        font-size: .8rem;
        width: 14rem;
      }
    
      & .vgr-button {
        border-color: #4ab31f;
        border-bottom-color: #075d2d;
        background-color: #13aa55;
        background-image: linear-gradient(to bottom, #4ab31f 0, #39791f 100%);
    
        position: relative;
        border: none;
        line-height: normal;
        border-radius: 0 4px 4px 0;
        margin-left: -.375rem;
        padding: .5rem .9375rem;
        width: 60px;
        height: 2.25rem;
    
        .vgr-icon {
          fill: #fff;
          display: inline-block;
          width: 28px;
          height: 28px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
      }
    }
    
  • URL: /components/raw/search-bar/_search-bar.scss
  • Filesystem Path: components/components/search/search-bar/_search-bar.scss
  • Size: 1.1 KB

There are no notes for this item.