@botonic/react
Version:
Build Chatbots using React
50 lines • 1.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dot = exports.TypingMsgWrapper = exports.TypingContainer = void 0;
const tslib_1 = require("tslib");
const styled_components_1 = tslib_1.__importStar(require("styled-components"));
const blink = (0, styled_components_1.keyframes) `
50% {
opacity: 1;
}
`;
const bulge = (0, styled_components_1.keyframes) `
50% {
transform: scale(1.05);
}
`;
exports.TypingContainer = styled_components_1.default.div `
padding: 0px 8px 8px 8px;
`;
exports.TypingMsgWrapper = styled_components_1.default.div `
will-change: transform;
width: 44px;
line-height: 0px;
border-radius: 20px;
padding: 8px 2px;
text-align: center;
display: block;
margin: 8px;
position: relative;
animation: 2s ${bulge} infinite ease-out;
background-color: ${props => props.backgroundColor};
`;
exports.Dot = styled_components_1.default.span `
height: 6px;
width: 6px;
margin: 0 1px;
background-color: #9e9ea1;
display: inline-block;
border-radius: 50%;
opacity: 0.4;
&:nth-of-type(1) {
animation: 1s ${blink} infinite 0.3333s;
}
&:nth-of-type(2) {
animation: 1s ${blink} infinite 0.6666s;
}
&:nth-of-type(3) {
animation: 1s ${blink} infinite 1s;
}
`;
//# sourceMappingURL=styles.js.map