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