Input

<div class="input ">
    <label class="
            label
            input__label
            
        " for="field-id">
        Label text
    </label>
    <input class="input__field " id="field-id" name="field-name" type="text" placeholder="First and last name">
</div>
<div class="input {{ class }}" {{{ attributes }}}>
    <label
        class="
            label
            input__label
            {{#if label.hidden }}
                label--hidden
            {{/if}}
            {{ label.class }}
        "
        for="{{ field.id }}"
        {{{ label.attributes }}}
    >
        {{ label.text }}
    </label>
    <input
        class="input__field {{ field.class }}"
        id="{{ field.id }}"
        name="{{ field.name }}"
        type="{{ field.type }}"
        placeholder="{{ field.placeholder }}"
        {{{ field.attributes }}}
    >
</div>
{
  "attributes": "",
  "class": "",
  "label": {
    "attributes": "",
    "text": "Label text",
    "hidden": false
  },
  "field": {
    "attributes": "",
    "class": "",
    "id": "field-id",
    "name": "field-name",
    "placeholder": "First and last name",
    "type": "text"
  }
}
  • Content:
    $input__field-padding                            : 0 $spacer--medium !default;
    $input__field-spacing                            : $spacer--extra-large !default;
    $input__field-border                             : $form-elements-border !default;
    $input__field-border-radius                      : $form-elements-radius !default;
    $input__margin-bottom                            : $spacer--medium !default;
    $input__placeholder-color                        : $color-secondary !default;
    $input__placeholder-font-size                    : $font-size-base !default;
    $input__label-margin                             : 0 $spacer--medium 0 0 !default;
    $input__label-focus-color                        : $color-primary !default;
    $input__date-trigger-left                        : 0 !default;
    $input__date-trigger-bottom                      : 0 !default;
    $input__date-trigger-width                       : 100% !default;
    $input__date-trigger-border                      : 0 !default;
    $input__date-trigger-background                  : transparent !default;
    $input__date-trigger-box-shadow                  : none !default;
    $input__transition                               : $transition-base !default;
    $input__white-space--inline                      : nowrap !default;
    
    // Input password
    $input__button-pass-bg                           : transparent !default;
    $input__button-pass-top                          : $spacer--2 !default;
    $input__button-pass-right                        : $form-element-border-width !default;
    $input__button-pass-height                       : $input__field-spacing - (4 * $form-element-border-width) !default;
    $input__button-pass-icon-fill                    : $color-secondary !default;
    
    //textarea
    $input__field-padding--textarea                  : $spacer !default;
    $input__field-border-radius--textarea            : $form-elements-radius--small !default;
    $input__field-line-height--textarea              : $font-line-height !default;
    $input__min-height--textarea                     : 72px !default;
    
    // disbaled
    $input__background-disabled                      : $gray-light !default;
    
  • URL: /components/raw/input/_input-variables.scss
  • Filesystem Path: build/components/Molecules/form/input/_input-variables.scss
  • Size: 2.1 KB
  • Content:
    @import 'input-variables';
    
    .input {
        margin-bottom: $input__margin-bottom;
    
        &:focus-within {
            .input__label {
                color: $input__label-focus-color;
            }
    
            .input__field {
                &::placeholder {
                    color: $input__label-focus-color;
                }
            }
        }
    
        &--inline {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
    
            .input__label {
                @extend .label--inline;
    
                margin: $input__label-margin;
                white-space: $input__white-space--inline;
            }
        }
    
        &--password {
            position: relative;
    
            &:focus-within {
                .input__field {
                    @include focus-input();
                }
            }
        }
    
        &__field {
            width: 100%;
            height: $input__field-spacing;
            padding: $input__field-padding;
            border: $input__field-border;
            border-radius: $input__field-border-radius;
            line-height: normal;
            transition: $input__transition;
    
            &::placeholder {
                color: $input__placeholder-color;
                font-size: $input__placeholder-font-size;
            }
    
            &.focus-visible {
                @include focus-input();
            }
    
            &:disabled {
                background-color: $input__background-disabled;
                cursor: not-allowed;
            }
    
            &--textarea {
                display: block;
                min-width: 100%;
                max-width: 100%;
                min-height: $input__min-height--textarea;
                padding: $input__field-padding--textarea;
                border-radius: $input__field-border-radius--textarea;
                line-height: $input__field-line-height--textarea;
            }
        }
    
        &__label {
            transition: $input__transition;
        }
    
        &__button-pass {
            position: absolute;
            top: $input__button-pass-top;
            right: $input__button-pass-right;
            height: $input__button-pass-height;
            background: $input__button-pass-bg;
    
            & > .icon {
                fill: $input__button-pass-icon-fill;
            }
    
            .input__button-pass-icon-hide {
                display: none;
            }
    
            &--active {
                .input__button-pass-icon-hide {
                    display: block;
                }
                .input__button-pass-icon-view {
                    display: none;
                }
            }
            &:hover {
                background-color: transparent;
            }
        }
    
        &.date {
            position: relative;
    
            .datetime-picker {
                @extend .input__field;
            }
    
            .ui-datepicker-trigger {
                position: absolute;
                height: $input__field-spacing;
                left: $input__date-trigger-left;
                bottom: $input__date-trigger-bottom;
                width: $input__date-trigger-width;
                background: $input__date-trigger-background;
                box-shadow: $input__date-trigger-box-shadow;
                border: $input__date-trigger-border;
    
                span {
                    display: none;
                }
            }
        }
    
        &--datepicker {
            .ui-datepicker-trigger {
                @include visually-hidden();
            }
    
            input {
                @extend .input__field;
            }
        }
    }
    
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: build/components/Molecules/form/input/_input.scss
  • Size: 3.2 KB
  • Content:
    'use strict';
    
    (function inputPassword() {
    
      const components = [...document.querySelectorAll('.input--password')],
            activeClass = 'input__button-pass--active';
    
      components.forEach(component => {
        const input = component.querySelector('.input__field'),
              button = component.querySelector('.input__button-pass');
    
        button.addEventListener('click', () => {
          if (!button.classList.contains(activeClass)) {
            button.classList.add(activeClass);
            input.type = 'text';
          }
          else {
            button.classList.remove(activeClass);
            input.type = 'password';
          }
        })
      });
    })();
    
  • URL: /components/raw/input/input-password.js
  • Filesystem Path: build/components/Molecules/form/input/input-password.js
  • Size: 631 Bytes

There are no notes for this item.