src/wolnelektury/static/2022/styles/layout/_search.scss

   1 .l-search-bar {
   2     width: 100%;
   3     display: flex;
   4     margin-top: 34px;
   5     align-items: center;
   6     justify-content: space-between;
   7
   8     .l-search-bar__input {
   9         position: relative;
  10         display: flex;
  11         align-content: center;
  12         width: 560px;
  13
  14         .icon {
  15             @include font-size(22px);
  16             color: #083F4D;
  17             position: absolute;
  18             margin: auto;
  19             top: 0;
  20             bottom: 0;
  21             left: 19px;
  22             display: flex;
  23             align-items: center;
  24             justify-content: center;
  25             pointer-events: none;
  26         }
  27
  28         input {
  29             font-family: $base-font;
  30             font-size: 18px;
  31             font-style: italic;
  32             padding: 10px 20px 10px 50px;
  33             border-radius: 52px;
  34             border: 1px solid #D9D9D9;
  35             width: 100%;
  36             max-width: 580px;
  37             outline: 0;
  38             transition: border $ease-out 350ms;
  39
  40             &:focus {
  41                 border-color: #007880;
  42             }
  43         }
  44     }
  45 }