legion-phoenix-dates
Version:
Legion UI date component
470 lines (469 loc) • 19.3 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_2 = require("@emotion/react");
exports["default"] = (function () { return (react_1["default"].createElement(react_2.Global, { styles: function (theme) {
return {
'.legion-picker': {
display: 'inline-flex',
fontFamily: theme.tokens.typographyBody,
width: '100%'
},
'.legion-picker-rtl': {
direction: 'rtl'
},
'.legion-picker-focused': {
border: '0'
},
'.legion-picker-panel': {
display: 'inline-block',
verticalAlign: 'top'
},
'.legion-picker-panel-focused': {
borderColor: 'blue'
},
'.legion-picker-panel-rtl': {
direction: 'rtl'
},
'.legion-picker-decade-panel, .legion-picker-year-panel, .legion-picker-month-panel, .legion-picker-week-panel, .legion-picker-date-panel, .legion-picker-time-panel': {
display: 'flex',
flexDirection: 'column'
},
'.legion-picker-decade-panel table, .legion-picker-year-panel table, .legion-picker-month-panel table, .legion-picker-week-panel table, .legion-picker-date-panel table, .legion-picker-time-panel table': {
textAlign: 'center',
borderCollapse: 'collapse'
},
'.legion-picker-header': {
display: 'flex',
padding: '1rem',
borderBottom: "1px solid ".concat(theme.tokens.tertiary300),
background: '#fff'
},
'.legion-picker-header button': {
border: '0',
background: 'transparent',
padding: '4px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center'
},
'.legion-picker-header > *': {
flex: 'none'
},
'.legion-picker-header-view': {
flex: 'auto',
textAlign: 'center',
display: 'flex',
justifyContent: 'center',
lineHeight: '27px',
'& button': {
fontWeight: 'bold',
fontFamily: theme.tokens.typographyBody,
fontSize: '14px'
}
},
'.legion-picker-header-view > button': {
border: '0',
background: 'transparent',
padding: '4px',
cursor: 'pointer'
},
'.legion-picker-cell': {
color: '#aaa',
padding: '2px 0',
position: 'relative'
},
'.legion-picker-cell::before': {
content: '""',
position: 'absolute',
top: '2px',
left: '0',
width: '40px',
height: '40px'
},
'.legion-picker-cell-in-range::before,.legion-picker-cell-range-start:not(.legion-picker-cell-range-start-single)::before, .legion-picker-cell-range-end:not(.legion-picker-cell-range-end-single)::before': {
background: theme.tokens.primary200
},
'.legion-picker-cell-range-start::before': {
width: '50%',
left: '50%'
},
'.legion-picker-cell-range-end::before': {
right: '50%',
width: '50%'
},
'.legion-picker-cell-disabled': {
opacity: '0.2'
},
'.legion-picker-cell-inner': {
display: 'inline-block',
boxSizing: 'border-box',
width: '100%',
height: '40px',
margin: '0',
padding: '0',
fontSize: '12px',
lineHeight: '40px',
background: 'transparent',
border: '0',
outline: 'none',
cursor: 'pointer',
transition: 'background 0.3s, border 0.3s',
position: 'relative'
},
'.legion-picker-cell-inner:hover': {
background: theme.tokens.primary200
},
'.legion-picker-cell-in-view': {
color: '#333'
},
'.legion-picker-cell-in-range::before': {
background: theme.tokens.primary200
},
'.legion-picker-cell-in-range > .legion-picker-cell-inner': {
background: theme.tokens.primary200
},
'.legion-picker-cell-range-hover-start, .legion-picker-cell-range-hover-end, .legion-picker-cell-range-hover': {
position: 'relative'
},
'.legion-picker-cell-range-hover-start::after,.legion-picker-cell-range-hover-end::after,.legion-picker-cell-range-hover::after': {
position: 'absolute',
top: '1px',
right: '0',
bottom: '1px',
left: '0',
border: "1px dashed ".concat(theme.tokens.primary700),
borderRight: '0',
borderLeft: '0',
content: '""',
pointerEvents: 'none'
},
'.legion-picker-cell-range-hover-start::after': {
borderLeft: "1px dashed ".concat(theme.tokens.primary700),
borderTopLeftRadius: '50%',
borderBottomLeftRadius: '50%'
},
'.legion-picker-cell-range-hover-end::after': {
borderRight: "1px dashed ".concat(theme.tokens.primary700),
borderTopRightRadius: '50%',
borderBottomRightRadius: '50%'
},
'.legion-picker-cell-today > .legion-picker-cell-inner': {
border: "1px solid ".concat(theme.tokens.primary700)
},
'.legion-picker-cell-range-start > .legion-picker-cell-inner,.legion-picker-cell-range-end > .legion-picker-cell-inner, .legion-picker-cell-selected > .legion-picker-cell-inner': {
background: theme.tokens.primary500,
color: '#ffffff'
},
'.legion-picker-time-panel-cell-selected > .legion-picker-time-panel-cell-inner': {
background: theme.tokens.primary500,
color: '#ffffff !important',
fontWeight: 700
},
'.legion-picker-presets': {
background: '#fff',
borderRight: "1px solid ".concat(theme.tokens.tertiary300),
paddingTop: '6px'
},
'.legion-picker-presets ul': {
margin: '0',
padding: '0',
listStyle: 'none'
},
'.legion-picker-presets li': {
cursor: 'pointer',
padding: '6px 12px'
},
'.legion-picker-footer': {
borderTop: "1px solid ".concat(theme.tokens.tertiary300),
background: theme.tokens.basewhite,
padding: '1rem',
color: theme.tokens.primary500
},
'.legion-picker-ranges': {
margin: '0',
padding: '0',
overflow: 'hidden',
listStyle: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between'
},
'.legion-picker-now-btn': {
background: theme.tokens.primary50,
borderRadius: "".concat(theme.tokens.radius5, "px"),
color: theme.tokens.primary500,
cursor: 'pointer',
fontSize: '14px',
padding: "".concat(theme.tokens.spacing3, " ").concat(theme.tokens.spacing5)
},
'.legion-picker-ranges button': {
background: theme.tokens.primary500,
border: '0',
borderRadius: "".concat(theme.tokens.radius5, "px"),
color: theme.tokens.basewhite,
cursor: 'pointer',
fontSize: '14px',
padding: "".concat(theme.tokens.spacing3, " ").concat(theme.tokens.spacing5)
},
'.legion-picker-ranges > li': {
display: 'inlineBlock'
},
'.legion-picker-ok': {
float: 'right'
},
'.legion-picker-year-panel .legion-picker-cell-inner,.legion-picker-month-panel .legion-picker-cell-inner': {
width: '80px'
},
'.legion-picker-week-panel-row:hover .legion-picker-cell': {
background: theme.tokens.primary500,
color: '#ffffff'
},
'.legion-picker-week-panel-row-selected .legion-picker-cell': {
background: 'rgba(0, 0, 255, 0.3)'
},
'.legion-picker-week-panel-row-range-hover .legion-picker-cell': {
background: 'rgba(0, 255, 0, 0.1)'
},
'.legion-picker-week-panel-row-range-start .legion-picker-cell,.legion-picker-week-panel-row-range-end .legion-picker-cell': {
background: 'rgba(0, 255, 0, 0.3)'
},
'.legion-picker-week-panel .legion-picker-cell,.legion-picker-week-panel .legion-picker-cell-inner': {
width: '40px'
},
'.legion-picker-week-panel .legion-picker-cell-week': {
color: '#999',
fontWeight: 'bold',
fontSize: '12px'
},
'.legion-picker-week-panel .legion-picker-cell:hover > .legion-picker-cell-inner,.legion-picker-week-panel .legion-picker-cell-selected > .legion-picker-cell-inner': {
background: 'transparent'
},
'.legion-picker-date-panel .legion-picker-cell-inner': {
width: '40px',
borderRadius: '50%'
},
'.legion-picker-time-panel': {
width: 'auto',
padding: '0'
},
'.legion-picker-content': {
margin: '1rem',
'& > thead > tr > th ': {
paddingBottom: '.75rem'
}
},
'.legion-picker-range-wrapper .legion-picker-time-panel .legion-picker-content': {
maxHeight: '312px'
},
'.legion-picker-time-panel .legion-picker-content': {
display: 'flex',
maxHeight: '200px',
paddingTop: theme.tokens.spacing4,
margin: '0'
},
'.legion-picker-time-panel-column': {
flex: 'none',
margin: '0',
padding: '0 20px',
overflowX: 'hidden',
overflowY: 'hidden',
fontSize: '12px',
textAlign: 'left',
listStyle: 'none',
transition: 'background 0.3s',
// Firefox scroll bar
scrollbarWidth: 'none',
'&:first-of-type': {
borderRight: "1px solid ".concat(theme.tokens.tertiary200)
},
'&:last-child': {
borderLeft: "1px solid ".concat(theme.tokens.tertiary200)
}
},
'.legion-picker-time-panel-column-active': {
background: 'rgba(0, 0, 255, 0.1)'
},
'.legion-picker-time-panel-column:hover': {
overflowY: 'auto'
},
'.legion-picker-time-panel-column > li': {
margin: '0',
padding: '0',
cursor: 'pointer'
},
'.legion-picker-time-panel-column > li.legion-picker-time-panel-cell-disabled': {
opacity: '0.5'
},
'.legion-picker-time-panel-column > li .legion-picker-time-panel-cell-inner': {
display: 'grid',
width: '45px',
height: '45px',
margin: '0',
// padding: '0 0 0 12px',
color: theme.tokens.tertiary600,
lineHeight: '20px',
textAlign: 'left',
placeItems: 'center',
borderRadius: '50%',
fontSize: '14px'
},
'.legion-picker-panel-rtl .legion-picker-time-panel-column > li .legion-picker-time-panel-cell-inner': {
padding: '0 12px 0 0',
textAlign: 'right'
},
'.legion-picker-datetime-panel': {
display: 'flex'
},
'.legion-picker-datetime-panel .legion-picker-time-panel': {
borderLeft: '1px solid #999'
},
'.legion-picker-date-panel': {
padding: '0'
},
'.legion-picker-datetime-panel .legion-picker-date-panel,.legion-picker-datetime-panel .legion-picker-time-panel': {
transition: 'opacity 0.3s'
},
'.legion-picker-datetime-panel-active .legion-picker-date-panel,.legion-picker-datetime-panel-active .legion-picker-time-panel': {
opacity: '0.3'
},
'.legion-picker-datetime-panel-active .legion-picker-date-panel-active, .legion-picker-datetime-panel-active .legion-picker-time-panel-active': {
opacity: '1'
},
'.legion-picker-input': {
position: 'relative',
display: 'inline-flex',
width: '100%'
},
'.legion-picker-rtl .legion-picker-input': {
textAlign: 'right'
},
'.legion-picker-input > input': {
width: '100%'
},
'.legion-picker-input > input::-moz-placeholder': {
opacity: '1'
},
'.legion-picker-input > input::placeholder': {
color: '#bfbfbf'
},
'.legion-picker-input > input:placeholder-shown': {
textOverflow: 'ellipsis'
},
'.legion-picker-input-placeholder > input': {
color: '#bfbfbf'
},
'.legion-picker-clear': {
position: 'absolute',
top: '0',
right: '4px',
cursor: 'pointer'
},
'.legion-picker-rtl .legion-picker-clear': {
right: 'auto',
left: '4px'
},
'.legion-picker-clear-btn::after': {
content: '"×"'
},
'.legion-picker-dropdown': {
position: 'absolute',
zIndex: '100'
},
'.legion-picker-dropdown-range': {
padding: '6px 0'
},
'.legion-picker-dropdown-hidden': {
display: 'none'
},
'.legion-picker-dropdown-placement-topLeft .legion-picker-range-arrow,.legion-picker-dropdown-placement-topRight .legion-picker-range-arrow': {
bottom: '6px',
transform: 'rotate(135deg)'
},
'.legion-picker-dropdown-placement-bottomLeft .legion-picker-range-arrow,.legion-picker-dropdown-placement-bottomright .legion-picker-range-arrow': {
top: '1px',
transform: 'rotate(-45deg)'
},
'.legion-picker-dropdown .legion-picker-range-arrow': {
position: 'absolute',
left: '10px',
zIndex: '1',
width: '10px',
height: '10px',
marginLeft: '10px',
transition: 'all 0.3s',
display: 'none'
},
'.legion-picker-dropdown-rtl.legion-picker-dropdown .legion-picker-range-arrow': {
right: '10px',
left: 'auto',
marginRight: '10px',
marginLeft: '0'
},
'.legion-picker-dropdown .legion-picker-range-arrow::before,.legion-picker-dropdown .legion-picker-range-arrow::after': {
position: 'absolute',
top: '50%',
left: '50%',
boxSizing: 'border-box',
transform: 'translate(-50%, -50%)',
content: '""'
},
'.legion-picker-dropdown-rtl.legion-picker-dropdown .legion-picker-range-arrow::before,.legion-picker-dropdown-rtl.legion-picker-dropdown .legion-picker-range-arrow::after': {
right: '50%',
left: 'auto',
transform: 'translate(50%, -50%)'
},
'.legion-picker-dropdown .legion-picker-range-arrow::before': {
width: '10px',
height: '10px',
border: "5px solid ".concat(theme.tokens.primary500),
borderColor: "".concat(theme.tokens.primary500, " ").concat(theme.tokens.primary500, " transparent transparent")
},
'.legion-picker-dropdown .legion-picker-range-arrow::after': {
width: '8px',
height: '8px',
border: "4px solid ".concat(theme.tokens.primary500),
borderColor: "".concat(theme.tokens.primary500, " ").concat(theme.tokens.primary500, " transparent transparent")
},
'.legion-picker-range': {
position: 'relative',
display: 'flex'
},
'.legion-picker-range-separator': {
display: 'inline-flex',
alignItems: 'center'
},
'.legion-picker-range-wrapper': {
display: 'flex'
},
'.legion-picker-range .legion-picker-active-bar': {
bottom: '0',
height: '1px',
background: theme.tokens.primary500,
opacity: '0',
transition: 'all 0.3s',
pointerEvents: 'none'
},
'.legion-picker-range.legion-picker-focused .legion-picker-active-bar': {
opacity: '1'
},
'.legion-picker-panel-container': {
display: 'inline-block',
verticalAlign: 'top',
transition: 'margin 0.3s',
zIndex: 9,
position: 'relative',
paddingTop: theme.tokens.spacing3
},
'.legion-picker-panel-layout': {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'stretch',
boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2)',
borderRadius: '12px',
overflow: 'hidden',
background: theme.tokens.tertiary50
}
};
} })); });