2017-01-05 04:42:18 +03:00
|
|
|
@import '../colors.css';
|
|
|
|
@import '../variables.css';
|
|
|
|
@import './config.css';
|
|
|
|
|
|
|
|
.input {
|
|
|
|
padding: var(--input-padding) 0;
|
|
|
|
position: relative;
|
|
|
|
|
2017-01-18 12:56:03 +03:00
|
|
|
@apply --reset;
|
|
|
|
|
2017-01-05 04:42:18 +03:00
|
|
|
&.withIcon {
|
2017-01-29 15:35:55 +03:00
|
|
|
margin-left: calc(var(--input-icon-size) + var(--input-icon-right-space));
|
2017-01-05 04:42:18 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
color: var(--input-text-label-color);
|
|
|
|
display: block;
|
|
|
|
font-size: var(--input-icon-font-size) !important;
|
|
|
|
height: var(--input-icon-size);
|
2017-01-29 15:35:55 +03:00
|
|
|
left: calc(-1 * (var(--input-icon-size) + var(--input-icon-right-space)));
|
2017-01-05 04:42:18 +03:00
|
|
|
line-height: var(--input-icon-size) !important;
|
|
|
|
position: absolute;
|
|
|
|
text-align: center;
|
|
|
|
top: var(--input-icon-offset);
|
|
|
|
transition: color var(--animation-duration) var(--animation-curve-default);
|
|
|
|
width: var(--input-icon-size);
|
|
|
|
}
|
|
|
|
|
|
|
|
.inputElement {
|
|
|
|
background-color: var(--input-text-background-color);
|
|
|
|
border-bottom: 1px solid var(--input-text-bottom-border-color);
|
|
|
|
border-left: 0;
|
2017-08-02 19:31:46 +03:00
|
|
|
border-radius: 0;
|
2017-01-05 04:42:18 +03:00
|
|
|
border-right: 0;
|
|
|
|
border-top: 0;
|
2017-11-28 01:58:49 +03:00
|
|
|
color: var(--input-text-input-element-color);
|
2017-01-05 04:42:18 +03:00
|
|
|
display: block;
|
|
|
|
font-size: var(--input-field-font-size);
|
|
|
|
outline: none;
|
|
|
|
padding: var(--input-field-padding) 0;
|
|
|
|
width: 100%;
|
|
|
|
|
2017-09-18 20:57:40 +03:00
|
|
|
&:required {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
|
2017-01-05 04:42:18 +03:00
|
|
|
&:focus:not([disabled]):not([readonly]) {
|
|
|
|
& ~ .bar::before,
|
|
|
|
& ~ .bar::after {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
& ~ .label:not(.fixed) {
|
|
|
|
color: var(--input-text-highlight-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
& ~ .label > .required {
|
|
|
|
color: var(--input-text-required-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
& ~ .hint {
|
|
|
|
display: block;
|
|
|
|
opacity: var(--input-hint-opacity);
|
|
|
|
}
|
|
|
|
|
|
|
|
& ~ .icon {
|
|
|
|
color: var(--input-text-highlight-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.filled ~ .hint {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus:not([disabled]):not([readonly]),
|
|
|
|
&.filled,
|
|
|
|
&[type='date'],
|
|
|
|
&[type='time'] {
|
|
|
|
& ~ .label:not(.fixed) {
|
|
|
|
font-size: var(--input-label-font-size);
|
|
|
|
top: var(--input-focus-label-top);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.filled ~ .label.fixed,
|
|
|
|
&.filled ~ .hint {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
|
|
color: var(--input-text-label-color);
|
|
|
|
font-size: var(--input-field-font-size);
|
|
|
|
left: 0;
|
|
|
|
line-height: var(--input-field-font-size);
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
|
|
|
|
transition-duration: var(--animation-duration);
|
|
|
|
transition-property: top, font-size, color;
|
|
|
|
transition-timing-function: var(--animation-curve-default);
|
|
|
|
|
|
|
|
&.fixed ~ .hint {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hint {
|
|
|
|
color: var(--input-text-label-color);
|
|
|
|
font-size: var(--input-field-font-size);
|
|
|
|
left: 0;
|
|
|
|
line-height: var(--input-field-font-size);
|
|
|
|
opacity: var(--input-hint-opacity);
|
|
|
|
pointer-events: none;
|
|
|
|
position: absolute;
|
|
|
|
top: calc(var(--input-padding) + 1.5 * var(--input-field-padding));
|
|
|
|
transition-duration: var(--animation-duration);
|
|
|
|
transition-property: opacity;
|
|
|
|
transition-timing-function: var(--animation-curve-default);
|
|
|
|
}
|
|
|
|
|
|
|
|
.bar {
|
|
|
|
display: block;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
background-color: var(--input-text-highlight-color);
|
|
|
|
bottom: 0;
|
|
|
|
content: '';
|
|
|
|
height: 2px;
|
|
|
|
position: absolute;
|
|
|
|
transition-duration: 0.2s;
|
|
|
|
transition-property: width, background-color;
|
|
|
|
transition-timing-function: var(--animation-curve-default);
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
right: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.error,
|
|
|
|
.counter {
|
|
|
|
color: var(--input-text-error-color);
|
|
|
|
font-size: var(--input-label-font-size);
|
|
|
|
line-height: var(--input-underline-height);
|
|
|
|
margin-bottom: calc(-1 * var(--input-underline-height));
|
|
|
|
}
|
|
|
|
|
|
|
|
.counter {
|
|
|
|
color: var(--input-text-label-color);
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.disabled > .inputElement {
|
2017-08-09 13:55:09 +03:00
|
|
|
border-bottom-style: dashed;
|
2017-01-05 04:42:18 +03:00
|
|
|
color: var(--input-text-disabled-text-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.errored {
|
|
|
|
padding-bottom: 0;
|
|
|
|
|
|
|
|
& > .inputElement {
|
|
|
|
border-bottom-color: var(--input-text-error-color);
|
|
|
|
margin-top: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
& > .counter,
|
|
|
|
& > .label {
|
|
|
|
color: var(--input-text-error-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
& > .label > .required {
|
|
|
|
color: var(--input-text-required-color);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
display: none;
|
|
|
|
}
|