Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 02:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adorian Doran 2025-01-15 02:11:17 +02:00
parent f7efc033e1
commit 0339d83434
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/public/stylesheets/theme-next/forms.css
View File

@ -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;