custom-chatbot-app
Version:
This is my custom chatbot package for BuyersEdge
11 lines • 4.42 kB
JavaScript
import { __makeTemplateObject } from "tslib";
import styled from 'styled-components';
import theme from '../../Theme';
export var StyledChatMessagesWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 100%;\n height: calc(100% - ", ");\n overflow-y: auto;\n"], ["\n padding: ", ";\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n width: 100%;\n height: calc(100% - ", ");\n overflow-y: auto;\n"])), theme.spacing(6), theme.spacing(19));
export var StyledMessageList = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: ", ";\n"])), theme.spacing(3));
export var StyledInputWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border: 1px solid gray;\n border-radius: ", ";\n height: ", ";\n width: 100%;\n position: sticky;\n"], ["\n display: flex;\n justify-content: space-between;\n border: 1px solid gray;\n border-radius: ", ";\n height: ", ";\n width: 100%;\n position: sticky;\n"])), theme.spacing(5), theme.spacing(15));
export var StyledInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: black;\n border: none;\n outline: none;\n width: 100%;\n margin: ", ";\n font-size: ", ";\n"], ["\n color: black;\n border: none;\n outline: none;\n width: 100%;\n margin: ", ";\n font-size: ", ";\n"])), theme.spacing(4), theme.spacing(6));
export var StyledSendIconSubmit = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: ", "; \n height: ", "; \n margin: ", " ", " ", " ", "\n"], ["\n width: ", "; \n height: ", "; \n margin: ", " ", " ", " ", "\n"])), theme.spacing(8), theme.spacing(7), theme.spacing(4), theme.spacing(4), theme.spacing(4), theme.spacing(0));
export var StyledLoadingIndicator = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite linear alternate;\n animation-delay: 0.5s;\n margin-left: ", ";\n margin-bottom: ", ";\n\n&::before, &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n}\n&::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite alternate;\n animation-delay: 0s;\n}\n&::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite alternate;\n animation-delay: 1s;\n}\n\n@keyframes dot-flashing {\n 0% {\n background-color: ", ";\n }\n 50%, 100% {\n background-color: ", ";\n }\n}\n"], ["\n position: relative;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite linear alternate;\n animation-delay: 0.5s;\n margin-left: ", ";\n margin-bottom: ", ";\n\n&::before, &::after {\n content: \"\";\n display: inline-block;\n position: absolute;\n top: 0;\n}\n&::before {\n left: -15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite alternate;\n animation-delay: 0s;\n}\n&::after {\n left: 15px;\n width: 10px;\n height: 10px;\n border-radius: 5px;\n background-color: ", ";\n color: ", ";\n animation: dot-flashing 1s infinite alternate;\n animation-delay: 1s;\n}\n\n@keyframes dot-flashing {\n 0% {\n background-color: ", ";\n }\n 50%, 100% {\n background-color: ", ";\n }\n}\n"])), theme.colors.primary.background, theme.colors.primary.background, theme.spacing(5), theme.spacing(5), theme.colors.primary.background, theme.colors.primary.background, theme.colors.primary.background, theme.colors.primary.background, theme.colors.primary.main, theme.colors.primary.background);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=styled.js.map