Mixins, functions and variables to power all vf-core components. If you're using a Visual Framework component it's a near-certainty that you'll need this component.
Note: these utilise vf-design-tokens
set-color($color-name)
map-deep-get($map, $keys)
set-layer($layer)
str-replace($name, $number)
Slice off the first amount($number) of characters from the $name value passed. Primarily used to replace the start of variables for the utility class generation.
Rollup of all functions.
Reusable styling for html blockquote elements.
@include blockquote;
Reusable styling for button elements
@include vf-button;
Reusable styling for divider elements and styling
@include vf-divider;
Reusable styling for figures with optional caption styling
@include figure($has-caption: true);
Nothing, yet.
Styling for links.
@include inline-link( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color, $vf-include-normalisations: $vf-include-normalisations);
@include button-link( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color);
button-link--ghost( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color);
Styling for list types
@include($classname: optional-classname-to-usm, $type: null, unordered, ordered or inline);
Margin, recommended to use with sizing maps
@include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--500));
-
margin-block: specify one value for bottom and top, top or bottom -
margin-all: specify one value for left or right, left or right -
margin: specify all or a value for each
Padding, recommended to use with sizing maps
@include padding--block(bottom, map-get($vf-spacing-map, vf-spacing--500));
-
padding-block: specify one value for bottom and top, top or bottom -
padding-all: specify one value for left or right, left or right -
padding: specify all or a value for each
Currently not used. Intelligently pick if white or black should be used as a contrasting colour
Generate correct font information when included into an element. Recommended to use with typography and sizing maps
@include set-type(text-body--3, $global-font-family, $custom-margin-bottom: vf-spacing--500, $color: secondary)
Color setting can be turned off by passing $color: ignore.
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
A non-jitter causing way to slide elements up/down on hover.
@include vf-slide-on-hover($shift-distance, $direction:up);
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
Rollup of all mixins.
Rollup of all utility mixins.
For disable link elements, actions @include vf-disabled($vf-link--disabled-color);
Native CSS properties, currently limited to document spacing.
Global Sass variable defaults for the high-level page look of typography, page width, deprecated component text, if normalisations should be included.
Rollup of global Sass variables.
This repository is distributed with npm. After installing npm, you can install vf-sass-config and its dependencies with this command.
$ yarn add --dev @visual-framework/vf-sass-config @visual-framework/vf-design-tokens
You might also find the the vf-sass-starter a useful starting point for setting up a customised Sass build.
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import 'vf-global-variables';
@import 'vf-variables';
@import 'vf-functions';
@import 'vf-mixins';
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter