mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
update multiselect styles
This commit is contained in:
@@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user