30:[] 2e:{"title":"Stacks","cells":[{"id":0,"value":"md`# Stacks\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`## Stack properties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"viewof selectedGap = Select([\"none\"].concat(gapSizes), {\n label: \"Gap sizes\",\n default: \"large\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"viewof selectedHorizontalAlignment = Select(horizontalAlignment, {label:\"Horizontal alignment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"viewof selectedVerticalAlignment = Select(verticalAlignment, {label:\"Vertical alignment\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"md`## Vertical stack\nIt appends class with styles that stacks children in vertical direction.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"html`

${[...new Array(3)].map((c,i) => box({text:i,width:i % 2 === 0 ? 20 : 60, height:20}))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`## Horizontal stack\nIt appends class with styles that stacks children in horizontal direction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"md`#### Horizonta wrappable stack-\nIt appends class with styles that stacks children in horizontal direction until there is enough space for children, then it wraps to a new row.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"html`

${[...new Array(26)].map((c,i) => box({text:i,height:i % 2 === 0 ?20:60, width:20}))}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"html`

${[...new Array(50)].map((c,i) => box({text:i,height:i % 2 === 0 ?20:60, width:20}))}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"## Layers stack","pinned":false,"hidden":false,"mode":"md"},{"id":1800,"value":"html`

${[...new Array(5)].map((c,i, a) => box({text:i,textAlign:'right',width:(a.length - i) * 30, height:(a.length - i) * 30, opacity: 0.3 + (1 - 0.3)/(a.length) * i}))}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"box = ({text,width,height,opacity=1, textAlign='center'}) => html.fragment`

${text}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`### Stack properties`","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"gapSizes = ['large','medium','small','x-small','xx-small','xxx-small']","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"verticalAlignment = ['top','center','bottom']","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"horizontalAlignment = ['left','center','right']","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"md`### Stack components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"horizontalStack = (params) => {\n const horizontalGap = convertGap(params?.horizontalGap ?? params?.gap);\n const verticalGap = convertGap(params?.verticalGap ?? params?.gap);\n return css`\n display:flex;\n flex-direction:row;\n min-width:0;\n flex-wrap: ${params.wrap ? \"wrap\" : \"nowrap\"};\n gap:${convertGap(params?.gap)}px;\n ${rowAlign(params ?? {})}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"verticalStack = (params) => css`\ndisplay:flex;\nflex-wrap: nowrap;\nflex-direction:column;\ngap:${convertGap(params?.gap)}px;\n${columnAlign(params ?? {})}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1778,"value":"layersStack = (params) => css`\ndisplay:grid;\n${` \n > * {\n grid-row: 1;\n grid-column: 1;\n }`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"md`### Style utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"rowAlign = ({align, alignItems}) => {\n const styles = {\n ...(align === 'center' && {'justify-content':'center'}),\n ...(align === 'right' && {'justify-content':'flex-end'}),\n ...(alignItems === 'top' && {'align-items':'flex-start'}),\n ...(alignItems === 'center' && {'align-items':'center'}),\n ...(alignItems === 'bottom' && {'align-items':'flex-end'})\n }\n return convertStyles(styles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"columnAlign = ({align, alignItems}) => {\n const styles = {\n ...(align === 'center' && {'justify-content':'center'}),\n ...(align === 'bottom' && {'justify-content':'flex-end'}),\n ...(alignItems === 'left' && {'align-items':'flex-start'}),\n ...(alignItems === 'center' && {'align-items':'center'}),\n ...(alignItems === 'right' && {'align-items':'flex-end'})\n }\n return convertStyles(styles)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"convertStyles = (styles) => Object.keys(styles).map(key => `${key}: ${styles[key]};`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"convertGap = value => {\n if (value === undefined) return 0;\n return value != null && !isNaN(Number(value)) ? value : sizes[value] ?? 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"sizes = ({\n large: 40,\n medium:20,\n small: 10,\n 'x-small': 5,\n 'xx-small': 3,\n 'xxx-small': 1,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"css = emotionCssCreateInstance({ key: \"stacks\" }).css","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"css`color:red`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"md`### External components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"emotionCssCreateInstance = require('@emotion/css@11.0.0/create-instance/dist/emotion-css-create-instance.umd.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"import {Select} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":959,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}