kwikid-components-react
Version:
KwikID's Component Library in React
65 lines (61 loc) • 2.2 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"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const KwikIDStyleUserJourneyContainer = exports.KwikIDStyleUserJourneyContainer = _styledComponents.default.div`
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
gap: var(--kwikui-space-m);
/* Use custom properties for responsive sizing based on parent width */
&.small-container {
flex-direction: column-reverse; /* Reverse to put journey steps on top */
}
/* Traditional media query as fallback */
@media (max-width: 680px) {
flex-direction: column-reverse; /* Reverse to put journey steps on top */
}
`;
const KwikIDStyleNoSummaryData = exports.KwikIDStyleNoSummaryData = _styledComponents.default.div`
width: 100%;
height: 100%;
display: flex;
justify-content: center;
vertical-align: middle;
padding-top: 50px;
`;
const KwikIDStyleDataViewerSummaryContainer = exports.KwikIDStyleDataViewerSummaryContainer = _styledComponents.default.div`
background: white;
padding: var(--kwikui-space-m);
padding-bottom: 0;
width: 100%;
/* Add CSS class that can be toggled based on width */
&.container-width-small {
/* Styles for small container */
}
`;
const KwikIDStyleNotepadTitle = exports.KwikIDStyleNotepadTitle = _styledComponents.default.div`
margin: 20px 20px 0px 0px;
padding: 5px 10px;
color: #cbe0fbf2;
font-size: 14px;
font-weight: 500;
background-color: #e7f0fcf2;
border-radius: 5px 5px 0px 0px;
width: 100%;
`;
const KwikIDStyleNotepadContent = exports.KwikIDStyleNotepadContent = _styledComponents.default.div`
margin: 0px 20px 0px 0px;
padding: 5px 10px;
color: gray;
font-size: 12px;
font-weight: 400;
background-color: rgba(216, 215, 215, 0.555);
border-radius: 0px 0px 5px 5px;
width: 100%;
`;