This commit is contained in:
2021-08-17 22:01:03 +03:00
parent 1b84ac831f
commit 861e59919e
30 changed files with 2501 additions and 2324 deletions
+33 -42
View File
@@ -182,7 +182,9 @@
padding-right: 10px;
padding-left: 10px;
}
.kit-field.kit-field--bordered .kit-field__input:focus ~.kit-field__hr {
.kit-field.kit-field--bordered .kit-field__input:focus ~.kit-field__hr,
.kit-field.kit-field--bordered .kit-field__input.focus ~.kit-field__hr
{
border-color: var(--kit-color-primary);
}
.kit-field.kit-field--bordered .kit-field__input.kit-field--error ~.kit-field__hr
@@ -220,10 +222,7 @@
overflow: hidden;
}
.kit-field textarea,
.kit-field input[type='password'],
.kit-field input[type='email'],
.kit-field input[type='text'],
.kit-field input[type='tel'],
.kit-field input,
.kit-field .kit-field__display {
pointer-events: auto;
background-color: transparent;
@@ -281,34 +280,24 @@
--line-clamp-height: var(--line-height-ratio);
}
.kit-field textarea:focus,
.kit-field input[type='password']:focus,
.kit-field input[type='email']:focus,
.kit-field input[type='text']:focus,
.kit-field input[type='number']:focus,
.kit-field input[type='tel']:focus,
.kit-field .kit-field__display:focus {
.kit-field input:focus,
.kit-field textarea.focus,
.kit-field input.focus {
color: var(--kit-color-text);
}
.kit-field textarea:focus ~.kit-field__label,
.kit-field input[type='password']:focus ~.kit-field__label,
.kit-field input[type='email']:focus ~.kit-field__label,
.kit-field input[type='text']:focus ~.kit-field__label,
.kit-field input[type='number']:focus ~.kit-field__label,
.kit-field input[type='tel']:focus ~.kit-field__label,
.kit-field input:focus ~.kit-field__label,
.kit-field .kit-field__display:focus ~.kit-field__label {
.kit-field textarea.focus ~.kit-field__label,
.kit-field input.focus ~.kit-field__label {
top: 0;
transform: translate(0, 0);
font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
color: var(--kit-color-primary);
}
.kit-field textarea:focus ~.kit-field__hr:after,
.kit-field input[type='password']:focus ~.kit-field__hr:after,
.kit-field input[type='email']:focus ~.kit-field__hr:after,
.kit-field input[type='text']:focus ~.kit-field__hr:after,
.kit-field input[type='number']:focus ~.kit-field__hr:after,
.kit-field input[type='tel']:focus ~.kit-field__hr:after,
.kit-field .kit-field__display:focus ~.kit-field__hr:after {
.kit-field input:focus ~.kit-field__hr:after,
.kit-field textarea.focus ~.kit-field__hr:after,
.kit-field input.focus ~.kit-field__hr:after {
left: 0;
width: 100%;
}
@@ -402,6 +391,19 @@
.kit-field .kit-field--error ~.kit-field__hr:after {
border-color: var(--kit-color-error) !important;
}
.kit-field .kit-field--warning ~.kit-field__message
{
opacity: 1;
visibility: visible;
color: var(--kit-color-warning);
}
.kit-field .kit-field--warning ~.kit-field__label {
color: var(--kit-color-warning) !important;
}
.kit-field .kit-field--warning ~.kit-field__hr:after {
border-color: var(--kit-color-warning) !important;
}
.kit-field__text {
display: block;
-webkit-user-select: none;
@@ -1130,7 +1132,8 @@ select.kit-field__input:disabled ~.kit-field__hr {
.kit-field--success ~.kit-field__hr {
border-color: var(--kit-color-success) !important;
}
.kit-field--success:focus ~.kit-field__hr:after {
.kit-field--success:focus ~.kit-field__hr:after,
.kit-field--success.focus ~.kit-field__hr:after {
border-color: var(--kit-color-success) !important;
}
@@ -1186,27 +1189,15 @@ select.kit-field__input:disabled ~.kit-field__hr {
.kit-field textarea[readonly]:focus,
.kit-field input[type='password'][readonly]:focus,
.kit-field input[type='email'][readonly]:focus,
.kit-field input[type='text'][readonly]:focus,
.kit-field input[type='tel'][readonly]:focus,
.kit-field .kit-field__display[readonly]:focus {
color: var(--kit-color-readonly);
}
.kit-field textarea[readonly]:focus,
.kit-field input[type='password'][readonly],
.kit-field input[type='email'][readonly],
.kit-field input[type='text'][readonly],
.kit-field input[type='tel'][readonly],
.kit-field .kit-field__display[readonly] {
.kit-field input[readonly]:focus,
.kit-field textarea[readonly].focus,
.kit-field input[readonly].focus {
color: var(--kit-color-readonly);
}
.kit-field textarea[readonly]:focus ~.kit-field__label,
.kit-field input[type='password'][readonly]:focus ~.kit-field__label,
.kit-field input[type='email'][readonly]:focus ~.kit-field__label,
.kit-field input[type='text'][readonly]:focus ~.kit-field__label,
.kit-field input[type='tel'][readonly]:focus ~.kit-field__label,
.kit-field .kit-field__display[readonly]:focus ~.kit-field__label
.kit-field input[readonly]:focus ~.kit-field__label,
.kit-field textarea[readonly].focus ~.kit-field__label,
.kit-field input[readonly].focus ~.kit-field__label
{
color: var(--kit-color-readonly);
}