285 lines
5.7 KiB
SCSS
285 lines
5.7 KiB
SCSS
.input-wrapper {
|
|
width: 360px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.input-field {
|
|
position: relative;
|
|
|
|
.arrow-down {
|
|
position: absolute;
|
|
content: " ";
|
|
top: 50%;
|
|
bottom: 0;
|
|
right: 21px;
|
|
cursor: pointer;
|
|
|
|
height: 0;
|
|
width: 0;
|
|
|
|
border: solid #707579;
|
|
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;
|
|
left: 1rem;
|
|
right: auto;
|
|
z-index: 2;
|
|
top: 50%;
|
|
height: 1.5rem;
|
|
transform: translateY(-50%);
|
|
background-color: #fff;
|
|
transition: .2s transform, .2s padding, .1s opacity, .2s top, .2s left;
|
|
transform-origin: left center;
|
|
pointer-events: none;
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
input, &-input {
|
|
--height: 54px;
|
|
--padding: 1rem;
|
|
--border-width: 1px;
|
|
--border-width-top: 2px;
|
|
border: var(--border-width) solid #DADCE0;
|
|
border-radius: $border-radius-medium;
|
|
//padding: 0 1rem;
|
|
padding: calc(var(--padding) - var(--border-width-top)) calc(var(--padding) - var(--border-width));
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: var(--height);
|
|
transition: .2s border-color;
|
|
position: relative;
|
|
z-index: 1;
|
|
//line-height: calc(54px - var(--border-width));
|
|
/* overflow: hidden;
|
|
white-space: nowrap; */
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
html.no-touch & {
|
|
&:hover:not(:focus):not(.error):not(.valid) {
|
|
border-color: var(--color-gray);
|
|
}
|
|
}
|
|
|
|
@include respond-to(handhelds) {
|
|
--height: 50px;
|
|
}
|
|
/* font-weight: 500; */
|
|
|
|
/* &:hover {
|
|
border-color: #000;
|
|
} */
|
|
|
|
&:focus {
|
|
--border-width: 2px;
|
|
--border-width-top: 3px;
|
|
border-color: $button-primary-background;
|
|
//padding: 0 calc(1rem - 1px);
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
&.error {
|
|
border-color: $color-error;
|
|
|
|
& ~ label {
|
|
color: $color-error!important;
|
|
}
|
|
}
|
|
|
|
&.valid {
|
|
border-color: #26962F;
|
|
|
|
& ~ label {
|
|
color: #26962F !important;
|
|
}
|
|
}
|
|
|
|
/* &.error, &.valid {
|
|
transition: .2s border-width;
|
|
} */
|
|
|
|
&:focus ~ .arrow-down {
|
|
margin-top: -4px;
|
|
transform: rotate(225deg);
|
|
-webkit-transform: rotate(225deg);
|
|
border-color: $button-primary-background;
|
|
}
|
|
|
|
&:focus ~ label {
|
|
color: $button-primary-background;
|
|
}
|
|
|
|
&:focus ~ label, &:valid ~ label, &:not(:empty) ~ label, &:disabled ~ label {
|
|
//transform: translate(-.3125rem, -2.375rem) scale(.75);
|
|
//transform: translate(-.3125rem, -50%) scale(.75);
|
|
transform: translateY(-50%) scale(.75);
|
|
top: 1px;
|
|
padding: 0 6px;
|
|
opacity: 1;
|
|
left: .75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: $color-error!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: 1rem;
|
|
margin-right: .25rem;
|
|
overflow: hidden;
|
|
|
|
@include respond-to(handhelds) {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
&-input {
|
|
--height: 40px;
|
|
background-color: var(--color-gray-hover);
|
|
padding: 0px calc(42px - 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-radius: 22px;
|
|
transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
|
|
border-color: transparent;
|
|
line-height: var(--height);
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
|
|
&:hover {
|
|
border-color: var(--color-gray);
|
|
}
|
|
|
|
&:focus {
|
|
--border-width: 2px;
|
|
background-color: transparent;
|
|
border-color: $button-primary-background;
|
|
|
|
& ~ .tgico {
|
|
color: $button-primary-background;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* &: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: $color-gray;
|
|
opacity: .6;
|
|
transition: all .2s ease-out;
|
|
line-height: 1;
|
|
|
|
body.animation-level-0 & {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
> .tgico-search {
|
|
width: 24px;
|
|
height: 24px;
|
|
left: .75rem;
|
|
}
|
|
|
|
> .tgico-close {
|
|
right: 0px;
|
|
z-index: 1;
|
|
|
|
&:before { // ! я сгорел, почему-то здесь иконка сдвигается на пиксель влево, и это происходит из-за position: absolute на .tgico ...
|
|
margin-right: -1px;
|
|
}
|
|
}
|
|
} |