@botonic/react
Version:
Build Chatbots using React
59 lines (57 loc) • 1.68 kB
JavaScript
import styled from 'styled-components';
import { COLORS } from '../../constants';
export const HeaderContainer = styled.div `
display: flex;
background: linear-gradient(
90deg,
${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; }};
}
`;
export const ImageContainer = styled.div `
padding: 10px;
align-items: center;
img {
width: 32px;
border-radius: 50%;
}
`;
export const TextContainer = styled.div `
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
`;
export const Title = styled.div `
display: flex;
font-family: inherit;
font-size: 15px;
font-weight: bold;
color: ${COLORS.SOLID_WHITE};
`;
export const Subtitle = styled.div `
display: flex;
font-family: inherit;
font-size: 11px;
color: ${COLORS.SOLID_WHITE};
`;
export const CloseHeader = styled.div `
padding: 0px 16px;
cursor: pointer;
color: ${COLORS.SOLID_WHITE};
font-family: inherit;
font-size: 36px;
`;
export const StyledWebchatHeader = styled.div `
border-radius: 8px 8px 0px 0px;
box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
height: 55px;
flex: none;
`;
//# sourceMappingURL=styles.js.map