HAS Green Academy styleguide

Minisearch

1179 × 333 
<form class="c-minisearch" action="" method="get">
    <div class="o-layout  o-layout--fill  o-layout--stretch">
        <div class="c-minisearch__icon-and-input">
            <label class="c-minisearch__icon" for="search">
                <span class="u-visually-hidden">Zoekterm</span>
                <svg class="c-icon    " aria-hidden="true">
                    <use xlink:href="../../dist/sprite.svg#icon-search" />
                </svg>

            </label>
            <input type="text" class="c-input-text  c-minisearch__input" id="search" name="search" placeholder="Zoek op opleiding, cursussen en andere informatie...">
        </div>
        <div class="o-layout__fit">
            <button type="submit" class="c-button                ">
                <span class="c-button__inner">
                    <span class="c-button__label  " data-module-bind="btn-label">
                        zoeken
                    </span>

                </span>
            </button>
        </div>
    </div>
</form>
 
<form class="c-minisearch" action="" method="get">
  <div class="o-layout  o-layout--fill  o-layout--stretch">
    <div class="c-minisearch__icon-and-input">
      <label class="c-minisearch__icon" for="search">
        <span class="u-visually-hidden">Zoekterm</span>
        {{> '@atoms-icon' icon='search' }}
      </label>
      {{> '@atoms-input-text' type='text' name='search' id='search' placeholder='Zoek op opleiding, cursussen en andere informatie...' class='c-minisearch__input' }}
    </div>
    <div class="o-layout__fit">
      {{> '@atoms-button' element='button' type='submit' label='zoeken' }}
    </div>
  </div>
</form>
 
/* No context defined. */
  • Content: 
    /*  =========================================================================
    Components.Minisearch
    ========================================================================= */

@use 'node_modules/@supple-kit/supple-css/tools/responsive';



/*  Block
    ========================================================================= */

.c-minisearch {
  // empty for reference
}



/*  Elements
    ========================================================================= */

.c-minisearch__icon-and-input {
  display: grid;

  > * {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
  }
}

.c-minisearch__icon {
  display: none;
  align-self: center;
  justify-self: start;
  z-index: 1;
  padding-inline-start: var(--space-small);
}

.c-minisearch__input {
  // empty for reference
}



/*  Responsive
    ========================================================================= */

@include responsive.mq(lap) {
  .c-minisearch__icon {
    display: block;
  }

  .c-minisearch__input {
    padding-inline-start: var(--space-large);
  }
}
  • URL: /components/raw/molecules-minisearch/_minisearch.scss
  • Filesystem Path: src/components/molecules/minisearch/_minisearch.scss
  • Size: 1 KB

No notes defined.