Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
257 lines
5.0 KiB
257 lines
5.0 KiB
.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%; |
|
transform: translateY(-50%); |
|
background-color: #fff; |
|
transition: .2s all, .1s opacity; |
|
display: inline-block; |
|
pointer-events: 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; */ |
|
|
|
html.no-touch & { |
|
&:hover:not(:focus):not(.error):not(.valid) { |
|
border-color: var(--color-gray); |
|
} |
|
} |
|
|
|
@include respond-to(handhelds) { |
|
min-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 { |
|
top: -.5rem; |
|
transform: none; |
|
padding: 0 5px; |
|
left: .75rem; |
|
font-size: .75rem!important; |
|
//color: #666; |
|
opacity: 1; |
|
} |
|
} |
|
} |
|
|
|
.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 { |
|
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: 22px; |
|
margin-right: 4px; |
|
overflow: hidden; |
|
|
|
@include respond-to(handhelds) { |
|
margin-left: 16px; |
|
} |
|
|
|
&-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; |
|
|
|
&: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; |
|
left: 12px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
text-align: center; |
|
font-size: 24px; |
|
color: $color-gray; |
|
opacity: .6; |
|
transition: all .2s ease-out; |
|
|
|
&:before { |
|
vertical-align: middle; |
|
} |
|
} |
|
|
|
.tgico-close { |
|
left: auto; |
|
right: 0px; |
|
top: 48%; |
|
z-index: 1; |
|
} |
|
} |