feat: initial commit

src/assets/styles/components/forms.css

@@ -0,0 +1,79 @@
+::placeholder {
+  color: var(--text-color);
+  opacity: .5;
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
+textarea {
+  width: var(--sizing-full);
+}
+
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
+textarea,
+select {
+  color: var(--text-color);
+  border-radius: var(--border-radius-slight);
+  background-color: var(--background-color);
+  padding: var(--spacing-sm);
+  border: var(--border-gray);
+}
+
+form,
+input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]),
+textarea {
+  margin-bottom: var(--spacing-base);
+}
+
+textarea {
+  resize: vertical;
+}
+
+.search__form {
+  margin-top: 0;
+
+  .search__form--input::-webkit-search-cancel-button {
+    cursor: pointer;
+  }
+}
+
+button svg,
+label svg {
+  stroke: var(--section-color, var(--accent-color));
+  cursor: pointer;
+
+  &:is(:hover, :focus, :active) {
+    stroke: var(--accent-color-hover);
+  }
+}
+
+.search__form--type {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  border: none;
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+}
+
+.search__results {
+  margin: 0 0 var(--spacing-base);
+  padding: 0;
+  list-style: none;
+  display: none;
+
+  li {
+    margin: var(--spacing-sm) 0;
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-base);
+      border-bottom: var(--border-gray);
+    }
+  }
+}
+
+.search__load-more {
+  margin-bottom: var(--spacing-base);
+}