saleor-dashboard/src/components/MultiAutocompleteSelectField/styles.ts
Wojciech Mista 9574e6a92c
Macaw UI update (#2512)
Co-authored-by: andrzejewsky <vox3r69@gmail.com>
Co-authored-by: timur <timuric@gmail.com>
Co-authored-by: Krzysztof Żuraw <9116238+krzysztofzuraw@users.noreply.github.com>
2022-11-24 13:16:51 +01:00

75 lines
1.9 KiB
TypeScript

import { alpha } from "@material-ui/core/styles";
import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles(
theme => ({
chip: {
width: "100%",
},
chipClose: {
height: 32,
padding: 0,
width: 32,
border: 0,
},
chipContainer: {
display: "flex",
flexDirection: "column",
marginTop: theme.spacing(1),
},
chipInner: {
"& svg": {
color: theme.palette.primary.contrastText,
},
alignItems: "center",
background:
theme.palette.type === "dark"
? theme.palette.secondary.main
: alpha(theme.palette.primary.main, 0.8),
borderRadius: 18,
color: theme.palette.primary.contrastText,
display: "flex",
justifyContent: "space-between",
margin: theme.spacing(1, 0),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
chipLabel: {
color: theme.palette.primary.contrastText,
},
container: {
flexGrow: 1,
position: "relative",
},
disabledChipInner: {
"& svg": {
color: theme.palette.grey[200],
},
alignItems: "center",
background: alpha(theme.palette.grey[400], 0.8),
borderRadius: 18,
color: theme.palette.primary.contrastText,
display: "flex",
justifyContent: "space-between",
margin: theme.spacing(1, 0),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
},
adornment: {
color: theme.palette.saleor.main[3],
cursor: "pointer",
userSelect: "none",
display: "flex",
alignItems: "center",
"& svg": {
transition: theme.transitions.duration.shorter + "ms",
},
},
adornmentRotate: {
"& svg": {
transform: "rotate(180deg)",
},
},
}),
{ name: "MultiAutocompleteSelectField" },
);