solarwood components for Magento 2

Input: Password 

<div class="input input--password ">
    <label class="
           label
           input__label
           
       " for="field-id">
        Label text
    </label>
    <input class="input__field " id="field-id" name="field-name" type="password" placeholder="Your password">
    <button type="button" class="
            button
            button--icon
            input__button-pass
        " aria-label="Show/hide password">
        <svg class="icon icon--secondary input__button-pass-icon-view" role="presentation" focusable="false">
            <title>view password icon</title>
            <use xlink:href="/images/icons-sprite.svg#visibility-off"></use>
        </svg>

        <svg class="icon icon--secondary input__button-pass-icon-hide" role="presentation" focusable="false">
            <title>hide password icon</title>
            <use xlink:href="/images/icons-sprite.svg#visibility"></use>
        </svg>

    </button>
</div>
<script src="/components/raw/input/input-password.js"></script>
 
<div class="input input--password {{ 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 }}}
    >
    <button
        type="button"
        class="
            button
            button--icon
            input__button-pass
        "
        {{{ buttonAttributes }}}
    >
        {{ render '@icon' passwordIconView }}
        {{ render '@icon' passwordIconHide }}
    </button>
</div>
{{#if script}}
    <script src="{{static 'input-password.js' }}"></script>
{{/if}}
 
{
  "attributes": "",
  "class": "",
  "label": {
    "attributes": "",
    "text": "Label text",
    "hidden": false
  },
  "field": {
    "attributes": "",
    "class": "",
    "id": "field-id",
    "name": "field-name",
    "placeholder": "Your password",
    "type": "password"
  },
  "buttonAttributes": "aria-label=\"Show/hide password\"",
  "passwordIconView": {
    "id": "visibility-off",
    "title": "view password icon",
    "hidden": true,
    "class": "icon--secondary input__button-pass-icon-view"
  },
  "passwordIconHide": {
    "id": "visibility",
    "title": "hide password icon",
    "hidden": true,
    "class": "icon--secondary input__button-pass-icon-hide"
  },
  "script": true
}
  • 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;
        }
    }
}
.form.contact-us textarea,
.form.contact-us input {
    border: none;
    border-bottom: $border-secondary;
    border-radius: 0;
    margin-bottom: 0.5rem;
}
.form.contact-us textarea {
    min-height: 100px;
}

.fieldset {
    .inputText {
        width: 100%;
        padding: 27px 20px 10px;
        height: auto;
        outline: none;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid #777;
        box-shadow: none;
    }

    .inputText:focus {
        border: none;
        border-bottom: 2px solid $color-secondary;
        border-radius: 0;
    }

    .floating-label {
        position: absolute;
        pointer-events: none;
        top: 18px;
        left: 10px;
        transition: 0.2s ease all;
    }

    input:focus,
    input:visited,
    textarea:focus,
    textarea:visited,
    input:not(:focus):valid,
    textarea:not(:focus):valid {
        & ~ .floating-label {
            top: 0;
            left: 10px;
            font-size: 11px;
            opacity: 1;
        }
    }

    textarea {
        width: 100%;
        height: 100px;
        padding: 27px 20px 10px;
    }
}
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: build/components/Molecules/form/input/_input.scss
  • Size: 4.4 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.