@unofficialmc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
362 lines • 15.1 kB
JavaScript
"use strict";
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
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 colorMap_1 = require("../../../Common/theming/colorMap");
exports.getMenuCustomStyle = function (key, customStyles, props, state) {
return types_1.getCustomStyles(key, customStyles, props, state);
};
exports.MenuStyles = function (props) {
var defaultMenuStyles = {
width: props.minified ? utils_1.toRem(76) : utils_1.toRem(props.width),
minWidth: utils_1.toRem(76),
zIndex: 1000,
position: 'relative',
height: '100vh',
backgroundColor: '#F3F3F7',
transition: 'width 0.5s',
};
var defaultFooterStyles = {
position: 'absolute',
bottom: utils_1.toRem(8),
width: 'calc(100% - 28px)',
};
var defaultHeaderStyles = {
display: 'flex',
flexDirection: props.minified ? 'column' : 'row',
justifyContent: 'space-between',
alignItems: props.minified ? 'flex-start' : 'center',
height: '137px',
backgroundColor: props.theme.colorMap.primary,
color: '#FFFFFF',
fontFamily: 'Poppins',
fontSize: '18px',
fontWeight: 600,
letterSpacing: 0,
lineHeight: '27px',
padding: utils_1.toRem(14),
paddingLeft: props.minified ? utils_1.toRem(14) : '45px'
};
var defaultNavStyles = {
overflowY: 'auto',
height: '79vh',
fontFamily: 'Poppins',
padding: utils_1.toRem(14),
};
var defaultContentStyles = {};
if (props.customStyles) {
defaultMenuStyles = tslib_1.__assign(tslib_1.__assign({}, defaultMenuStyles), exports.getMenuCustomStyle('menu', props.customStyles, props));
defaultHeaderStyles = tslib_1.__assign(tslib_1.__assign({}, defaultHeaderStyles), exports.getMenuCustomStyle('header', props.customStyles, props));
defaultFooterStyles = tslib_1.__assign(tslib_1.__assign({}, defaultFooterStyles), exports.getMenuCustomStyle('footer', props.customStyles, props));
defaultNavStyles = tslib_1.__assign(tslib_1.__assign({}, defaultNavStyles), exports.getMenuCustomStyle('nav', props.customStyles, props));
defaultContentStyles = tslib_1.__assign(tslib_1.__assign({}, defaultContentStyles), exports.getMenuCustomStyle('content', props.customStyles, props));
}
return 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: props.theme.colorMap.primary,
textDecoration: 'none',
},
'&.up-menu ul, &.up-menu ul li': {
margin: 0,
padding: 0,
listStyle: 'none',
},
'&.up-menu nav > ul li.separator': {
margin: 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.primary,
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: colorMap_1.colors.pink,
},
'&.up-menu ul li .up-icon-wrapper.colored:not(:first-of-type)': {
'-webkit-transition-property': 'transform',
'-webkit-transition-duration': '.3s',
transitionProperty: 'transform',
transitionDuration: '.3s',
display: props.minified ? 'none' : 'initial',
},
'&.up-menu ul li:hover .up-icon-wrapper.colored:not(:first-of-type)': {
transform: 'rotate(90deg)',
},
'&.up-menu ul li.active .up-icon-wrapper.colored:not(:first-of-type)': {
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: colorMap_1.colors.pink,
},
'&.up-menu nav > ul > li .up-menu-item-title': {
display: props.minified ? 'none' : 'inherit',
fontSize: utils_1.toRem(14),
fontWeight: 500,
textAlign: 'left',
marginLeft: utils_1.toRem(14),
},
'&.up-menu ul li.active ul.up-sub-menu li:not(.active):not(:hover) .up-menu-item-title': {
color: props.theme.colorMap.primary
},
'&.up-menu ul li:hover .up-menu-item-title, .up-menu ul li.active .up-menu-item-title, .up-menu ul li.active ul.up-sub-menu li:hover .up-menu-item-title, .up-menu ul li.active ul.up-sub-menu li.active .up-menu-item-title, .up-menu ul li.active ul.up-sub-menu li.active .up-menu-item-title, .up-menu ul li.active ul.up-sub-menu li.active .up-menu-item-title': {
color: colorMap_1.colors.pink
},
'&.up-menu nav > ul > li': {
position: 'relative',
maxWidth: props.width - 28,
overflow: 'hidden',
},
'&.up-menu nav > ul > li:hover': {
overflow: 'visible',
},
'&.up-menu nav > ul > li a': {
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
padding: utils_1.toRem(12),
},
'&.up-menu nav > ul > li > ul > li a': {
padding: 0,
paddingLeft: utils_1.toRem(12),
width: utils_1.toRem(213),
},
'&.up-menu nav > ul > li > a': {
width: props.minified ? 48 : props.width - 28,
},
'&.up-menu nav > ul > li:first-child': {
marginTop: 0
},
'&.up-menu nav > ul > li .up-sub-menu-title': {
display: 'none',
color: '#FFF',
fontSize: utils_1.toRem(14),
fontWeight: 500,
},
'&.up-menu nav > ul > li:hover .up-sub-menu-title': {
display: props.minified ? 'inline-block' : 'none',
marginBottom: utils_1.toRem(20),
},
'&.up-menu nav > ul > li:not(:last-child)': {
marginBottom: utils_1.toRem(6),
},
'&.up-menu nav > ul > li > ul': {
display: 'none',
transform: 'scaleY(0)',
minWidth: utils_1.toRem(180),
},
'&.up-menu nav > ul > li > ul > li': {
display: 'block',
},
'&.up-menu nav > ul li.active > ul': {
display: props.minified ? 'block' : 'inherit',
},
'&.up-menu nav > ul > li:hover .up-menu-item-title': {
zIndex: 1001,
display: props.minified ? 'none' : 'inline-block',
},
'&.up-menu nav > ul > li:hover ul li .up-menu-item-title': {
display: 'inline-block',
},
'&.up-menu nav > ul > li:hover > ul': {
display: props.minified ? 'block' : 'none',
backgroundColor: '#F3F3F7',
top: props.minified ? 0 : 'inherit',
left: props.minified ? utils_1.toRem(48) : 'inherit',
position: props.minified ? 'absolute' : 'inherit',
padding: utils_1.toRem(16) + " " + utils_1.toRem(5) + " " + utils_1.toRem(30) + " " + utils_1.toRem(35),
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': {
display: props.minified ? 'none' : 'block',
padding: utils_1.toRem(16) + " " + utils_1.toRem(5) + " " + utils_1.toRem(30) + " " + utils_1.toRem(35),
width: 'auto',
opacity: 1,
transform: 'scaleY(1)',
transformOrigin: '50% 0',
transition: 'transform 0.5s ease',
},
'&.up-menu nav > ul > li.active:hover > ul': {
display: 'block',
},
'&.up-menu nav > ul > li > ul.active:hover': {
display: 'block',
},
'&.up-menu nav > ul > li ul li:not(:last-child)': {
marginBottom: utils_1.toRem(25),
},
'&.up-menu .up-menu-actions': {
minHeight: utils_1.toRem(23),
margin: props.minified ? utils_1.toRem(30) + " " + utils_1.toRem(15) : 0,
},
'&.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: props.theme.colorMap.white,
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.white,
},
},
}, 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: '#fff',
},
'.skin-up.main-header.navbar.dropdown-menu li a: hover': {
background: 'rgb(0, 170, 212)',
},
},
}), 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: 'flex-start',
},
'&.up-menu .up-menu-actions': {
margin: '13px 5px',
},
'&.up-menu .up-menu-nav': {
backgroundColor: '#F3F3F7',
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: '#F3F3F7',
width: '100%',
bottom: 0,
display: props.minified ? 'none' : 'block',
padding: 6,
overflow: 'hidden',
},
},
}));
};
exports.heightTopBar = 60;
exports.widthLeftMenuStandard = 300;
exports.widthLeftMenuCollapse = 64;
exports.styleMenuOh = typestyle_1.style({
backgroundColor: '#f5f5f5',
overflow: 'hidden',
height: '100%',
width: '100%',
});
exports.styleLeftMenu = 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 = typestyle_1.style({ display: 'inline' });
exports.styleLeftMenuCollapse = typestyle_1.style({
width: exports.widthLeftMenuCollapse,
$nest: (_a = {
'& a': {
display: 'none',
}
},
_a['& .' + exports.imgHomelink] = {
display: 'inline',
},
_a),
});
exports.rightSpace = typestyle_1.style({
position: 'absolute',
top: 0,
right: 0,
left: exports.widthLeftMenuStandard,
height: '100%',
transition: 'left 0.5s',
overflow: 'hidden',
});
exports.rightSpaceCollapse = typestyle_1.style({
left: exports.widthLeftMenuCollapse,
});
exports.styleTopbar = typestyle_1.style({
width: '100%',
left: 0,
top: 0,
position: 'absolute',
height: exports.heightTopBar,
backgroundColor: '#ffffff',
textAlign: 'right',
});
exports.styleContenu = typestyle_1.style({
position: 'absolute',
left: 0,
top: exports.heightTopBar,
bottom: 0,
right: 0,
overflow: 'hidden',
});
exports.styleUserExpand = typestyle_1.style({
position: 'absolute',
top: exports.heightTopBar,
right: utils_1.toRem(128),
overflow: 'visible',
});
//# sourceMappingURL=styles.js.map