Links
Import
Import the settings and the links scss files.
@import 'settings-tools/all-settings';@import 'components/c.links';
Basic usage
To create a link you have one main class to apply mc-link.
<a href="#" class="mc-link">Default link</a>
Variations
Available color themes
- dark (default):
mc-link - light:
mc-link--light - primary:
mc-link--primary - primary-02:
mc-link--primary-02(no longer maintened) - danger:
mc-link--danger
Available sizes
You can use one of the 2 available sizes :
- small :
mc-link--s - medium :
mc-link--m
<a href="#" class="mc-link mc-link--s">Small link navigation link</a><a href="#" class="mc-link mc-link--m">Medium link navigation link</a>
Icons possibilities
Positions and sizes
Link icons are only used in 16px regardless of the link size
Responsive classes
| Default | mc-link--s | mc-link--m |
|---|---|---|
| From breakpoint m | mc-link--s@from-m | mc-link--m@from-m |
| From breakpoint l | mc-link--s@from-l | mc-link--m@from-l |
| From breakpoint xl | mc-link--s@from-xl | mc-link--m@from-xl |
| From breakpoint xxl | mc-link--s@from-xxl | mc-link--m@from-xxl |
Mixins
The link mixin
If you need to create a new link theme you need to define a new SASS map, see below :
$my-map: ( 'base': green, 'hover': white, 'visited': purple, 'active': blue,);
Now the map of your theme is define you can use the mixin set--link-theme.
.mc-link--my-custom-theme { @include set-link-theme($my-map);}
Then, it will generate something like this :
.mc-link--my-custom-theme { color: green;}.mc-link--my-custom-theme:hover,.mc-link--my-custom-theme.is-hover { color: white;}.mc-link--my-custom-theme:visited,.mc-link--my-custom-theme.is-visited { border-color: purple;}.mc-link--my-custom-theme:active,.mc-link--my-custom-theme.is-active { color: blue;}