tweb-i2p/src/scss/partials/_input.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;

    @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: transparent;
    //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);

    @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: #000;
    }
  }
}