custom-chatbot-app/dist/cjs/components/ChatBotScreen/ChatConversationSection/styled.js

This is my custom chatbot package for BuyersEdge

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledLoadingIndicator = exports.StyledSendIconSubmit = exports.StyledInput = exports.StyledInputWrapper = exports.StyledMessageList = exports.StyledChatMessagesWrapper = void 0;
var tslib_1 = require("tslib");
var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
var Theme_1 = tslib_1.__importDefault(require("../../Theme"));
exports.StyledChatMessagesWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_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_1.default.spacing(6), Theme_1.default.spacing(19));
exports.StyledMessageList = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), Theme_1.default.spacing(3));
exports.StyledInputWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__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_1.default.spacing(5), Theme_1.default.spacing(15));
exports.StyledInput = styled_components_1.default.input(templateObject_4 || (templateObject_4 = tslib_1.__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_1.default.spacing(4), Theme_1.default.spacing(6));
exports.StyledSendIconSubmit = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  width: ", "; \n  height: ", "; \n  margin: ", " ", " ", " ", "\n"], ["\n  width: ", "; \n  height: ", "; \n  margin: ", " ", " ", " ", "\n"])), Theme_1.default.spacing(8), Theme_1.default.spacing(7), Theme_1.default.spacing(4), Theme_1.default.spacing(4), Theme_1.default.spacing(4), Theme_1.default.spacing(0));
exports.StyledLoadingIndicator = styled_components_1.default.div(templateObject_6 || (templateObject_6 = tslib_1.__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_1.default.colors.primary.background, Theme_1.default.colors.primary.background, Theme_1.default.spacing(5), Theme_1.default.spacing(5), Theme_1.default.colors.primary.background, Theme_1.default.colors.primary.background, Theme_1.default.colors.primary.background, Theme_1.default.colors.primary.background, Theme_1.default.colors.primary.main, Theme_1.default.colors.primary.background);
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=styled.js.map