351 lines
8.4 KiB
JavaScript
351 lines
8.4 KiB
JavaScript
import{M as f}from"./chunk-S4VUQJ4A-9f830f12.js";import{p as l,j as n}from"./jsx-runtime-cc7d3d6f.js";import{C as e}from"./Table-531e15c2.js";import{c as t}from"./parseCss-0603dd28.js";import{u as a}from"./index-e0c548e1.js";import"./iframe-da7e4a3d.js";import"../sb-preview/runtime.js";import"./index-3006e466.js";import"./_commonjsHelpers-de833af9.js";import"./index-d37d4223.js";import"./index-e04ae519.js";import"./index-356e4a49.js";import"./index-f779c4fe.js";import"./toString-25ea340b.js";import"./isSymbol-50749e90.js";const c=`.content-normal {
|
|
align-content: normal;
|
|
}
|
|
.content-center {
|
|
align-content: center;
|
|
}
|
|
.content-start {
|
|
align-content: flex-start;
|
|
}
|
|
.content-end {
|
|
align-content: flex-end;
|
|
}
|
|
.content-between {
|
|
align-content: space-between;
|
|
}
|
|
.content-around {
|
|
align-content: space-around;
|
|
}
|
|
.content-evenly {
|
|
align-content: space-evenly;
|
|
}
|
|
.content-baseline {
|
|
align-content: baseline;
|
|
}
|
|
.content-stretch {
|
|
align-content: stretch;
|
|
}
|
|
.\\!content-normal {
|
|
align-content: normal !important;
|
|
}
|
|
.\\!content-center {
|
|
align-content: center !important;
|
|
}
|
|
.\\!content-start {
|
|
align-content: flex-start !important;
|
|
}
|
|
.\\!content-end {
|
|
align-content: flex-end !important;
|
|
}
|
|
.\\!content-between {
|
|
align-content: space-between !important;
|
|
}
|
|
.\\!content-around {
|
|
align-content: space-around !important;
|
|
}
|
|
.\\!content-evenly {
|
|
align-content: space-evenly !important;
|
|
}
|
|
.\\!content-baseline {
|
|
align-content: baseline !important;
|
|
}
|
|
.\\!content-stretch {
|
|
align-content: stretch !important;
|
|
}
|
|
`,m=`.items-start {
|
|
align-items: flex-start;
|
|
}
|
|
.items-end {
|
|
align-items: flex-end;
|
|
}
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
.items-baseline {
|
|
align-items: baseline;
|
|
}
|
|
.items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
.\\!items-start {
|
|
align-items: flex-start !important;
|
|
}
|
|
.\\!items-end {
|
|
align-items: flex-end !important;
|
|
}
|
|
.\\!items-center {
|
|
align-items: center !important;
|
|
}
|
|
.\\!items-baseline {
|
|
align-items: baseline !important;
|
|
}
|
|
.\\!items-stretch {
|
|
align-items: stretch !important;
|
|
}
|
|
`,p=`.self-auto {
|
|
align-self: auto;
|
|
}
|
|
.self-start {
|
|
align-self: flex-start;
|
|
}
|
|
.self-end {
|
|
align-self: flex-end;
|
|
}
|
|
.self-center {
|
|
align-self: center;
|
|
}
|
|
.self-stretch {
|
|
align-self: stretch;
|
|
}
|
|
.self-baseline {
|
|
align-self: baseline;
|
|
}
|
|
.\\!self-auto {
|
|
align-self: auto !important;
|
|
}
|
|
.\\!self-start {
|
|
align-self: flex-start !important;
|
|
}
|
|
.\\!self-end {
|
|
align-self: flex-end !important;
|
|
}
|
|
.\\!self-center {
|
|
align-self: center !important;
|
|
}
|
|
.\\!self-stretch {
|
|
align-self: stretch !important;
|
|
}
|
|
.\\!self-baseline {
|
|
align-self: baseline !important;
|
|
}
|
|
`,u=`.flex-row {
|
|
flex-direction: row;
|
|
}
|
|
.flex-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.flex-col {
|
|
flex-direction: column;
|
|
}
|
|
.flex-col-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
.\\!flex-row {
|
|
flex-direction: row !important;
|
|
}
|
|
.\\!flex-row-reverse {
|
|
flex-direction: row-reverse !important;
|
|
}
|
|
.\\!flex-col {
|
|
flex-direction: column !important;
|
|
}
|
|
.\\!flex-col-reverse {
|
|
flex-direction: column-reverse !important;
|
|
}
|
|
`,x=`.grow {
|
|
flex-grow: 1;
|
|
}
|
|
.grow-0 {
|
|
flex-grow: 0;
|
|
}
|
|
.\\!grow {
|
|
flex-grow: 1 !important;
|
|
}
|
|
.\\!grow-0 {
|
|
flex-grow: 0 !important;
|
|
}
|
|
`,y=`.shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
.shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
.\\!shrink {
|
|
flex-shrink: 1 !important;
|
|
}
|
|
.\\!shrink-0 {
|
|
flex-shrink: 0 !important;
|
|
}
|
|
`,d=`.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
.flex-wrap-reverse {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
.flex-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
.\\!flex-wrap {
|
|
flex-wrap: wrap !important;
|
|
}
|
|
.\\!flex-wrap-reverse {
|
|
flex-wrap: wrap-reverse !important;
|
|
}
|
|
.\\!flex-nowrap {
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
`,j=`.flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
.flex-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
.flex-initial {
|
|
flex: 0 1 auto;
|
|
}
|
|
.flex-none {
|
|
flex: none;
|
|
}
|
|
.\\!flex-1 {
|
|
flex: 1 1 0% !important;
|
|
}
|
|
.\\!flex-auto {
|
|
flex: 1 1 auto !important;
|
|
}
|
|
.\\!flex-initial {
|
|
flex: 0 1 auto !important;
|
|
}
|
|
.\\!flex-none {
|
|
flex: none !important;
|
|
}
|
|
`,g=`.justify-normal {
|
|
justify-content: normal;
|
|
}
|
|
.justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
.justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
.justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
.justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
.justify-evenly {
|
|
justify-content: space-evenly;
|
|
}
|
|
.justify-stretch {
|
|
justify-content: stretch;
|
|
}
|
|
.\\!justify-normal {
|
|
justify-content: normal !important;
|
|
}
|
|
.\\!justify-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
.\\!justify-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
.\\!justify-center {
|
|
justify-content: center !important;
|
|
}
|
|
.\\!justify-between {
|
|
justify-content: space-between !important;
|
|
}
|
|
.\\!justify-around {
|
|
justify-content: space-around !important;
|
|
}
|
|
.\\!justify-evenly {
|
|
justify-content: space-evenly !important;
|
|
}
|
|
.\\!justify-stretch {
|
|
justify-content: stretch !important;
|
|
}
|
|
`,h=`.justify-items-start {
|
|
justify-items: start;
|
|
}
|
|
.justify-items-end {
|
|
justify-items: end;
|
|
}
|
|
.justify-items-center {
|
|
justify-items: center;
|
|
}
|
|
.justify-items-stretch {
|
|
justify-items: stretch;
|
|
}
|
|
.\\!justify-items-start {
|
|
justify-items: start !important;
|
|
}
|
|
.\\!justify-items-end {
|
|
justify-items: end !important;
|
|
}
|
|
.\\!justify-items-center {
|
|
justify-items: center !important;
|
|
}
|
|
.\\!justify-items-stretch {
|
|
justify-items: stretch !important;
|
|
}
|
|
`,b=`.justify-self-auto {
|
|
justify-self: auto;
|
|
}
|
|
.justify-self-start {
|
|
justify-self: start;
|
|
}
|
|
.justify-self-end {
|
|
justify-self: end;
|
|
}
|
|
.justify-self-center {
|
|
justify-self: center;
|
|
}
|
|
.justify-self-stretch {
|
|
justify-self: stretch;
|
|
}
|
|
.\\!justify-self-auto {
|
|
justify-self: auto !important;
|
|
}
|
|
.\\!justify-self-start {
|
|
justify-self: start !important;
|
|
}
|
|
.\\!justify-self-end {
|
|
justify-self: end !important;
|
|
}
|
|
.\\!justify-self-center {
|
|
justify-self: center !important;
|
|
}
|
|
.\\!justify-self-stretch {
|
|
justify-self: stretch !important;
|
|
}
|
|
`;function o(r){const s=Object.assign({p:"p",img:"img",h1:"h1",a:"a"},a(),r.components);return n.jsxs(n.Fragment,{children:[`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,`
|
|
`,n.jsx(f,{title:"Styles/Tokens/Flexbox",parameters:{...l}}),`
|
|
`,n.jsx(s.p,{children:n.jsx(s.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,n.jsx(s.h1,{id:"flexbox-tokens",children:"Flexbox tokens"}),`
|
|
`,n.jsxs(s.p,{children:["Flexbox is a modern way to lay out elements on your page while controling their alignment, distribution, space between and more. If flexbox is new, checkout the excellent ",n.jsx(s.a,{href:"https://css-tricks.com/snippets/css/a-guide-to-flexbox/",target:"_blank",rel:"nofollow noopener noreferrer",children:"CSS tricks guide"}),"."]}),`
|
|
`,n.jsx(s.p,{children:"Our style library provides these flexbox utility classes:"}),`
|
|
`,n.jsx(e,{title:"Align content",mdnLink:"align-content",header:["Class","Properties"],body:t(c),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Align items",mdnLink:"align-items",header:["Class","Properties"],body:t(m),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Align self",mdnLink:"align-self",header:["Class","Properties"],body:t(p),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Flex direction",mdnLink:"flex-direction",header:["Class","Properties"],body:t(u),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Flex grow",mdnLink:"flex-grow",header:["Class","Properties"],body:t(x),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Flex shrink",mdnLink:"flex-shrink",header:["Class","Properties"],body:t(y),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Flex wrap",mdnLink:"flex-wrap",header:["Class","Properties"],body:t(d),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Flex",mdnLink:"flex",header:["Class","Properties"],body:t(j),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Justify content",mdnLink:"justify-content",header:["Class","Properties"],body:t(g),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Justify items",mdnLink:"justify-items",header:["Class","Properties"],body:t(h),copyable:[!0,!1]}),`
|
|
`,n.jsx(e,{title:"Justify self",mdnLink:"justify-self",header:["Class","Properties"],body:t(b),copyable:[!0,!1]})]})}function w(r={}){const{wrapper:s}=Object.assign({},a(),r.components);return s?n.jsx(s,{...r,children:n.jsx(o,{...r})}):o(r)}const k=()=>{throw new Error("Docs-only story")};k.parameters={docsOnly:!0};const i={title:"Styles/Tokens/Flexbox",parameters:{...l},tags:["stories-mdx"],includeStories:["__page"]};i.parameters=i.parameters||{};i.parameters.docs={...i.parameters.docs||{},page:w};const X=["__page"];export{X as __namedExportsOrder,k as __page,i as default};
|
|
//# sourceMappingURL=main.stories-081db77e.js.map
|