search

assets/css/components/_search.scss

@@ -0,0 +1,110 @@
+@use "../abstracts/mixins.scss" as *;
+
+.search {
+    display: flex;
+    height: calc(var(--unit)*1.5);
+    flex-grow: 2;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: calc(var(--padding-inner)*0.5);
+
+    svg {
+        @include icon(18px);
+        stroke-width: 1px;
+        stroke: var(--color-txt);
+    }
+
+
+
+    .search__input-group {
+        display: grid;
+        grid-template-columns: var(--unit) 1fr;
+        width: 100%;
+        height: calc(var(--unit)*1.5);
+
+
+        input {
+            grid-column: 1/end;
+            grid-row: 1;
+            padding-left: calc(var(--padding-inner)*2.5);
+            font-family: sans-serif;
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+            font-weight: 500;
+            border-radius: var(--radius-small);
+            border: 1px solid var(--color-txt-light);
+            outline: none;
+
+            &::placeholder {
+                font-family: var(--font);
+                font-size: var(--fs-normal);
+            }
+
+            &:focus {
+                outline: 1px solid var(--color-violet);
+            }
+
+        }
+
+        button {
+            grid-column: 1;
+            grid-row: 1;
+            z-index: 10;
+            align-self: center;
+            position: relative;
+            left: 10px;
+            top: 2px;
+
+        }
+    }
+
+    .search__icon {
+        width: calc(var(--unit)*1.25);
+        height: calc(var(--unit)*1.25);
+        // background-color: red;
+        border-radius: var(--radius-btn);
+        border: 1px solid var(--color-txt);
+        // background-color: var(--color-x-light);
+        cursor: pointer;
+
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+ 
+        &:hover {
+            background-color: var(--color-x-light);
+        }
+    }
+
+}
+
+
+#search-toggle {
+    display: none;
+}
+
+
+#search-toggle~[for="search-toggle"] .search__icon--open {
+    display: flex;
+}
+
+#search-toggle~[for="search-toggle"] .search__icon--close {
+    display: none;
+}
+
+#search-toggle~.search__input-group {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--open {
+    display: none;
+}
+
+#search-toggle:checked~[for="search-toggle"] .search__icon--close {
+    display: flex;
+}
+
+#search-toggle:checked~.search__input-group {
+    display: grid;
+}