@botonic/react
Version:
Build Chatbots using React
60 lines (58 loc) • 2.32 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledFrameAsDiv = exports.StyledFrame = exports.FrameStyles = exports.StyledWebviewContent = exports.StyledCloseHeader = exports.StyledWebviewHeader = exports.StyledWebview = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../../constants");
exports.StyledWebview = styled_components_1.default.div `
position: absolute;
display: flex;
flex-direction: column;
bottom: 0;
width: 100%;
height: 100%;
background-color: ${constants_1.COLORS.SOLID_WHITE};
z-index: 2;
border-radius: ${props => props.theme.style.borderRadius};
@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.StyledWebviewHeader = styled_components_1.default.div `
flex: none;
text-align: right;
background-color: ${constants_1.COLORS.WILD_SAND_WHITE};
border-top: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
border-bottom: 1px solid ${constants_1.COLORS.SOLID_BLACK_ALPHA_0_2};
border-radius: ${props => { var _a, _b; return (_b = (_a = props.theme.header) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.borderRadius; }};
@media (max-width: ${props => props.theme.mobileBreakpoint}px) {
border-radius: 0px;
}
`;
exports.StyledCloseHeader = styled_components_1.default.div `
display: inline-block;
padding: 8px 12px;
cursor: pointer;
`;
exports.StyledWebviewContent = styled_components_1.default.div `
flex: 1;
overflow: auto;
`;
exports.FrameStyles = `
border-style: none;
width: 100%;
height: 100%;
`;
exports.StyledFrame = styled_components_1.default.iframe `
${exports.FrameStyles}
`;
exports.StyledFrameAsDiv = styled_components_1.default.div `
${exports.FrameStyles}
`;
//# sourceMappingURL=styles.js.map