@activecollab/components
Version:
ActiveCollab Components
29 lines • 1.93 kB
JavaScript
import styled, { css } from "styled-components";
import { BoxSizingStyle } from "../BoxSizingStyle";
import { FontStyle } from "../FontStyle";
import { CloseSmallIcon } from "../Icons";
export const StyledToastMessage = styled.div.withConfig({
displayName: "Styles__StyledToastMessage",
componentId: "sc-7wr5ky-0"
})(["display:flex;flex-direction:row;align-items:center;height:36px;width:fit-content;max-width:100%;padding:10px 8px 10px 16px;border-radius:18px;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$type === "error" && css(["background-color:#f1a5a5;", ""], props.$dropShadow && css(["box-shadow:0px 7px 12px -4px rgba(234,179,179,0.7);"])), props => props.$type === "success" && css(["background-color:#afdfdb;", ""], props.$dropShadow && css(["box-shadow:0px 7px 12px -4px rgba(182,218,215,0.7);"])), props => props.$type === "general" && css(["background-color:#bddff6;", ""], props.$dropShadow && css(["box-shadow:0px 7px 12px -4px rgba(166,199,220,0.7);"])), props => props.$type === "warning" && css(["background-color:#ffffd1;", ""], props.$dropShadow && css(["box-shadow:0px 7px 12px -4px rgba(242,242,208,0.7);"])));
export const StyledToastMessageText = styled.div.withConfig({
displayName: "Styles__StyledToastMessageText",
componentId: "sc-7wr5ky-1"
})(["", " ", " ", " ", " color:rgba(48,48,55,0.65);"], {
"fontSize": "0.75rem"
}, {
"fontWeight": "700"
}, {
"overflow": "hidden",
"textOverflow": "ellipsis",
"whiteSpace": "nowrap"
}, {
"marginRight": "0.5rem"
});
export const StyledCloseSmallIcon = styled(CloseSmallIcon).withConfig({
displayName: "Styles__StyledCloseSmallIcon",
componentId: "sc-7wr5ky-2"
})(["fill:rgba(48,48,55,0.3);flex-shrink:0;cursor:pointer;&:hover{fill:rgba(48,48,55,0.65);}"]);
StyledToastMessage.displayName = "StyledToastMessage";
StyledCloseSmallIcon.displayName = "StyledCloseSmallIcon";
//# sourceMappingURL=Styles.js.map