436 lines
9.6 KiB
SCSS
436 lines
9.6 KiB
SCSS
/*
|
|
* https://github.com/morethanwords/tweb
|
|
* Copyright (C) 2019-2021 Eduard Kuzmenko
|
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
|
*/
|
|
|
|
.input-wrapper {
|
|
width: 360px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.input-field {
|
|
--height: 54px;
|
|
--border-radius: #{$border-radius-medium};
|
|
position: relative;
|
|
|
|
@include respond-to(handhelds) {
|
|
--height: 50px;
|
|
}
|
|
|
|
.arrow-down {
|
|
position: absolute;
|
|
content: " ";
|
|
top: 50%;
|
|
bottom: 0;
|
|
right: 21px;
|
|
cursor: pointer;
|
|
|
|
height: 0;
|
|
width: 0;
|
|
|
|
border: solid var(--secondary-text-color);
|
|
border-radius: 1px;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
vertical-align: middle;
|
|
|
|
z-index: 2;
|
|
|
|
margin-top: -9px;
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
transition: .2s all;
|
|
}
|
|
|
|
label {
|
|
position: absolute;
|
|
color: $placeholder-color;
|
|
top: 0;
|
|
left: 1rem;
|
|
right: auto;
|
|
z-index: 2;
|
|
height: 1.5rem;
|
|
transform: translate(0, 0);
|
|
background-color: var(--surface-color);
|
|
transform-origin: left center;
|
|
pointer-events: none;
|
|
margin-top: calc((var(--height) - 1.5rem) / 2); // * Center of first line
|
|
user-select: none;
|
|
|
|
@include animation-level(2) {
|
|
transition: .2s transform, .2s padding, .1s opacity, font-weight 0s .1s;
|
|
}
|
|
}
|
|
|
|
&-border {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
border: 2px solid var(--primary-color);
|
|
opacity: 0;
|
|
border-radius: var(--border-radius);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
|
|
@include animation-level(2) {
|
|
transition: opacity .2s;
|
|
}
|
|
}
|
|
|
|
&-input {
|
|
--padding: 1rem;
|
|
--padding-horizontal: 1rem;
|
|
--border-width: 1px;
|
|
border: var(--border-width) solid var(--input-search-border-color);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--surface-color);
|
|
//padding: 0 1rem;
|
|
padding: calc(var(--padding) - var(--border-width));
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: var(--height);
|
|
transition: 0s border-color;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: var(--line-height);
|
|
|
|
/* &:-internal-autofill-selected {
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--surface-color) inset;
|
|
} */
|
|
|
|
&:-webkit-autofill,
|
|
&:-webkit-autofill:hover,
|
|
&:-webkit-autofill:focus,
|
|
&:-webkit-autofill:active {
|
|
//transition: background-color 5000s ease-in-out 0s;
|
|
-webkit-box-shadow: 0 0 0px 1000px var(--surface-color) inset;
|
|
}
|
|
|
|
&:-webkit-autofill::first-line,
|
|
&:-webkit-autofill,
|
|
&:-webkit-autofill:hover,
|
|
&:-webkit-autofill:focus,
|
|
&:-webkit-autofill:active {
|
|
font-family: "Roboto", -apple-system, apple color emoji, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
|
|
font-size: 1rem !important;
|
|
color: var(--primary-text-color) !important;
|
|
}
|
|
|
|
@include respond-to(handhelds) {
|
|
--padding: .9375rem;
|
|
}
|
|
|
|
@include animation-level(0) {
|
|
transition: none !important;
|
|
}
|
|
|
|
@include hover() {
|
|
&:not(:focus):not(.error):not(.valid) {
|
|
//border-color: var(--color-gray);
|
|
//border-color: #000;
|
|
border-color: var(--primary-color);
|
|
transition: .2s border-color;
|
|
|
|
& ~ label {
|
|
color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
/* &:not(:focus):not(.error):not(.valid) ~ label {
|
|
transition: .2s transform, .2s padding, .1s opacity, font-weight 0s 1s;
|
|
} */
|
|
}
|
|
|
|
/* font-weight: 500; */
|
|
|
|
/* &:hover {
|
|
border-color: #000;
|
|
} */
|
|
|
|
&:focus {
|
|
border-color: var(--primary-color);
|
|
//padding: 0 calc(1rem - 1px);
|
|
}
|
|
|
|
/* &:disabled {
|
|
background-color: #fff;
|
|
color: #000;
|
|
} */
|
|
|
|
&.error {
|
|
border-color: var(--danger-color);
|
|
|
|
& ~ label {
|
|
color: var(--danger-color) !important;
|
|
}
|
|
|
|
& ~ .input-field-border {
|
|
border-color: var(--danger-color) !important;
|
|
}
|
|
}
|
|
|
|
&.valid {
|
|
border-color: #26962F;
|
|
|
|
& ~ label {
|
|
color: #26962F !important;
|
|
}
|
|
|
|
& ~ .input-field-border {
|
|
border-color: #26962F !important;
|
|
}
|
|
}
|
|
|
|
/* &.error, &.valid {
|
|
transition: .2s border-width;
|
|
} */
|
|
|
|
&:focus ~ .arrow-down {
|
|
margin-top: -4px;
|
|
transform: rotate(225deg);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
&:focus ~ label {
|
|
color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
&:focus ~ .input-field-border {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* // * valid for plain text, empty for contenteditable
|
|
&:valid ~ label,
|
|
&:not(:empty):focus ~ label {
|
|
transition-delay: 0s, 0s, 0s, 0s;
|
|
} */
|
|
|
|
&:focus ~ label,
|
|
&:valid ~ label,
|
|
&:not(:empty) ~ label,
|
|
&:disabled ~ label {
|
|
transform: translate(-.25rem, calc(var(--height) / -2 + .125rem)) scale(.75);
|
|
padding: 0 6px;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&-input-fake {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
position: absolute !important;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
// * override scrollable styles
|
|
bottom: auto!important;
|
|
right: auto!important;
|
|
height: auto!important;
|
|
|
|
z-index: -3;
|
|
}
|
|
}
|
|
|
|
.input-wrapper > * + * {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: #909192;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
|
|
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: #909192;
|
|
}
|
|
|
|
::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: #909192;
|
|
}
|
|
|
|
input:focus, button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.input-clear {
|
|
outline: none;
|
|
border: none;
|
|
padding: 0;
|
|
|
|
&.error {
|
|
body.animation-level-0 & {
|
|
color: var(--danger-color) !important;
|
|
}
|
|
|
|
body:not(.animation-level-0) & {
|
|
animation: input-shake .2s ease-in-out forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes input-shake {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
25% {
|
|
transform: translateX(-.5rem);
|
|
}
|
|
|
|
75% {
|
|
transform: translateX(.5rem);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.input-search {
|
|
position: relative;
|
|
width: 100%;
|
|
//Vozmojno nado budet vernut margin-left: 22px;, tak kak eto vrode v levom bare tak po verstke, a v pravom bare dlya mobili nado 16, gde stiker seti
|
|
margin-left: .4375rem;
|
|
margin-right: .4375rem;
|
|
overflow: hidden;
|
|
--border-radius: 22px;
|
|
|
|
@include respond-to(handhelds) {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
&-input {
|
|
--height: 42px;
|
|
background-color: var(--input-search-background-color);
|
|
padding: 0px calc(var(--height) + 3px - var(--border-width));
|
|
height: var(--height);
|
|
min-height: var(--height) !important;
|
|
max-height: var(--height) !important;
|
|
//line-height: calc(var(--height) + 2px - var(--border-width) * 2);
|
|
border-color: var(--input-search-border-color);
|
|
line-height: var(--height);
|
|
|
|
@include animation-level(2) {
|
|
transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
|
|
}
|
|
|
|
@include hover() {
|
|
&:not(:focus) {
|
|
border-color: var(--secondary-color) !important;
|
|
//border-color: #000;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
background-color: transparent;
|
|
border-color: var(--primary-color);
|
|
|
|
& ~ .tgico {
|
|
color: var(--primary-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
& ~ .btn-icon {
|
|
@include hover-background-effect(primary);
|
|
}
|
|
}
|
|
|
|
/* &:empty:before {
|
|
color: #909192 !important;
|
|
} */
|
|
|
|
/* &:empty ~ .tgico-close, */&:placeholder-shown ~ .tgico-close {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
> .tgico {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
text-align: center;
|
|
font-size: 24px;
|
|
color: var(--secondary-text-color);
|
|
opacity: .6;
|
|
line-height: 1;
|
|
z-index: 1;
|
|
|
|
@include animation-level(2) {
|
|
transition: opacity .2s ease-out, color .2s ease-out;
|
|
}
|
|
}
|
|
|
|
> .tgico-search {
|
|
width: 24px;
|
|
height: 24px;
|
|
left: .8125rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
> .tgico-close {
|
|
right: 0px;
|
|
z-index: 1;
|
|
width: 42px;
|
|
height: 42px;
|
|
|
|
&:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
|
|
margin-right: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-field-password {
|
|
.input-field-input {
|
|
padding-right: 2.5rem;
|
|
max-height: var(--height);
|
|
|
|
&[type="password"] {
|
|
font-size: 2.25rem;
|
|
padding-left: calc(.875rem - var(--border-width));
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 2) {
|
|
font-size: 1.75rem;
|
|
letter-spacing: .125rem;
|
|
}
|
|
|
|
html.is-ios & {
|
|
// ! меньше 1rem будет зумить поле
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-visible {
|
|
position: absolute;
|
|
right: .375rem;
|
|
z-index: 2;
|
|
font-size: 1.5rem;
|
|
color: $placeholder-color;
|
|
cursor: pointer;
|
|
transition: color .2s;
|
|
padding: .5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
&:before {
|
|
content: $tgico-eye1;
|
|
}
|
|
|
|
&.eye-hidden:before {
|
|
content: $tgico-eye2;
|
|
}
|
|
|
|
@include hover() {
|
|
color: var(--primary-text-color);
|
|
}
|
|
}
|
|
}
|