norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
13 lines • 2.75 kB
JavaScript
import { __makeTemplateObject } from "tslib";
import { Box, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
export var ChatMessageBalloonContainerStyle = styled(Box)({
display: 'flex',
flexDirection: 'column',
});
export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n flex-direction: ", ";\n\n &:last-child {\n margin-bottom: 0px;\n }\n"], ["\n display: flex;\n margin-bottom: 8px;\n flex-direction: ", ";\n\n &:last-child {\n margin-bottom: 0px;\n }\n"])), function (props) { return (props.direction === 'I' ? 'row-reverse' : 'row'); });
export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-highlight {\n border: 2px solid #8a8888;\n }\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 2px solid #8a8888;\n }\n }\n"], ["\n background-color: ", ";\n border: 2px solid transparent;\n border-radius: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n flex-direction: column;\n padding: 12px 24px;\n width: 60%;\n transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n\n &.is-highlight {\n border: 2px solid #8a8888;\n }\n\n &.is-interactive {\n cursor: pointer;\n\n &:hover {\n border: 2px solid #8a8888;\n }\n }\n"])), function (props) { return (props.direction === 'I' ? '#FFF' : '#E18B50'); }, function (props) { return (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px'); }, function (props) { return (props.direction === 'I' ? '#4D4F5B' : '#FFF'); });
export var ChatMessageDateStyle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: #43425d;\n opacity: 0.5;\n"], ["\n color: #43425d;\n opacity: 0.5;\n"])));
export var ChatMessageChildrenStyle = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n justify-content: ", ";\n padding: 8px;\n"], ["\n align-items: center;\n box-sizing: border-box;\n display: flex;\n flex: 1;\n justify-content: ", ";\n padding: 8px;\n"])), function (props) { return (props.direction === 'I' ? 'end' : 'start'); });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=ChatMessageBalloon.style.js.map