58 lines
4 KiB
JavaScript
58 lines
4 KiB
JavaScript
import{M as a}from"./chunk-PCJTTTQV-90f858af.js";import{p as t,j as e}from"./jsx-runtime-539b76a3.js";import{u as l}from"./index-297ebefe.js";import"./iframe-22454b94.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-bd073d27.js.map
|