@botonic/react
Version:
Build Chatbots using React
65 lines (64 loc) • 2.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DarkBackgroundMenu = exports.ErrorMessage = exports.ErrorMessageContainer = exports.StyledWebchat = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../constants");
exports.StyledWebchat = styled_components_1.default.div `
position: fixed;
right: ${props => props.theme.style.right};
bottom: ${props => props.theme.style.bottom};
width: ${props => props.theme.style.width};
height: ${props => props.theme.style.height};
margin: auto;
background-color: ${props => props.theme.style.backgroundColor};
border-radius: 10px;
box-shadow: ${props => props.theme.style.boxShadow};
font-family: ${props => props.theme.style.fontFamily};
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
@media (max-width: ${props => props.theme.mobileBreakpoint}px) {
position: ${props => props.theme.mobileStyle.position};
right: ${props => props.theme.mobileStyle.right};
bottom: ${props => props.theme.mobileStyle.bottom};
width: ${props => props.theme.mobileStyle.width};
height: ${props => props.theme.mobileStyle.height};
border-radius: ${props => props.theme.mobileStyle.borderRadius};
font-size: ${props => props.theme.mobileStyle.fontSize};
}
`;
exports.ErrorMessageContainer = styled_components_1.default.div `
position: relative;
display: flex;
z-index: 1;
justify-content: center;
width: 100%;
`;
exports.ErrorMessage = styled_components_1.default.div `
position: absolute;
top: 10px;
font-size: 14px;
line-height: 20px;
padding: 4px 11px;
display: flex;
background-color: ${constants_1.COLORS.ERROR_RED};
color: ${constants_1.COLORS.CONCRETE_WHITE};
border-radius: 5px;
align-items: center;
justify-content: center;
font-family: ${props => props.theme.style.fontFamily};
`;
exports.DarkBackgroundMenu = styled_components_1.default.div `
background: ${constants_1.COLORS.SOLID_BLACK};
opacity: 0.3;
z-index: 1;
right: 0;
bottom: 0;
border-radius: 10px;
position: absolute;
width: 100%;
height: 100%;
`;
//# sourceMappingURL=styles.js.map