@up-group-ui/react-controls
Version:
Up shared react controls
149 lines • 6.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStyles = void 0;
var tslib_1 = require("tslib");
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var animations_1 = require("../../../Common/theming/animations");
var utils_1 = require("../../../Common/theming/utils");
var cssModal = function (_a) {
var modalWidth = _a.modalWidth, displayMode = _a.displayMode, showModal = _a.showModal, theme = _a.theme, screenPosition = _a.screenPosition;
return (0, typestyle_1.style)({
$nest: {
'& .up-modal': {
position: 'fixed',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 1050,
overflowY: 'auto',
outline: 0,
opacity: 0,
visibility: !showModal ? 'hidden' : 'visible',
$nest: {
'&.fade': {
visibility: 'hidden',
transition: '.5s ease-in-out',
$nest: {
'& .up-modal_dialog': (0, tslib_1.__assign)({ transition: 'transform 1s ease-out', transform: 'translate(0, -25%)' }, (modalWidth !== 'default' && {
overflowY: 'hidden',
maxWidth: modalWidth === 'half' ? '50%' : 'auto',
marginLeft: displayMode === 'fromRight'
? modalWidth === 'full'
? '0'
: modalWidth === 'half'
? '50%'
: 'unset'
: '0',
transition: 'unset',
transform: 'unset',
})),
},
},
'&.in': (0, tslib_1.__assign)((0, tslib_1.__assign)({ visibility: 'visible', transition: '.5s ease-in-out', animationDuration: '1s', opacity: 1 }, (modalWidth !== 'default' && (0, tslib_1.__assign)({}, animationProp('fadeIn', displayMode)))), { $nest: {
'& .up-modal_dialog': (0, tslib_1.__assign)({ transition: 'transform 1s ease-out', transform: 'translate(0, 0)' }, (modalWidth !== 'default' && {
marginLeft: displayMode === 'fromRight'
? modalWidth === 'full'
? '0'
: modalWidth === 'half'
? '50%'
: 'unset'
: 'auto',
marginRight: displayMode === 'fromLeft'
? modalWidth === 'full'
? '0'
: modalWidth === 'half'
? '50%'
: 'unset'
: 'auto',
overflowY: 'hidden',
})),
} }),
},
},
'& .up-modal_dialog': (0, tslib_1.__assign)((0, tslib_1.__assign)({ position: 'relative' }, (screenPosition === 'center' && {
top: '40%',
transform: 'translateY(-100%) !important',
})), (modalWidth === 'default'
? {
minWidth: '600px',
maxWidth: '70%',
margin: (0, utils_1.toRem)(30) + " auto",
}
: {
maxWidth: (modalWidth === 'half' ? 50 : 100) + "%",
})),
'& .up-modal_content': (0, tslib_1.__assign)({ position: 'relative', backgroundColor: '#fff', border: '1px solid #999', borderRadius: (0, utils_1.toRem)(6), outline: 0, boxShadow: '0 3px 9px rgba(0, 0, 0, .5)' }, (modalWidth !== 'default' && {
padding: (0, utils_1.toRem)(150) + " " + (0, utils_1.toRem)(105) + " " + (0, utils_1.toRem)(15),
display: 'flex',
flexDirection: 'column',
height: '100vh',
borderRadius: '0',
})),
'& .up-modal_header': {
display: 'flex',
justifyContent: 'space-between',
padding: (0, utils_1.toRem)(15),
},
'& .up-modal_title': (0, tslib_1.__assign)({ margin: 0, fontWeight: 400, color: theme ? theme.colorMap.grey1 : '#808080' }, (modalWidth !== 'default' && {
fontSize: (0, utils_1.toRem)(18),
fontWeight: 'bold',
})),
'& .up-modal_close': (0, tslib_1.__assign)({ cursor: 'pointer', $nest: {
'& svg': {
width: (0, utils_1.toRem)(20),
height: (0, utils_1.toRem)(20),
$nest: {
'& path': {
fill: theme ? theme.colorMap.gray1 : '#808080',
},
},
},
} }, (modalWidth !== 'default' && {
position: 'absolute',
top: (0, utils_1.toRem)(50),
right: (0, utils_1.toRem)(50),
zIndex: 1000,
})),
'& .up-modal_body': {
padding: (0, utils_1.toRem)(15),
},
'& .up-modal_footer': {
padding: (0, utils_1.toRem)(15),
textAlign: 'right',
borderTop: '1px solid #e5e5e5',
},
'& .up-modal_backdrop': {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: '#0d0e0e',
opacity: 0.7,
overflow: 'hidden',
zIndex: 1040,
$nest: {
'&.fade': {
filter: 'alpha(opacity=0)',
opacity: 0,
},
'&.in': {
filter: 'alpha(opacity=50)',
opacity: 0.5,
},
},
},
},
});
};
var animationProp = function (fade, displayMode) {
if (fade === 'fadeIn')
return (0, animations_1.fullAnimationProp)(0.5, 'ease', fade, displayMode);
};
var getStyles = function (props) {
return (0, classnames_1.default)(cssModal(props));
};
exports.getStyles = getStyles;
//# sourceMappingURL=styles.js.map