DocSpace-client/packages/asc-web-components/toast/styled-toastr.js

52 lines
1.4 KiB
JavaScript

import styled from "styled-components";
import Base from "../themes/base";
const IconWrapper = styled.div`
align-self: start;
display: flex;
svg {
width: ${(props) => props.theme.toastr.svg.width};
min-width: ${(props) => props.theme.toastr.svg.minWidth};
height: ${(props) => props.theme.toastr.svg.height};
min-height: ${(props) => props.theme.toastr.svg.minHeight};
path {
fill: ${(props) => props.theme.toastr.svg.color};
}
}
`;
IconWrapper.defaultProps = { theme: Base };
const StyledDiv = styled.div`
margin: 0 15px;
.toast-title {
font-weight: ${(props) => props.theme.toastr.title.lineHeight};
margin: ${(props) => props.theme.toastr.title.margin};
margin-bottom: ${(props) => props.theme.toastr.title.marginBottom};
line-height: ${(props) => props.theme.toastr.title.lineHeight};
color: ${(props) => props.theme.toastr.title.color};
font-size: ${(props) => props.theme.toastr.title.fontSize};
}
.toast-text {
line-height: ${(props) => props.theme.toastr.text.lineHeight};
align-self: center;
font-size: ${(props) => props.theme.toastr.text.fontSize};
color: ${(props) => props.theme.toastr.text.color};
word-break: break-word;
}
`;
StyledDiv.defaultProps = { theme: Base };
const StyledCloseWrapper = styled.div`
.closeButton {
opacity: 0.5;
padding-top: 2px;
&:hover {
opacity: 1;
}
}
`;
export { StyledCloseWrapper, StyledDiv, IconWrapper };