update multiselect styles

This commit is contained in:
jeffvli
2025-12-28 15:07:57 -08:00
parent ffdef596ad
commit 109788ebbb
5 changed files with 30 additions and 8 deletions
@@ -84,11 +84,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2px; left: 2px;
width: 4px; width: 2px;
height: 50%; height: 50%;
content: ''; content: '';
background-color: var(--theme-colors-primary-filled); background-color: var(--theme-colors-primary-filled);
border-radius: var(--theme-border-radius-xl); border-radius: var(--theme-radius-xl);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
@@ -26,11 +26,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2px; left: 2px;
width: 4px; width: 2px;
height: 50%; height: 50%;
content: ''; content: '';
background-color: var(--theme-colors-primary-filled); background-color: var(--theme-colors-primary-filled);
border-radius: var(--theme-border-radius-xl); border-radius: var(--theme-radius-xl);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
@@ -44,11 +44,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2px; left: 2px;
width: 4px; width: 2px;
height: 50%; height: 50%;
content: ''; content: '';
background-color: var(--theme-colors-primary-filled); background-color: var(--theme-colors-primary-filled);
border-radius: var(--theme-border-radius-xl); border-radius: var(--theme-radius-xl);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
@@ -57,3 +57,17 @@
.option:hover { .option:hover {
background: lighten(var(--theme-colors-surface), 5%); background: lighten(var(--theme-colors-surface), 5%);
} }
.pill {
font-size: var(--theme-font-size-sm);
background: var(--theme-colors-background);
border-radius: var(--theme-radius-sm);
}
.pills-list {
padding-right: var(--theme-spacing-lg);
}
.clear-button {
background: transparent !important;
}
@@ -25,9 +25,17 @@ export const MultiSelect = ({
input: styles.input, input: styles.input,
label: styles.label, label: styles.label,
option: styles.option, option: styles.option,
pill: styles.pill,
pillsList: styles.pillsList,
root: styles.root, root: styles.root,
...classNames, ...classNames,
}} }}
clearButtonProps={{
classNames: {
root: styles.clearButton,
},
variant: 'transparent',
}}
style={{ maxWidth, width }} style={{ maxWidth, width }}
variant={variant} variant={variant}
withCheckIcon={false} withCheckIcon={false}
@@ -44,11 +44,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 2px; left: 2px;
width: 4px; width: 2px;
height: 50%; height: 50%;
content: ''; content: '';
background-color: var(--theme-colors-primary-filled); background-color: var(--theme-colors-primary-filled);
border-radius: var(--theme-border-radius-xl); border-radius: var(--theme-radius-xl);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }