From 0d84450fc43c08cac2068e5e1c03268b19a45759 Mon Sep 17 00:00:00 2001 From: Jachin Rupe Date: Mon, 9 Oct 2023 14:33:56 -0500 Subject: [PATCH 1/3] Adding css variables for the dropdown footer. Setting the values for the optgroup dropdown background color. --- site/demo-styles.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/site/demo-styles.css b/site/demo-styles.css index 119b48a6..b377ccb0 100644 --- a/site/demo-styles.css +++ b/site/demo-styles.css @@ -1,6 +1,6 @@ /* -Fun colors https://flatuicolors.com/palette/se Boring colors https://flatuicolors.com/palette/gb +Fun colors https://flatuicolors.com/palette/se */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap'); @@ -26,7 +26,7 @@ body { --vanadyl-blue: #0097e6; --matt-purple: #8c7ae6; --nanohanacha-gold: #e1b12c; - --street-green: #44bd32; + --skirret-green: #44bd32; --naval: #40739e; --nasturcian-flower: #e84118; --lynx-white: #f5f6fa; @@ -118,6 +118,9 @@ body { --much-select-dropdown-option-highlighted-background-color: var(--matt-purple); --much-select-dropdown-option-active-background-color: var(--protoss-pylon); --much-select-dropdown-option-selected-background-color: var(--chain-gang-grey); + --much-select-dropdown-optgroup-background-color: var(--skirret-green); + --much-select-dropdown-footer-color: var(--chain-gang-grey); + --much-select-dropdown-footer-background-color: var(--hint-of-pensive); } #theme-switch-fun:checked ~ #page-wrapper { @@ -152,6 +155,9 @@ body { --much-select-dropdown-option-highlighted-background-color: var(--spirio-disco-ball); --much-select-dropdown-option-active-background-color: var(--minty-green); --much-select-dropdown-option-selected-background-color: var(--fresh-turquoise); + --much-select-dropdown-optgroup-background-color: var(--green-teal); + --much-select-dropdown-footer-color: var(--yriel-yellow); + --much-select-dropdown-footer-background-color: var(--red-orange); } } @@ -183,6 +189,9 @@ body { --much-select-dropdown-option-highlighted-background-color: var(--free-speech-blue); --much-select-dropdown-option-active-background-color: var(--minty-green); --much-select-dropdown-option-selected-background-color: var(--black-pearl); + --much-select-dropdown-optgroup-background-color: var(--blue-nights); + --much-select-dropdown-footer-color: var(--hint-of-pensive); + --much-select-dropdown-footer-background-color: var(--chain-gang-grey); } #theme-switch-fun:checked ~ #page-wrapper { @@ -211,6 +220,9 @@ body { --much-select-dropdown-option-highlighted-background-color: var(--black-pearl); --much-select-dropdown-option-active-background-color: var(--london-square); --much-select-dropdown-option-selected-background-color: var(--black-pearl); + --much-select-dropdown-optgroup-background-color: var(--london-square); + --much-select-dropdown-footer-color: var(--minty-green); + --much-select-dropdown-footer-background-color: var(--dark-periwinkle); } } @@ -477,11 +489,10 @@ much-select::part(input-filter) { outline: none; background: none; - padding: 0; margin: 0; /* Keep input filter's text from running over the dropdown indicator. */ - padding-right: 0.8em; + padding: 0 0.8em 0 0; } much-select::part(input-filter):hover, much-select::part(input-filter):focus { @@ -629,7 +640,7 @@ much-select::part(dropdown-option-description) { much-select::part(dropdown-footer) { font-size: 50%; text-align: center; - color: gray; - background-color: lightgray; + color: var(--much-select-dropdown-footer-color); + background-color: var(--much-select-dropdown-footer-background-color); padding: 5px; } From 0d203f497daabfe40f1749afb24bce6c6fc3eb3c Mon Sep 17 00:00:00 2001 From: Jachin Rupe Date: Mon, 9 Oct 2023 14:37:21 -0500 Subject: [PATCH 2/3] Make the `input-filter` text the `--text-color`. We might want to change this later but this seems like a pretty good default. --- site/demo-styles.css | 1 + 1 file changed, 1 insertion(+) diff --git a/site/demo-styles.css b/site/demo-styles.css index b377ccb0..4d6c63d8 100644 --- a/site/demo-styles.css +++ b/site/demo-styles.css @@ -467,6 +467,7 @@ much-select::part(input-filter) { */ height: 36px; font-size: var(--value-font-size); + color: var(--text-color); /* The min-width let's the input shrink down as far as it needs to. The with width lets it grow as much as it can. */ From dfed256c3697df8fb91518fc9e52b01469cae70b Mon Sep 17 00:00:00 2001 From: Jachin Rupe Date: Mon, 9 Oct 2023 14:51:30 -0500 Subject: [PATCH 3/3] Fixing the background for the value casing. --- site/demo-styles.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/demo-styles.css b/site/demo-styles.css index 4d6c63d8..04371797 100644 --- a/site/demo-styles.css +++ b/site/demo-styles.css @@ -403,9 +403,7 @@ much-select::part(value-casing output-style-custom-html) { background-color: var(--much-select-background-color); box-shadow: 1px 1px 1px 0 lightgray inset; padding: 0.1em 1.5em 0.1em 0.1em; -} -much-select::part(value-casing output-style-custom-html) { flex-flow: row; cursor: pointer; border: 1px solid var(--much-select-border-color); @@ -456,6 +454,11 @@ much-select::part(value-casing output-style-custom-html single) { background-repeat: repeat-x; } +much-select::part(value-casing output-style-custom-html multi) { + background-image: var(--much-select-value-casing-background-image); + background-repeat: repeat-x; +} + much-select::part(value-casing single disabled) { background-image: none; background-color: var(--much-select-disabled-background-color);