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.

155 lines
3.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 {
--border-width: 1px;
--border-width-top: 2px;
border: var(--border-width) solid #DADCE0;
border-radius: $border-radius-medium;
//padding: 0 1rem;
padding: calc(1rem - var(--border-width-top)) calc(1rem - var(--border-width));
box-sizing: border-box;
width: 100%;
min-height: 54px;
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: 0.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: #a2acb4;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #a2acb4;
}
input:focus, button:focus {
outline: none;
}