github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/app/styles/components/search-box.scss (about)

     1  .search-box {
     2    width: 100%;
     3    max-width: 400px;
     4    min-width: 200px;
     5  
     6    position: relative;
     7  
     8    @include mobile {
     9      min-width: 150px;
    10    }
    11  
    12    .prefix-icon,
    13    .suffix-icon {
    14      position: absolute;
    15      z-index: $z-icon-decorators;
    16  
    17      path {
    18        fill: $grey;
    19      }
    20    }
    21  
    22    .prefix-icon {
    23      left: 0.75em;
    24      top: 50%;
    25      transform: translateY(-50%);
    26      width: 15px;
    27      height: 15px;
    28  
    29      svg {
    30        display: block;
    31        width: 100%;
    32        height: 100%;
    33      }
    34    }
    35  
    36    .suffix-icon {
    37      top: 0;
    38      right: 0;
    39      height: 100%;
    40      width: 1.75em;
    41      cursor: pointer;
    42      background: transparent;
    43      border: none;
    44  
    45      svg {
    46        position: absolute;
    47        display: block;
    48        height: 10px;
    49        width: 10px;
    50        top: 50%;
    51        left: 0;
    52        transform: translateY(-50%);
    53      }
    54  
    55      &:hover path {
    56        fill: $grey-light;
    57      }
    58  
    59      &:focus {
    60        outline: none;
    61        path {
    62          fill: $grey-light;
    63        }
    64      }
    65    }
    66  
    67    .control {
    68      width: 100%;
    69    }
    70  
    71    input,
    72    .input {
    73      width: 100%;
    74      padding: 0.4em 1.75em 0.4em 2.25em;
    75  
    76      &.is-compact {
    77        padding: 0.25em 0.75em 0.25em 2.25em;
    78      }
    79    }
    80  }