style(next): add the initial style for input groups

TriliumNext · Jan 13, 2025 · f462e7f · f462e7f
1 parent 5dd7b2c
commit f462e7f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
@@ -54,10 +54,56 @@ input::selection,
     color: var(--input-selection-text-color);
 }
 
+/* Input groups */
+
+.input-group {
+    outline: 3px solid transparent;
+    outline-offset: 6px;
+    background: var(--input-background-color);
+    border-radius: 6px;
+    padding-right: 8px;
+    color: var(--quick-search-color);
+}
+
+.input-group:hover {
+    background: var(--input-hover-background);
+}
+
+.input-group:focus-within {
+    outline: 3px solid var(--input-focus-outline-color);
+    outline-offset: 0;
+    background: var(--input-focus-background);
+    transition: outline-color 50ms linear,
+                outline-offset 200ms ease-out;
+}
+
 .input-group input
+.input-group input:hover,
 .input-group input:focus,
 .input-group .form-control,
+.input-group .form-control:hover,
 .input-group .form-control:focus {
     /* Ignore the focus outline for the inputs that are children of an input group */
     outline: unset;
+
+    background: transparent;
+}
+
+.input-group button,
+.input-group a {
+    display: flex;
+    --bs-border-width: 0;
+    --accented-background-color: transparent;
+    background: transparent;
+    padding: 0 4px;
+
+    --muted-text-color: var(--input-text-color);
+}
+
+.input-group a.disabled {
+    opacity: .5;
+}
+
+.input-group .input-clearer-button {
+    background: transparent !important;
 }
diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css
@@ -1209,10 +1209,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 /* Search box wrapper */
 .jump-to-note-dialog .input-group {
     margin-right: 16px;
-    background: var(--quick-search-background);
-    border: 2px solid transparent;
-    border-radius: 6px;
-    color: var(--quick-search-color);
 }
 
 .jump-to-note-dialog .input-group:hover {
@@ -1226,22 +1222,6 @@ body .calendar-dropdown-widget .calendar-body a:hover {
     color: var(--quick-search-focus-color);
 }
 
-/* Search box input */
-.jump-to-note-dialog .input-group input {
-    --bs-border-width: 0;
-
-    box-shadow: unset;
-    background: transparent;
-    color: currentColor;
-}
-
-/* Search box buttons */
-.jump-to-note-dialog .input-group button {
-    --bs-border-width: 0;
-    --accented-background-color: transparent;
-    padding: 0 4px;
-}
-
 .jump-to-note-dialog .input-group button:last-child {
     padding-right: 0.75em;
 }