<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.