79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
import styled from "styled-components";
|
|
|
|
import Text from "../text";
|
|
import Base from "../themes/base";
|
|
|
|
const StyledSelectedItem = styled.div`
|
|
position: relative;
|
|
display: ${(props) => (props.isInline ? "inline-grid" : "grid")};
|
|
grid-template-columns: 1fr auto;
|
|
box-sizing: border-box;
|
|
background: ${(props) => props.theme.selectedItem.background};
|
|
border: ${(props) => props.theme.selectedItem.border};
|
|
border-radius: ${(props) => props.theme.selectedItem.borderRadius};
|
|
`;
|
|
StyledSelectedItem.defaultProps = {
|
|
theme: { ...Base, interfaceDirection: "ltr" },
|
|
};
|
|
|
|
const StyledSelectedTextBox = styled.div`
|
|
display: grid;
|
|
padding: ${(props) => props.theme.selectedItem.textBox.padding};
|
|
height: ${(props) => props.theme.selectedItem.textBox.height};
|
|
align-items: ${(props) => props.theme.selectedItem.textBox.alignItems};
|
|
|
|
${({ theme }) =>
|
|
theme.interfaceDirection === "rtl"
|
|
? `border-left: ${theme.selectedItem.textBox.borderRight};`
|
|
: `border-right: ${theme.selectedItem.textBox.borderRight};`}
|
|
cursor: default;
|
|
`;
|
|
StyledSelectedTextBox.defaultProps = {
|
|
theme: { ...Base, interfaceDirection: "ltr" },
|
|
};
|
|
|
|
const StyledCloseButton = styled.div`
|
|
display: flex;
|
|
align-items: ${(props) => props.theme.selectedItem.closeButton.alignItems};
|
|
padding: ${(props) => props.theme.selectedItem.closeButton.padding};
|
|
cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
|
|
|
|
path {
|
|
${(props) =>
|
|
!props.isDisabled &&
|
|
`fill: ${props.theme.selectedItem.closeButton.color};`}
|
|
}
|
|
|
|
&:hover {
|
|
path {
|
|
${(props) =>
|
|
!props.isDisabled &&
|
|
`fill: ${props.theme.selectedItem.closeButton.colorHover};`}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
${(props) =>
|
|
!props.isDisabled &&
|
|
`background-color: ${props.theme.selectedItem.closeButton.backgroundColor};`}
|
|
}
|
|
`;
|
|
StyledCloseButton.defaultProps = {
|
|
theme: { ...Base, interfaceDirection: "ltr" },
|
|
};
|
|
|
|
const StyledText = styled(Text)`
|
|
color: ${(props) =>
|
|
props.isDisabled
|
|
? props.theme.selectedItem.text.disabledColor
|
|
: props.theme.selectedItem.text.color};
|
|
`;
|
|
StyledText.defaultProps = { theme: { ...Base, interfaceDirection: "ltr" } };
|
|
|
|
export {
|
|
StyledCloseButton,
|
|
StyledSelectedTextBox,
|
|
StyledSelectedItem,
|
|
StyledText,
|
|
};
|