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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 1x 1x 1x 1x 1x 17x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 1x 8x 1x 8x 8x | 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 = ALPHA.CONTRAST
export const DEFAULT_COLOR = COLORS.ACCENT
export const DEFAULT_ELEVATION = ELEVATION.NONE
export const DEFAULT_BORDER_RADIUS = BORDER_RADIUS.NONE
export const DEFAULT_VERTICAL_ALIGNMENT = VERTICAL_ALIGNMENTS.CENTER
export const DEFAULT_HORIZONTAL_ALIGNMENT = HORIZONTAL_ALIGNMENTS.CENTER
const BASE_CLASS = 'sui-atom-panel'
const COLOR_PANEL_CLASS = 'sui-atom-panel-color'
const IMAGE_PANEL_CLASS = `${BASE_CLASS}-image`
export const getColorClassNames = ({color, alpha, rounded, elevation, isFullWidth, isFullHeight, className}) =>
cx(
BASE_CLASS,
COLOR_PANEL_CLASS,
{
[`${BASE_CLASS}--rounded-${rounded}`]: ![BORDER_RADIUS.NONE, undefined].includes(rounded),
[`${COLOR_PANEL_CLASS}--${color}-${alpha}`]: color,
[`${BASE_CLASS}--elevation-${elevation}`]: elevation !== ELEVATION.NONE,
[`${BASE_CLASS}--fullWidth`]: isFullWidth,
[`${BASE_CLASS}--fullHeight`]: isFullHeight
},
className
)
export const getImageClassNames = ({
verticalAlign,
horizontalAlign,
resized,
overlayColor,
overlayAlpha = DEFAULT_ALPHA,
color,
rounded,
elevation,
isFullWidth,
isFullHeight,
className
}) =>
cx(
BASE_CLASS,
{
[`${BASE_CLASS}-color--${color}`]: color,
[`${BASE_CLASS}--${overlayColor}-overlay-${overlayAlpha}`]: overlayColor,
[`${BASE_CLASS}--elevation-${elevation}`]: elevation !== ELEVATION.NONE,
[`${BASE_CLASS}--rounded-${rounded}`]: rounded !== BORDER_RADIUS.NONE,
[`${BASE_CLASS}--fullWidth`]: isFullWidth,
[`${BASE_CLASS}--fullHeight`]: isFullHeight,
[`${IMAGE_PANEL_CLASS}--resized`]: resized,
[`${IMAGE_PANEL_CLASS}--vertical-${verticalAlign}`]: verticalAlign,
[`${IMAGE_PANEL_CLASS}--horizontal-${horizontalAlign}`]: horizontalAlign
},
className
)
export const getImageStyles = function ({src, styles = {}} = {}) {
const url = `url(${src})`
return {
backgroundImage: url,
...styles
}
}
|