├── LICENSE ├── icons ├── search.svg └── x.svg ├── index.html └── styles.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 WebDevSimplified 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 5 | -------------------------------------------------------------------------------- /icons/x.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 | 16 | 22 | 28 | 29 | 41 |
42 | 43 |
44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: hsl(223, 6.7%, 20.6%); 3 | --bg-color-dark: hsl(225, 6.3%, 12.5%); 4 | --foreground-color: hsl(210, 9.1%, 87%); 5 | --foreground-color-dark: hsl(214, 8.1%, 61.2%); 6 | --outline-color: hsl(200, 100%, 50%); 7 | } 8 | 9 | body { 10 | background-color: var(--bg-color); 11 | color: var(--foreground-color); 12 | font-family: Helvetica, Arial, sans-serif; 13 | margin: 0; 14 | } 15 | 16 | .row { 17 | display: flex; 18 | gap: 1rem; 19 | margin: 1rem; 20 | margin-top: 2rem; 21 | } 22 | 23 | .box { 24 | width: 30px; 25 | background-color: var(--foreground-color-dark); 26 | } 27 | 28 | .input { 29 | background-color: var(--bg-color-dark); 30 | color: var(--foreground-color); 31 | border: none; 32 | width: 9em; 33 | transition: width 0.25s; 34 | outline: none; 35 | border-radius: 0.25em; 36 | padding: 0.375em; 37 | font-size: 0.875em; 38 | } 39 | 40 | @media (prefers-reduced-motion: reduce) { 41 | .input { 42 | transition: none; 43 | } 44 | } 45 | 46 | .input::placeholder { 47 | color: var(--foreground-color-dark); 48 | } 49 | 50 | .input:focus-visible, 51 | button:focus-visible { 52 | box-shadow: 0 0 0 0.25rem var(--outline-color); 53 | } 54 | 55 | .input:focus, 56 | .input:not(:placeholder-shown) { 57 | width: 15em; 58 | } 59 | 60 | .search-wrapper { 61 | position: relative; 62 | } 63 | 64 | .search-icon, 65 | .x-icon { 66 | position: absolute; 67 | width: 1rem; 68 | height: 1rem; 69 | right: 0.25rem; 70 | top: 50%; 71 | translate: 0 -50%; 72 | color: var(--foreground-color-dark); 73 | opacity: 0; 74 | rotate: 90deg; 75 | pointer-events: none; 76 | visibility: hidden; 77 | border-radius: 0.25rem; 78 | transition-behavior: discrete; 79 | transition-property: opacity, rotate, visibility; 80 | transition-duration: 0.15s; 81 | } 82 | 83 | .search-wrapper:has(.input:placeholder-shown) .search-icon, 84 | .search-wrapper:has(.input:not(:placeholder-shown)) .x-icon { 85 | opacity: 1; 86 | pointer-events: all; 87 | rotate: 0deg; 88 | visibility: visible; 89 | } 90 | 91 | button { 92 | all: unset; 93 | cursor: pointer; 94 | } 95 | 96 | /* clears the ‘X’ from Internet Explorer */ 97 | input[type="search"]::-ms-clear, 98 | input[type="search"]::-ms-reveal { 99 | appearance: none; 100 | width: 0; 101 | height: 0; 102 | } 103 | 104 | /* clears the ‘X’ from Chrome */ 105 | input[type="search"]::-webkit-search-decoration, 106 | input[type="search"]::-webkit-search-cancel-button, 107 | input[type="search"]::-webkit-search-results-button, 108 | input[type="search"]::-webkit-search-results-decoration { 109 | appearance: none; 110 | } 111 | --------------------------------------------------------------------------------