<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"
}
}
$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;
@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;
}
}
}
'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';
}
})
});
})();
There are no notes for this item.