@up-group-ui/react-controls
Version:
Up shared react controls
380 lines • 16 kB
JavaScript
;
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.styleUserExpand = exports.styleContenu = exports.styleTopbar = exports.rightSpaceCollapse = exports.rightSpace = exports.styleLeftMenuCollapse = exports.imgHomelink = exports.styleLeftMenu = exports.styleMenuOh = exports.widthLeftMenuCollapse = exports.widthLeftMenuStandard = exports.heightTopBar = exports.MenuStyles = exports.getMenuCustomStyle = void 0;
var tslib_1 = require("tslib");
var device_1 = require("../../../Common/utils/device");
var typestyle_1 = require("typestyle");
var types_1 = require("../../../Common/theming/types");
var utils_1 = require("../../../Common/theming/utils");
var getMenuCustomStyle = function (key, customStyles, props, state) {
return (0, types_1.getCustomStyles)(key, customStyles, props, state);
};
exports.getMenuCustomStyle = getMenuCustomStyle;
var MenuStyles = function (props) {
var defaultMenuStyles = {
width: props.minified ? (0, utils_1.toRem)(76) : (0, utils_1.toRem)(props.width),
minWidth: (0, utils_1.toRem)(76),
zIndex: 1000,
position: 'relative',
height: '100vh',
backgroundColor: '#4E5B59',
transition: 'width 0.5s',
padding: (0, utils_1.toRem)(14),
paddingRight: 0,
};
var defaultFooterStyles = {
position: 'absolute',
bottom: (0, utils_1.toRem)(8),
width: 'calc(100% - 28px)',
};
var defaultHeaderStyles = {
display: 'flex',
flexDirection: props.minified ? 'column' : 'row',
alignItems: props.minified ? 'flex-start' : 'center',
paddingRight: (0, utils_1.toRem)(14),
};
var defaultNavStyles = {
overflowY: 'auto',
height: props.minified ? '79vh' : '84vh',
};
var defaultContentStyles = {};
if (props.customStyles) {
defaultMenuStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultMenuStyles), (0, exports.getMenuCustomStyle)('menu', props.customStyles, props));
defaultHeaderStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultHeaderStyles), (0, exports.getMenuCustomStyle)('header', props.customStyles, props));
defaultFooterStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultFooterStyles), (0, exports.getMenuCustomStyle)('footer', props.customStyles, props));
defaultNavStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultNavStyles), (0, exports.getMenuCustomStyle)('nav', props.customStyles, props));
defaultContentStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, defaultContentStyles), (0, exports.getMenuCustomStyle)('content', props.customStyles, props));
}
return (0, typestyle_1.style)({
$nest: {
'&.up-menu': defaultMenuStyles,
'&.up-menu .up-menu-cotent': defaultContentStyles,
'&.up-menu .up-menu-nav': defaultNavStyles,
'&.up-menu .up-menu-header': defaultHeaderStyles,
'&.up-menu .up-menu-footer': defaultFooterStyles,
'&.up-menu li a': {
color: '#ffffff',
textDecoration: 'none',
},
'&.up-menu ul, &.up-menu ul li': {
margin: 0,
padding: 0,
listStyle: 'none',
},
'&.up-menu nav > ul li.separator': {
margin: (0, utils_1.toRem)(27) + " 0 !important",
padding: 0,
width: 'auto',
lineHeight: '3px',
},
'&.up-menu ul li .up-icon-wrapper.colored svg, .up-menu ul li .up-icon-wrapper.colored svg path, .up-menu ul li .up-icon-wrapper.colored svg polygon, .up-menu ul li .up-icon-wrapper.colored svg polyline': {
fill: props.theme.colorMap.white,
cursor: 'pointer',
},
'&.up-menu ul li.active .up-icon-wrapper.colored:first-of-type svg, .up-menu ul li.active .up-icon-wrapper.colored:first-of-type svg path, .up-menu ul li.active .up-icon-wrapper.colored:first-of-type svg polygon, .up-menu ul li.active .up-icon-wrapper.colored:first-of-type svg polyline': {
fill: props.theme.colorMap.white,
},
'&.up-menu ul li .up-icon-wrapper.colored.chevron': {
'-webkit-transition-property': 'transform',
'-webkit-transition-duration': '.3s',
transitionProperty: 'transform',
transitionDuration: '.3s',
display: props.minified ? 'none' : 'initial',
},
'&.up-menu ul li:hover > a > .up-icon-wrapper.chevron': {
transform: 'rotate(90deg)',
},
'&.up-menu ul li.active > a > .up-icon-wrapper.chevron': {
transform: 'rotate(90deg)',
},
'&.up-menu ul li:hover .up-icon-wrapper.colored:first-of-type svg, .up-menu ul li:hover .up-icon-wrapper.colored:first-of-type svg path, .up-menu ul li:hover .up-icon-wrapper.colored:first-of-type svg polygon, .up-menu ul li:hover .up-icon-wrapper.colored:first-of-type svg polyline': {
fill: props.theme.colorMap.white,
},
'&.up-menu nav > ul > li .up-menu-item-title': {
display: props.minified ? 'none' : 'inherit',
fontSize: (0, utils_1.toRem)(14),
fontWeight: 500,
textAlign: 'left',
marginLeft: (0, utils_1.toRem)(14),
padding: (0, utils_1.toRem)(6) + " 0",
},
'&.up-menu ul li.active > a > .up-menu-item-title': {
color: props.theme.colorMap.primary,
},
'&.up-menu ul li.active > a > .up-icon-wrapper.colored *': {
color: props.theme.colorMap.primary + " !important",
fill: props.theme.colorMap.primary + " !important",
},
'&.up-menu ul li ul li > a > .up-menu-item-title': {
color: props.theme.colorMap.white,
},
'&.up-menu ul li ul li:hover > a > .up-menu-item-title': {
color: props.theme.colorMap.primary,
},
'&.up-menu nav > ul > li': {
position: 'relative',
overflow: 'hidden',
},
'&.up-menu nav > ul > li:hover': {
overflow: 'visible',
},
'&.up-menu nav > ul > li:hover > a': {
backgroundColor: '#424C4A',
borderTopLeftRadius: (0, utils_1.toRem)(24),
borderBottomLeftRadius: (0, utils_1.toRem)(24),
},
'&.up-menu nav .up-sub-menu li.hasChildren > a > .up-icon-wrapper': {
marginRight: (0, utils_1.toRem)(14),
},
'&.up-menu nav > ul > li a': {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
padding: (0, utils_1.toRem)(6) + " " + (0, utils_1.toRem)(12),
},
'&.up-menu nav > ul > li > ul > li a': {
padding: 0,
paddingLeft: (0, utils_1.toRem)(50) + " !important",
},
'&.up-menu nav > ul > li > ul > li > ul > li a': {
padding: 0,
paddingLeft: (0, utils_1.toRem)(70) + " !important",
},
'&.up-menu nav ul > li.active:not(.hasChildren) a': {
backgroundColor: 'white',
borderTopLeftRadius: (0, utils_1.toRem)(24),
borderBottomLeftRadius: (0, utils_1.toRem)(24),
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
padding: (0, utils_1.toRem)(6) + " " + (0, utils_1.toRem)(12),
},
'&.up-menu nav > ul > li.active.hasChildren > a': {
backgroundColor: props.minified ? 'white' : 'transparent',
borderTopLeftRadius: (0, utils_1.toRem)(24),
borderBottomLeftRadius: (0, utils_1.toRem)(24),
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
padding: (0, utils_1.toRem)(6) + " " + (0, utils_1.toRem)(12),
},
'&.up-menu nav > ul > li > a': {
width: '100%',
},
'&.up-menu nav > ul > li .up-sub-menu-title': {
display: 'none',
color: props.theme.colorMap.white,
fontSize: (0, utils_1.toRem)(14),
fontWeight: 500,
},
'&.up-menu nav > ul > li:not(:last-child)': {
marginBottom: (0, utils_1.toRem)(20),
},
'&.up-menu nav ul li > ul': {
display: 'none',
transform: 'scaleY(0)',
minWidth: (0, utils_1.toRem)(180),
},
'&.up-menu nav > ul li.active > ul': {
display: props.minified ? 'none' : 'inherit',
},
'&.up-menu nav > ul > li:hover ul': {
backgroundColor: '#4E5B59',
top: props.minified ? 0 : 'inherit',
left: props.minified ? (0, utils_1.toRem)(48) : 'inherit',
position: props.minified ? 'absolute' : 'inherit',
padding: (0, utils_1.toRem)(16) + " 0 " + (0, utils_1.toRem)(30) + " 0",
width: 'auto',
opacity: 1,
transform: 'scaleY(1)',
transformOrigin: '50% 0',
transition: 'transform 0.5s ease',
zIndex: 1000,
borderBottomRightRadius: props.theme.borderRadius,
borderTopRightRadius: props.theme.borderRadius,
},
'&.up-menu nav > ul > li.active:not(:hover) ul': {
padding: (0, utils_1.toRem)(16) + " 0 " + (0, utils_1.toRem)(30) + " 0",
width: 'auto',
opacity: 1,
transform: 'scaleY(1)',
transformOrigin: '50% 0',
transition: 'transform 0.5s ease',
},
'&.up-menu nav > ul ul ul:last-child': {
paddingBottom: '0 !important',
},
'&.up-menu nav > ul > li ul li:not(:last-child)': {
marginBottom: (0, utils_1.toRem)(10),
},
'&.up-menu .up-menu-actions': {
marginTop: (0, utils_1.toRem)(28),
marginBottom: (0, utils_1.toRem)(28),
paddingLeft: (0, utils_1.toRem)(12),
paddingRight: (0, utils_1.toRem)(12),
},
'&.up-menu .up-menu-toggle': {
cursor: 'pointer',
},
'&.up-menu .up-menu-toggle.colored svg, .up-menu .up-menu-toggle.colored svg path, .up-menu .up-menu-toggle.colored svg polygon, .up-menu .up-menu-toggle.colored svg polyline': {
fill: '#ffffff',
cursor: 'pointer',
},
'&.up-menu .up-menu-toggle.colored:hover svg, .up-menu .up-menu-toggle.colored:hover svg path, .up-menu .up-menu-toggle.colored:hover svg polygon, .up-menu .up-menu-toggle.colored:hover svg polyline': {
fill: props.theme.colorMap.primary,
},
'&.up-menu nav ul.up-sub-menu': {
paddingRight: '0 !important',
},
'&.up-menu nav ul.up-sub-menu > li > a.active': {
paddingRight: '0 !important',
paddingTop: (0, utils_1.toRem)(16) + " !important",
paddingBottom: (0, utils_1.toRem)(16) + " !important",
},
},
}, (0, typestyle_1.media)(device_1.DeviceLRTablets, {
$nest: {
'.skin-up.main-header.navbar.dropdown-menu li.divider': {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
},
'.skin-up.main-header.navbar.dropdown-menu li a': {
color: props.theme.colorMap.white,
},
'.skin-up.main-header.navbar.dropdown-menu li a: hover': {
background: 'rgb(0, 170, 212)',
},
},
}), (0, typestyle_1.media)(device_1.DeviceSmartphones, {
$nest: {
'&.up-menu': {
padding: 0,
width: '100%',
height: 60,
position: 'relative',
},
'&.up-menu .up-menu-header': {
flexDirection: 'row',
height: '100%',
padding: 5,
alignItems: 'center',
},
'&.up-menu .up-menu-actions': {
margin: '13px 5px',
},
'&.up-menu .up-menu-nav': {
backgroundColor: '#4E5B59',
width: '100%',
height: props.minified ? 0 : 'auto',
},
'&.up-menu nav > ul > li': {
maxWidth: '100%',
margin: 0,
marginTop: '10px !important',
},
'&.up-menu nav > ul > li.separator': {
margin: '10px 0 !important',
},
'&.up-menu nav > ul > li > a': {
width: '100%',
},
'&.up-menu nav > ul > li > ul': {
padding: '10px !important',
},
'&.up-menu nav > ul > li ul li:not(:last-child)': {
marginBottom: 10,
},
'&.up-menu .up-menu-footer': {
position: 'relative',
backgroundColor: '#4E5B59',
width: '100%',
bottom: 0,
display: props.minified ? 'none' : 'block',
padding: 6,
overflow: 'hidden',
},
},
}));
};
exports.MenuStyles = MenuStyles;
exports.heightTopBar = 60;
exports.widthLeftMenuStandard = 300;
exports.widthLeftMenuCollapse = 64;
exports.styleMenuOh = (0, typestyle_1.style)({
backgroundColor: '#f5f5f5',
overflow: 'hidden',
height: '100%',
width: '100%',
});
exports.styleLeftMenu = (0, typestyle_1.style)({
zIndex: 1,
position: 'absolute',
left: 0,
top: 0,
height: '100%',
width: exports.widthLeftMenuStandard,
backgroundColor: '#4e5b59',
alignItems: 'center',
transition: 'width 0.5s',
overflow: 'hidden',
$nest: {
'& i': {
cursor: 'pointer',
},
'& a': {
textDecoration: 'none',
},
},
});
exports.imgHomelink = (0, typestyle_1.style)({ display: 'inline' });
exports.styleLeftMenuCollapse = (0, typestyle_1.style)({
width: exports.widthLeftMenuCollapse,
$nest: (_a = {
'& a': {
display: 'none',
}
},
_a['& .' + exports.imgHomelink] = {
display: 'inline',
},
_a),
});
exports.rightSpace = (0, typestyle_1.style)({
position: 'absolute',
top: 0,
right: 0,
left: exports.widthLeftMenuStandard,
height: '100%',
transition: 'left 0.5s',
overflow: 'hidden',
});
exports.rightSpaceCollapse = (0, typestyle_1.style)({
left: exports.widthLeftMenuCollapse,
});
exports.styleTopbar = (0, typestyle_1.style)({
width: '100%',
left: 0,
top: 0,
position: 'absolute',
height: exports.heightTopBar,
backgroundColor: '#ffffff',
textAlign: 'right',
});
exports.styleContenu = (0, typestyle_1.style)({
position: 'absolute',
left: 0,
top: exports.heightTopBar,
bottom: 0,
right: 0,
overflow: 'hidden',
});
exports.styleUserExpand = (0, typestyle_1.style)({
position: 'absolute',
top: exports.heightTopBar,
right: (0, utils_1.toRem)(128),
overflow: 'visible',
});
//# sourceMappingURL=styles.js.map