Dividers
Implementing a divider in your code can be done in two ways: (1.) a simple method or (2.) a slightly more advanced method. We detail below these two implementation modes.
Implementing a divider - simple method
The simple way of implementing a divider is to be used when you don't want to control the parameters of the divider (its width, margins around the divider, etc...).
If this is the case, here is how to implement the divider on your element:
Import
@import 'settings-tools/all-settings';@import 'components/c.divider';
Usage
You must apply one of these classes on your HTML element according to the desired position for your divider:
- Horizontal top:
mc-divider-top - Horizontal bottom:
mc-divider-bottom - Vertical right:
mc-divider-right - Vertical left:
mc-divider-left
<div class="your-element-class mc-divider-bottom"> <!-- your content --></div>
Variations
Color variations
The divider is available with 4 color variations:
- default
- dark
- light
- lightest
You can use these color variations by adding one of the following modifiers to the basic css class (see above):
| divider position | default | dark | light | lightest |
|---|---|---|---|---|
| Horizontal top | mc-divider-top | mc-divider-top--dark | mc-divider-top--light | mc-divider-top--lightest |
| Horizontal bottom | mc-divider-bottom | mc-divider-bottom--dark | mc-divider-bottom--light | mc-divider-bottom--lightest |
| Vertical right | mc-divider-right | mc-divider-right--dark | mc-divider-right--light | mc-divider-right--lightest |
| Vertical left | mc-divider-left | mc-divider-left--dark | mc-divider-left--light | mc-divider-left--lightest |
Size variations
The divider is available with 3 size variations:
| available size | size value |
|---|---|
| s (default) | 1px |
| m | $mu025 (4px) |
| l | $mu050 (8px) |
You can use these size variations by adding one of the following modifiers to the basic css class (see above):
| divider position | default | m | l |
|---|---|---|---|
| Horizontal top | mc-divider-top | mc-divider-top--m | mc-divider-top--l |
| Horizontal bottom | mc-divider-bottom | mc-divider-bottom--m | mc-divider-bottom--l |
| Vertical right | mc-divider-right | mc-divider-right--m | mc-divider-right--l |
| Vertical left | mc-divider-left | mc-divider-left--m | mc-divider-left--l |
Implementing a divider - advanced method
The advanced method is to be used in case you want to control more finely the rendering of your divider.
For this purpose we provide you with the set-divider mixin.
Import
@import 'settings-tools/all-settings';
Usage
.your-element-class { @include set-divider('bottom', 'dark', '100%', 'm');}
The set-divider mixin allows you to act on the following parameters:
| parameters | available values |
|---|---|
| position | top, right, bottom (default), left |
| color | default (default), dark, light, lightest |
| width | 100% (default) |
| size | s (default) , m, l, |