Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 8x | import { css } from 'styled-components'; import { system, variant } from 'styled-system'; export const menuStyledHelper = props => css` .DayPickerInput-OverlayWrapper { pointer-events: none; .DayPickerInput-Overlay { ${variant({ prop: 'menuPlacement', variants: { bottom: {}, top: { transform: `translateX(0) translateY(calc(-100% - ${props.controlHeight}))`, }, }, })} } ${variant({ prop: 'menuAlignment', variants: { left: { left: '1rem', right: 'auto', }, right: { left: 'auto', right: '-1rem', }, }, })} ${system({ menuOverlayBottom: { property: 'bottom' }, menuOverlayLeft: { property: 'left' }, menuOverlayRight: { property: 'right' }, menuOverlayTop: { property: 'top' }, })} .DayPickerInput-Overlay { justify-content: flex-end; width: 100%; ${variant({ prop: 'menuAlignment', variants: { left: { display: 'block', }, right: { display: 'flex', }, }, })} } } .DayPicker-Months { flex-wrap: nowrap; ${variant({ prop: 'menuDirection', variants: { column: { flexDirection: 'column', }, row: { flexDirection: 'row', minWidth: 625, }, }, })} } `; |