101 lines
2.1 KiB
TypeScript
101 lines
2.1 KiB
TypeScript
export const styles = {
|
|
option: (provided: any, props: { isSelected: boolean; isFocused: boolean }) => ({
|
|
...provided,
|
|
cursor: "pointer",
|
|
padding: "8px 24px",
|
|
fontFamily: "var(--font-text-family)",
|
|
fontStyle: "normal",
|
|
fontWeight: "400",
|
|
fontSize: "18px",
|
|
lineHeight: "21.78px",
|
|
color: "#939393",
|
|
backgroundColor: props.isSelected ? "var(--color-primary-3)" : props.isFocused ? "var(--color-primary-3)" : undefined,
|
|
|
|
":active": {
|
|
...provided[":active"],
|
|
backgroundColor: props.isSelected ? "var(--color-primary-3)" : undefined,
|
|
},
|
|
}),
|
|
control: () => ({
|
|
width: "100%",
|
|
display: "flex",
|
|
background: "transparent",
|
|
}),
|
|
valueContainer: (provided: any) => ({
|
|
...provided,
|
|
padding: 0,
|
|
minWidth: "100px",
|
|
fontFamily: "var(--font-text-family)",
|
|
fontStyle: "normal",
|
|
fontWeight: "600",
|
|
fontSize: "16px",
|
|
lineHeight: "22px",
|
|
color: "#939393",
|
|
letter: "0.5 px",
|
|
}),
|
|
multiValue: (provided: any) => ({
|
|
...provided,
|
|
margin: "4px",
|
|
padding: "8px 16px",
|
|
fontStyle: "normal",
|
|
fontWeight: "400",
|
|
fontSize: "16px",
|
|
lineHeight: "22px",
|
|
background: "transparent",
|
|
border: "1px solid black",
|
|
borderRadius: "100px",
|
|
}),
|
|
multiValueLabel: (provided: any) => ({
|
|
...provided,
|
|
fontSize: "16px",
|
|
color: "#939393",
|
|
fontWeight: "400",
|
|
}),
|
|
input: (provided: any) => ({
|
|
...provided,
|
|
margin: 0,
|
|
padding: 0,
|
|
}),
|
|
placeholder: (provided: any) => ({
|
|
...provided,
|
|
fontSize: "16px",
|
|
lineHeight: "22px",
|
|
fontWeight: "400",
|
|
color: "#939393",
|
|
}),
|
|
indicatorSeparator: () => ({
|
|
display: "none",
|
|
}),
|
|
menu: (provided: any) => ({
|
|
...provided,
|
|
position: "static",
|
|
border: "0",
|
|
boxShadow: "none",
|
|
}),
|
|
menuList: (provided: any) => ({
|
|
...provided,
|
|
}),
|
|
multiValueRemove: (provided: any) => ({
|
|
...provided,
|
|
backgroundColor: "transparent",
|
|
color: "black",
|
|
"&:hover": {
|
|
color: "grey",
|
|
backgroundColor: "transparent",
|
|
},
|
|
">svg": {
|
|
width: "20px",
|
|
height: "20px",
|
|
},
|
|
}),
|
|
indicatorsContainer: (provided: any) => ({
|
|
...provided,
|
|
display: "none",
|
|
}),
|
|
listBox: (provided: any) => ({
|
|
...provided,
|
|
color: "red",
|
|
fontSize: "16px",
|
|
}),
|
|
};
|