@botonic/react
Version:
Build Chatbots using React
63 lines (61 loc) • 2.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledWebchatHeader = exports.CloseHeader = exports.Subtitle = exports.Title = exports.TextContainer = exports.ImageContainer = exports.HeaderContainer = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const constants_1 = require("../../constants");
exports.HeaderContainer = styled_components_1.default.div `
display: flex;
background: linear-gradient(
90deg,
${constants_1.COLORS.BLEACHED_CEDAR_PURPLE} 0%,
${props => props.color} 100%
);
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; }};
z-index: 2;
height: inherit;
@media (max-width: ${props => props.theme.mobileBreakpoint}px) {
border-radius: ${props => { var _a, _b; return (_b = (_a = props.theme.header) === null || _a === void 0 ? void 0 : _a.mobileStyle) === null || _b === void 0 ? void 0 : _b.borderRadius; }};
}
`;
exports.ImageContainer = styled_components_1.default.div `
padding: 10px;
align-items: center;
img {
width: 32px;
border-radius: 50%;
}
`;
exports.TextContainer = styled_components_1.default.div `
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
`;
exports.Title = styled_components_1.default.div `
display: flex;
font-family: inherit;
font-size: 15px;
font-weight: bold;
color: ${constants_1.COLORS.SOLID_WHITE};
`;
exports.Subtitle = styled_components_1.default.div `
display: flex;
font-family: inherit;
font-size: 11px;
color: ${constants_1.COLORS.SOLID_WHITE};
`;
exports.CloseHeader = styled_components_1.default.div `
padding: 0px 16px;
cursor: pointer;
color: ${constants_1.COLORS.SOLID_WHITE};
font-family: inherit;
font-size: 36px;
`;
exports.StyledWebchatHeader = styled_components_1.default.div `
border-radius: 8px 8px 0px 0px;
box-shadow: ${constants_1.COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
height: 55px;
flex: none;
`;
//# sourceMappingURL=styles.js.map