import{M as a}from"./chunk-PCJTTTQV-0a40be90.js";import{p as t,j as e}from"./jsx-runtime-539b76a3.js";import{u as l}from"./index-297ebefe.js";import"./iframe-739b763c.js";import"../sb-preview/runtime.js";import"./extends-b40c5bac.js";import"./_commonjsHelpers-725317a4.js";import"./index-d475d2ea.js";import"./index-d37d4223.js";import"./index-1a79a776.js";import"./index-356e4a49.js";function c(s={}){const{wrapper:i}=Object.assign({},l(),s.components);return i?e.jsx(i,{...s,children:e.jsx(o,{})}):o();function o(){const n=Object.assign({p:"p",img:"img",h1:"h1",pre:"pre",code:"code",h3:"h3",h2:"h2",em:"em"},l(),s.components);return e.jsxs(e.Fragment,{children:[e.jsx(a,{title:"SCSS/Spacers",parameters:{...t}}),`
`,e.jsx(n.p,{children:e.jsx(n.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
`,e.jsx(n.h1,{id:"spacers",children:"Spacers"}),`
`,e.jsx(n.p,{children:"You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-html",children:`<!-- Adds margin-top and padding -->
<div class="mt-2 p-2">
  <p>My spaced out content</p>
</div>
`})}),`
`,e.jsx(n.h3,{id:"levels",children:"Levels"}),`
`,e.jsxs(n.p,{children:["Spacer classes are specified with a level, from ",e.jsx(n.code,{children:"0"})," - ",e.jsx(n.code,{children:"6"}),", where ",e.jsx(n.code,{children:"0"})," is no spacing and ",e.jsx(n.code,{children:"6"})," is the largest amount of spacing."]}),`
`,e.jsx(n.h3,{id:"margin",children:"Margin"}),`
`,e.jsxs(n.p,{children:[`| Class        | Property          |
| ------------ | ----------------- |
| `,e.jsx(n.code,{children:"m-{level}"}),`  | margin            |
| `,e.jsx(n.code,{children:"mt-{level}"}),` | margin-top        |
| `,e.jsx(n.code,{children:"mr-{level}"}),` | margin-right      |
| `,e.jsx(n.code,{children:"mb-{level}"}),` | margin-bottom     |
| `,e.jsx(n.code,{children:"ml-{level}"}),` | margin-left       |
| `,e.jsx(n.code,{children:"mx-{level}"}),` | margin-left/right |
| `,e.jsx(n.code,{children:"my-{level}"})," | margin-top/bottom |"]}),`
`,e.jsx(n.h3,{id:"padding",children:"Padding"}),`
`,e.jsxs(n.p,{children:[`| Class        | Property           |
| ------------ | ------------------ |
| `,e.jsx(n.code,{children:"p-{level}"}),`  | padding            |
| `,e.jsx(n.code,{children:"pt-{level}"}),` | padding-top        |
| `,e.jsx(n.code,{children:"pr-{level}"}),` | padding-right      |
| `,e.jsx(n.code,{children:"pb-{level}"}),` | padding-bottom     |
| `,e.jsx(n.code,{children:"pl-{level}"}),` | padding-left       |
| `,e.jsx(n.code,{children:"px-{level}"}),` | padding-left/right |
| `,e.jsx(n.code,{children:"py-{level}"})," | padding-top/bottom |"]}),`
`,e.jsx(n.h2,{id:"customising-spacing-levels",children:"Customising spacing levels"}),`
`,e.jsx(n.p,{children:"You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-css",children:`$margin-levels: (
  '0': 0,
  '1': 1rem,
  '2': 2rem,
  '3': 3rem,
  '4': 4rem,
  '5': 5rem,
  '6': 6rem
);

$padding-levels: (
  '0': 0,
  '1': 0.5rem,
  '2': 1rem,
  '3': 1.75rem,
  '4': 2.25rem,
  '5': 3rem,
  '6': 4rem
);
`})}),`
`,e.jsxs(n.p,{children:["Make sure you import or define these variables ",e.jsx(n.em,{children:"before"})," importing the style library."]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-css",children:`@import 'my-custom-variables'; // Where you overrided the spacer variables
@import '@reuters-graphics/graphics-components/dist/scss/main';
`})})]})}}const d=()=>{throw new Error("Docs-only story")};d.parameters={docsOnly:!0};const r={title:"SCSS/Spacers",parameters:{...t},tags:["stories-mdx"],includeStories:["__page"]};r.parameters=r.parameters||{};r.parameters.docs={...r.parameters.docs||{},page:c};const S=["__page"];export{S as __namedExportsOrder,d as __page,r as default};
//# sourceMappingURL=spacers.stories-8fa86b5e.js.map