PDJ Brandbox

input-field 

<div class="parent-class input-field">
    <div class="input-field__inner">
        <input type="text" name="name" id="" value="" class="test">
        <span class="input-field__placeholder">Placeholder</span>
    </div>
    <div class="input-field__error">
        <p>This field is not filled in correctly or cannot be empty.</p>
    </div>
</div>
 
<div class="{{#if parentClass}}{{ parentClass }} {{/if}}input-field{{#if disabled}} is-disabled{{/if}}{{#if required}} is-required{{/if}}{{#if error}} has-error{{/if}}">
  <div class="input-field__inner">
    <input type="{{ type }}" name="{{ name }}" id="{{ id }}" value="{{ value }}"{{#if class}} class="{{ class }}"{{/if}}{{#if disabled}} disabled{{/if}}{{#if required}} required{{/if}}>
    <span class="input-field__placeholder">{{ placeholder }}</span>
  </div>
  <div class="input-field__error">
    <p>This field is not filled in correctly or cannot be empty.</p>
  </div>
</div>
 
placeholder: Placeholder
name: name
value: ''
parentClass: parent-class
class: test
required: false
disabled: false
id: ''
type: text
error: false
  • Content: 
    const INPUTFIELD = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.input-field',
    theInput: 'input',
  };

  const classes = {
    hasValue: 'has-value',
  };

  const els = {};

  const init = () => {
    els.theWraps = d.querySelectorAll(selectors.theWrap);

    if (!els.theWraps || els.theWraps.length <= 0) { return; }

    [...els.theWraps].forEach((theWrap) => {
      const theInput = theWrap.querySelector(selectors.theInput);

      theWrap.classList.toggle(classes.hasValue, theInput.value);

      theInput.addEventListener('input', () => {
        theWrap.classList.toggle(classes.hasValue, theInput.value);
      });
    });
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/input-field/input-field.js
  • Filesystem Path: ../src/02_atoms/input-field/input-field.js
  • Size: 757 Bytes
  • Content: 
    .input-field__inner {
  position: relative;
}

.input-field__inner input {
  display: block;
  width: 100%;
  height: var(--atom-height);
  padding: 0 var(--gap--4);
  box-sizing: border-box;
  font-size: inherit;
  border: 1px solid var(--color--neutrals-10);
  border-radius: 0 !important;
  background-color: var(--color--neutrals-0);
  box-shadow: none;

  /* Don't keep showing placeholder (with animation)
  .input-field.has-value & {
    padding-top: var(--gap--3);
  }
  */

  &[disabled]:not([disabled='false']) {
    color: var(--color--neutrals-5);
    background-color: var(--color--neutrals-3);
    cursor: not-allowed;
  }

  &::placeholder {
    color: var(--color--neutrals-7);
    opacity: .5;
  }
}

/* Don't keep showing placeholder (with animation)
.input-field__placeholder {
  transition: height 250ms, opacity 250ms, font-size 250ms;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--gap--4);
  color: var(--color--neutrals-7);
  line-height: 1;
  pointer-events: none;

  .input-field.has-value & {
    height: 20px;
    font-size: 10px;
    opacity: .7;
  }

  .input-field.is-disabled & {
    opacity: .5;
  }
}
*/

.input-field__placeholder {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  flex: 0 0 auto;
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 0 var(--gap--4);

  color: var(--color--neutrals-7);
  opacity: .5;
  line-height: 1;
  pointer-events: none;

  .input-field.has-value & {
    display: none;
  }
}

.input-field__error {
  display: none;
  justify-content: flex-start;
  font-size: 14px;
  color: var(--color--negative);

  .input-field.has-error & {
    display: flex;
  }
}
  • URL: /components/raw/input-field/input-field.scss
  • Filesystem Path: ../src/02_atoms/input-field/input-field.scss
  • Size: 1.8 KB

No notes defined.