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