initial public commit

ui/src/scss/_searchbar.scss

@@ -0,0 +1,71 @@
+.searchbar {
+    --searchHeight: 44px;
+
+    outline: 0;
+    display: flex;
+    align-items: center;
+    height: var(--searchHeight);
+    width: 100%;
+    flex-grow: 1;
+    padding: 5px 7px;
+    margin: 0 0 var(--smSpacing);
+    white-space: nowrap;
+    color: var(--txtHintColor);
+    background: var(--baseAlt1Color);
+    border-radius: var(--btnHeight);
+    transition: color var(--baseAnimationSpeed),
+                background var(--baseAnimationSpeed),
+                box-shadow var(--baseAnimationSpeed);
+    & > :first-child {
+        border-top-left-radius: var(--btnHeight);
+        border-bottom-left-radius: var(--btnHeight);
+    }
+    & > :last-child {
+        border-top-right-radius: var(--btnHeight);
+        border-bottom-right-radius: var(--btnHeight);
+    }
+    .btn {
+        border-radius: var(--btnHeight);
+    }
+    .code-editor,
+    input,
+    input:focus {
+        font-size: var(--baseFontSize);
+        font-family: var(--monospaceFontFamily);
+        border: 0;
+        background: none;
+    }
+    label > i {
+        line-height: inherit;
+    }
+    .search-options {
+        flex-shrink: 0;
+        width: 90px;
+        .selected-container {
+            border-radius: inherit;
+            background: none;
+            padding-right: 25px !important;
+        }
+        &:not(:focus-within) .selected-container {
+            color: var(--txtHintColor);
+        }
+    }
+    &:focus-within {
+        color: var(--txtPrimaryColor);
+        background: var(--baseAlt2Color);
+    }
+}
+
+.searchbar-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;;
+    min-width: var(--btnHeight);
+    min-height: var(--btnHeight);
+    .search-toggle {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}