Alpaca components for Magento 2

Input: Default 

<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                          : 26px !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;
            }
        }
    }

    &.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')];
  const activeClass = 'input__button-pass--active';

  components.forEach(component => {
    const input = component.querySelector('.input__field');
    const 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

No notes defined.