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 71 72 73 | 1x 1x 1x 1x 1x 13x 1x 1x 1x 1x 1x 6x 6x 6x | import cx from 'classnames'
export const COLORS = {
CANVAS: 'canvas',
ACCENT: 'accent',
BASE: 'base',
DARK: 'dark',
CONTRAST: 'contrast',
CORPORATE: 'corporate',
DEFAULT: 'default',
HIGHLIGHT: 'highlight',
SUCCESS: 'success',
ALERT: 'alert',
ERROR: 'error'
}
export const ALPHA = {
CONTRAST: '100',
OVERLAY_D4: '75',
OVERLAY_D3: '50',
OVERLAY_D2: '25',
OVERLAY_D1: '15'
}
export const BORDER_RADIUS = {
NONE: 'none',
M: 'm',
L: 'l',
XL: 'xl',
XXL: 'xxl',
GIANT: 'giant'
}
export const ELEVATION = {
NONE: 'none',
S: 's',
M: 'm',
L: 'l'
}
export const isImagePanel = function ({src}) {
return !!src
}
export const HORIZONTAL_ALIGNMENTS = {
LEFT: 'left',
CENTER: 'center',
RIGHT: 'right'
}
export const VERTICAL_ALIGNMENTS = {
TOP: 'top',
CENTER: 'center',
BOTTOM: 'bottom'
}
export const DEFAULT_ALPHA = 'CONTRAST'
export const DEFAULT_COLOR = 'ACCENT'
export const getClassNames = function ({color, alpha, rounded, elevation, isFullWidth, isFullHeight}) {
const BASE_CLASS = 'sui-atom-panel'
const COLOR_PANEL_CLASS = 'sui-atom-panel-color'
return cx(
BASE_CLASS,
rounded !== BORDER_RADIUS.NONE && `${BASE_CLASS}--rounded-${rounded}`,
COLOR_PANEL_CLASS,
color && `${COLOR_PANEL_CLASS}--${color}-${alpha}`,
elevation !== ELEVATION.NONE && `${BASE_CLASS}--elevation-${elevation}`,
isFullWidth && `${BASE_CLASS}--fullWidth`,
isFullHeight && `${BASE_CLASS}--fullHeight`
)
}
|