78 lines
2 KiB
Text
78 lines
2 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
|
|
<Meta title="SCSS/Spacers" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# Spacers
|
|
|
|
You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes.
|
|
|
|
```svelte
|
|
<!-- Adds margin-top and padding -->
|
|
<div class="mt-2 p-2">
|
|
<p>My spaced out content</p>
|
|
</div>
|
|
```
|
|
|
|
### Levels
|
|
|
|
Spacer classes are specified with a level, from `0` - `6`, where `0` is no spacing and `6` is the largest amount of spacing.
|
|
|
|
### Margin
|
|
|
|
| Class | Property |
|
|
| ------------ | ----------------- |
|
|
| `m-{level}` | margin |
|
|
| `mt-{level}` | margin-top |
|
|
| `mr-{level}` | margin-right |
|
|
| `mb-{level}` | margin-bottom |
|
|
| `ml-{level}` | margin-left |
|
|
| `mx-{level}` | margin-left/right |
|
|
| `my-{level}` | margin-top/bottom |
|
|
|
|
### Padding
|
|
|
|
| Class | Property |
|
|
| ------------ | ------------------ |
|
|
| `p-{level}` | padding |
|
|
| `pt-{level}` | padding-top |
|
|
| `pr-{level}` | padding-right |
|
|
| `pb-{level}` | padding-bottom |
|
|
| `pl-{level}` | padding-left |
|
|
| `px-{level}` | padding-left/right |
|
|
| `py-{level}` | padding-top/bottom |
|
|
|
|
## Customising spacing levels
|
|
|
|
You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values:
|
|
|
|
```scss
|
|
$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,
|
|
);
|
|
```
|
|
|
|
Make sure you import or define these variables _before_ importing the style library.
|
|
|
|
```scss
|
|
@import 'my-custom-variables'; // Where you overrided the spacer variables
|
|
@import '@reuters-graphics/graphics-components/dist/scss/main';
|
|
```
|