import{j as e}from"./iframe-p4aYZyoq.js";import"./preload-helper-BDBacUwf.js";const c={title:"Core/Grid"},s={grid:{margin:"1rem 0","--grid-background":"#ccc"},cell:{background:"#ccc",padding:".5rem"}},i=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsx("h3",{children:"Uniprot Grid"}),e.jsx("div",{style:s.grid,className:"uniprot-grid",children:e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-12",children:"span-12"})}),e.jsxs("div",{style:s.grid,className:"uniprot-grid",children:[e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-6",children:"span-6"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-6",children:"span-6"})]}),e.jsxs("div",{style:s.grid,className:"uniprot-grid",children:[e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-4",children:"span-4"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-8",children:"span-8"})]}),e.jsxs("div",{style:s.grid,className:"uniprot-grid",children:[e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-4",children:"span-4"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-4",children:"span-4"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-4",children:"span-4"})]}),e.jsxs("div",{style:s.grid,className:"uniprot-grid",children:[e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-1",children:"span-1"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-11",children:"span-1"})]}),e.jsx("div",{style:s.grid,className:"uniprot-grid",children:e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-11 uniprot-grid-cell--offset-1",children:"span-11 offset-1"})}),e.jsxs("div",{style:s.grid,className:"uniprot-grid",children:[e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-5 uniprot-grid-cell--offset-2",children:"span-5 offset-2"}),e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-5",children:"span-5"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{children:"Grid modifiers"}),e.jsxs("p",{children:[e.jsx("code",{children:"--centered"}),": To use if the grid should be centered on the page instead of full width."]}),e.jsxs("p",{children:[e.jsx("code",{children:"--with-bleed"}),": Sometimes, you need the grid background to overflow into the leftmost and rightmost gutters. Define the colour by using the css variable ",e.jsx("code",{children:"--grid-background"})]}),e.jsx("div",{style:s.grid,className:"uniprot-grid uniprot-grid--centered uniprot-grid--with-bleed",children:e.jsx("div",{style:s.cell,className:"uniprot-grid-cell--span-12",children:"span-12"})})]})]});var l,d,n;i.parameters={...i.parameters,docs:{...(l=i.parameters)==null?void 0:l.docs,source:{originalSource:`() => <>
    <div>
      <h3>Uniprot Grid</h3>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-12">
          span-12
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-6">
          span-6
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-6">
          span-6
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-4">
          span-4
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-8">
          span-8
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-4">
          span-4
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-4">
          span-4
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-4">
          span-4
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-1">
          span-1
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-11">
          span-1
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-11 uniprot-grid-cell--offset-1">
          span-11 offset-1
        </div>
      </div>
      <div style={gridStyles.grid} className="uniprot-grid">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-5 uniprot-grid-cell--offset-2">
          span-5 offset-2
        </div>
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-5">
          span-5
        </div>
      </div>
    </div>
    <div>
      <h3>Grid modifiers</h3>
      <p>
        <code>--centered</code>: To use if the grid should be centered on the
        page instead of full width.
      </p>
      <p>
        <code>--with-bleed</code>: Sometimes, you need the grid background to
        overflow into the leftmost and rightmost gutters. Define the colour by
        using the css variable <code>--grid-background</code>
      </p>
      <div style={gridStyles.grid} className="uniprot-grid uniprot-grid--centered uniprot-grid--with-bleed">
        <div style={gridStyles.cell} className="uniprot-grid-cell--span-12">
          span-12
        </div>
      </div>
    </div>
  </>`,...(n=(d=i.parameters)==null?void 0:d.docs)==null?void 0:n.source}}};const a=["Grid"];export{i as Grid,a as __namedExportsOrder,c as default};
