github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/search.css (about)

     1  /* Content managed by Project Forge, see [projectforge.md] for details. */
     2  .search {
     3    display: table;
     4    margin-top: 11px;
     5  }
     6  
     7  .search input {
     8    background: none;
     9    border: none;
    10    outline: none;
    11    width: 28px;
    12    min-width: 0;
    13    padding: 0;
    14    z-index: 2;
    15    position: relative;
    16    line-height: 28px;
    17    margin: 0;
    18    font-size: 18px;
    19    -webkit-appearance: none;
    20    transition: all 0.6s ease;
    21    cursor: pointer;
    22    color: var(--color-nav-foreground);
    23  }
    24  
    25  @media (prefers-reduced-motion) {
    26    .search input {
    27      transition: none;
    28    }
    29  }
    30  
    31  .search input + div {
    32    position: relative;
    33    height: 20px;
    34    width: 100%;
    35    margin: -28px 0 0 0;
    36  }
    37  
    38  .search input + div svg {
    39    display: block;
    40    position: absolute;
    41    height: 28px;
    42    width: 160px;
    43    right: 0;
    44    top: 0;
    45    fill: none;
    46    stroke: var(--color-nav-foreground);
    47    stroke-width: 1.5px;
    48    stroke-dashoffset: 271.908;
    49    stroke-dasharray: 59 212.908;
    50    transition: all 0.6s ease;
    51  }
    52  
    53  @media (prefers-reduced-motion) {
    54    .search input + div svg {
    55      transition: none;
    56    }
    57  }
    58  
    59  .search input:not(:placeholder-shown), .search input:focus {
    60    width: 160px;
    61    padding: 0 4px;
    62    cursor: text;
    63  }
    64  
    65  .search input:not(:placeholder-shown) + div svg, .search input:focus + div svg {
    66    stroke-dasharray: 150 212.908;
    67    stroke-dashoffset: 300;
    68  }
    69  
    70  html {
    71    box-sizing: border-box;
    72    -webkit-font-smoothing: antialiased;
    73  }