You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.9 KiB
59 lines
1.9 KiB
3 years ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
exports.default = exports.ModalStyled = void 0;
|
||
|
|
const polished_1 = require("polished");
|
||
|
|
const styled_components_1 = __importDefault(require("styled-components"));
|
||
|
|
const styled_system_1 = require("styled-system");
|
||
|
|
const box_1 = require("../../atoms/box");
|
||
|
|
const theme_get_1 = __importDefault(require("../../utils/theme-get"));
|
||
|
|
const DEFAULT_WIDTH = 540;
|
||
|
|
const VARIANT_BORDER_WIDTH = 8;
|
||
|
|
const variantStyle = (color, props) => {
|
||
|
|
const newPadding = polished_1.getValueAndUnit(theme_get_1.default('space', 'xxl')(props))[0] - VARIANT_BORDER_WIDTH;
|
||
|
|
return {
|
||
|
|
borderLeftWidth: VARIANT_BORDER_WIDTH,
|
||
|
|
borderLeftStyle: 'solid',
|
||
|
|
borderLeftColor: color,
|
||
|
|
paddingLeft: newPadding,
|
||
|
|
};
|
||
|
|
};
|
||
|
|
const variants = (props) => styled_system_1.variant({
|
||
|
|
prop: 'variant',
|
||
|
|
variants: {
|
||
|
|
primary: variantStyle('primary100', props),
|
||
|
|
danger: variantStyle('error', props),
|
||
|
|
success: variantStyle('success', props),
|
||
|
|
info: variantStyle('info', props),
|
||
|
|
secondary: variantStyle('accent', props),
|
||
|
|
light: variantStyle('grey60', props),
|
||
|
|
default: {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const ModalStyled = styled_components_1.default(box_1.Box) `
|
||
|
|
position: relative;
|
||
|
|
& > .close-button {
|
||
|
|
position: absolute;
|
||
|
|
top: ${theme_get_1.default('space', 'md')};
|
||
|
|
right: ${theme_get_1.default('space', 'md')};
|
||
|
|
}
|
||
|
|
& > .modal-label {
|
||
|
|
margin-bottom: 0;
|
||
|
|
margin-top: -${theme_get_1.default('space', 'xxl')};
|
||
|
|
padding-top: ${theme_get_1.default('space', 'sm')};
|
||
|
|
}
|
||
|
|
${(props) => variants(props)};
|
||
|
|
`;
|
||
|
|
exports.ModalStyled = ModalStyled;
|
||
|
|
exports.default = ModalStyled;
|
||
|
|
ModalStyled.defaultProps = {
|
||
|
|
pl: 'xxl',
|
||
|
|
pr: 'xl',
|
||
|
|
pt: 'x3',
|
||
|
|
pb: 'xxl',
|
||
|
|
bg: 'white',
|
||
|
|
width: [1, DEFAULT_WIDTH],
|
||
|
|
};
|