<input class="input" placeholder="Placeholder" type="text"></input>
//- Render input
#{tag || 'input'}.input()&attributes(attr)
{
  "attr": {
    "placeholder": "Placeholder",
    "type": "text"
  }
}
  • Content:
    .input {
      appearance: none;
      background-color: $form-input-background;
      border: $form-input-border;
      border-radius: $form-border-radius;
      box-sizing: border-box;
      color: $form-input-color;
      display: block;
      font-family: $root-font-family;
      font-size: $form-input-font-size;
      height: $form-input-height;
      outline: none;
      padding: $form-input-height * 0.2 1.5rem;
      width: 100%;
    
      &:focus {
        background-color: $form-input-focus-background;
        border: $form-input-focus-border;
      }
    
      &::placeholder {
        color: $form-placeholder-color;
      }
    
      &[disabled] {
        opacity: 0.5;
      }
    }
    
  • URL: /components/raw/input/input.scss
  • Filesystem Path: src/components/atoms/input/input.scss
  • Size: 597 Bytes

There are no notes for this item.