style(next): create a style for dropdown buttons to mimic combo boxes

TriliumNext · Jan 15, 2025 · 0339d83 · 0339d83
1 parent f7efc03
commit 0339d83
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
@@ -126,24 +126,41 @@ input::selection,
     background: transparent !important;
 }
 
-/* Combo boxes */
+/* Combo box-like dropdown buttons */
 
-select, select.form-select {
+.select-button.dropdown-toggle {
+    padding-right: 40px;
+}
+
+.select-button.dropdown-toggle::after {
+    /* Remove the original arrow */
+    content: unset;
+}
+
+/* Combo boxes and combo box-like dropdown buttons */
+
+select,
+select.form-select,
+.select-button.dropdown-toggle,
+.select-button.dropdown-toggle.btn {
     outline: 3px solid transparent;
     outline-offset: 6px;
-    background: unset;
     background: var(--input-background-color)
                 var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat;
     color: var(--input-text-color);
     border: unset;
 }
 
-select:hover, select.form-select:hover {
+select:hover,
+select.form-select:hover,
+.select-button.dropdown-toggle:hover {
     background-color: var(--input-hover-background);
     color: var(--input-hover-color);
 }
 
-select:focus, select.form-select:focus {
+select:focus,
+select.form-select:focus,
+.select-button.dropdown-toggle:focus {
     box-shadow: unset;
     outline: 3px solid var(--input-focus-outline-color);
     outline-offset: 0;