kwikid-components-react
Version:
KwikID's Component Library in React
15 lines (14 loc) • 2.85 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.KwikIDStyleUserJourneyContainer = exports.KwikIDStyleNotepadTitle = exports.KwikIDStyleNotepadContent = exports.KwikIDStyleNoSummaryData = exports.KwikIDStyleDataViewerSummaryContainer = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
const KwikIDStyleUserJourneyContainer = exports.KwikIDStyleUserJourneyContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n flex-direction: row;\n justify-content: space-between;\n align-items: stretch;\n gap: var(--kwikui-space-m);\n\n /* Use custom properties for responsive sizing based on parent width */\n &.small-container {\n flex-direction: column-reverse; /* Reverse to put journey steps on top */\n }\n\n /* Traditional media query as fallback */\n @media (max-width: 680px) {\n flex-direction: column-reverse; /* Reverse to put journey steps on top */\n }\n"])));
const KwikIDStyleNoSummaryData = exports.KwikIDStyleNoSummaryData = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n vertical-align: middle;\n padding-top: 50px;\n"])));
const KwikIDStyleDataViewerSummaryContainer = exports.KwikIDStyleDataViewerSummaryContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background: white;\n padding: var(--kwikui-space-m);\n padding-bottom: 0;\n width: 100%;\n\n /* Add CSS class that can be toggled based on width */\n &.container-width-small {\n /* Styles for small container */\n }\n"])));
const KwikIDStyleNotepadTitle = exports.KwikIDStyleNotepadTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: 20px 20px 0px 0px;\n padding: 5px 10px;\n color: #cbe0fbf2;\n font-size: 14px;\n font-weight: 500;\n background-color: #e7f0fcf2;\n border-radius: 5px 5px 0px 0px;\n width: 100%;\n"])));
const KwikIDStyleNotepadContent = exports.KwikIDStyleNotepadContent = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: 0px 20px 0px 0px;\n padding: 5px 10px;\n color: gray;\n font-size: 12px;\n font-weight: 400;\n background-color: rgba(216, 215, 215, 0.555);\n border-radius: 0px 0px 5px 5px;\n width: 100%;\n"])));