github.com/hernad/nomad@v1.6.112/ui/app/styles/components/search-box.scss (about)

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