81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
import styled from "styled-components";
|
|
import IconButton from "../icon-button";
|
|
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};
|
|
}
|
|
|
|
.toastr_success {
|
|
path {
|
|
fill: ${(props) => props.theme.toastr.svg.color.success};
|
|
}
|
|
}
|
|
.toastr_error {
|
|
path {
|
|
fill: ${(props) => props.theme.toastr.svg.color.error};
|
|
}
|
|
}
|
|
.toastr_warning {
|
|
path {
|
|
fill: ${(props) => props.theme.toastr.svg.color.warning};
|
|
}
|
|
}
|
|
.toastr_info {
|
|
path {
|
|
fill: ${(props) => props.theme.toastr.svg.color.info};
|
|
}
|
|
}
|
|
`;
|
|
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[props.type]};
|
|
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;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const StyledIconButton = styled(IconButton)`
|
|
svg {
|
|
path {
|
|
fill: ${(props) => props.theme.toastr.closeButtonColor};
|
|
}
|
|
}
|
|
`;
|
|
|
|
StyledIconButton.defaultProps = { theme: Base };
|
|
|
|
export { StyledCloseWrapper, StyledDiv, IconWrapper, StyledIconButton };
|