feat(SW-66, SW-348): search functionality and ui

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
@@ -0,0 +1,47 @@
+.container {
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Small);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+}
+
+.container:hover,
+.container:has(.input:active, .input:focus, .input:focus-within) {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+.container:has(.input:active, .input:focus, .input:focus-within) {
+  border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
+}
+
+.label:has(
+    ~ .inputContainer .input:active,
+    ~ .inputContainer .input:focus,
+    ~ .inputContainer .input:focus-within
+  )
+  p {
+  color: var(--UI-Text-Active);
+}
+
+.input {
+  background-color: transparent;
+  border: none;
+  height: 24px;
+  outline: none;
+  position: relative;
+  z-index: 2;
+}
+
+.input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("/_static/icons/close.svg");
+  height: 20px;
+  width: 20px;
+}
+
+.container:hover:has(.input:not(:active, :focus, :focus-within))
+  .input::-webkit-search-cancel-button {
+  display: none;
+}