PDJ Brandbox

search-field 

<div class="search-field">
    <div class="search-field__input">
        <div class="parent-class input-field is-required">
            <div class="input-field__inner">
                <input type="text" name="q" id="" value="" class="search-field__input" required>
                <span class="input-field__placeholder">Search..</span>
            </div>
            <div class="input-field__error">
                <p>This field is not filled in correctly or cannot be empty.</p>
            </div>
        </div>

    </div>

    <div class="search-field__submit">
        <div class="action action--normal action--on-light action--icon">
            <span class="action__icon">
                <svg class="icon-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 57">
                    <path fill="currentColor" d="M60 54.93 39.86 34.91a21.74 21.74 0 0 0 4.28-12.97C44.14 9.84 34.24 0 22.07 0S0 9.84 0 21.94s9.9 21.94 22.07 21.94c6.23 0 11.87-2.59 15.88-6.73L57.92 57 60 54.93ZM22.07 40.95c-10.55 0-19.13-8.53-19.13-19.02S11.52 2.92 22.07 2.92 41.2 11.45 41.2 21.94s-8.58 19.02-19.13 19.02Z" />
                </svg>

            </span>

            <span class="action__bg"></span>
        </div>
    </div>
</div>
 
<div class="search-field">
  <div class="search-field__input">
    {{render '@input-field' input merge=true}}
  </div>

  <div class="search-field__submit">
    <div class="action action--normal action--on-light action--icon">
      <span class="action__icon">
        {{render '@icon-search' }}
      </span>

      <span class="action__bg"></span>
    </div>
  </div>
</div>
 
input:
  placeholder: Search..
  name: q
  required: true
  disabled: false
  value: ''
  class: search-field__input
  • Content: 
    .search-field {
  position: relative;
  display: flex;
}

.search-field__input {
  flex: 1 1 auto;
}

.search-field__input input {
  border-right: none;
}

.search-field__submit {
  flex: 0 0 auto;
  width: var(--atom-height);
}
  • URL: /components/raw/search-field/search-field.scss
  • Filesystem Path: ../src/03_molecules/search-field/search-field.scss
  • Size: 229 Bytes

No notes defined.