Colours

<h3>Colours</h3>
<p><code>.u-text-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the font colour of an element to be the same as a reference in the SCSS list.</p>
<p><code>.u-bg-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the background colour of an element to be the same as a reference in the SCSS list.</p>
<p><code>.u-border-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the border colour of an element to be the same as a reference in the SCSS list.</p>
<hr />
<p>The above utility classes will allow you to amend the colour of an element based on the colour reference you use from the default list below:</p>
<pre>
$colour-list: (
    'one': $col1,
    'two': $col2,
    'three': $col3,
    'four': $col4,
    'text': $col-text,
    'negative': $alert-negative,
    'positive': $alert-positive,
    'neutral': $alert-neutral
) !default;
</pre>
<p>If you wish to add more colours or remove any of these, you can copy the above into your custom vars file (without using <strong>!default</strong>) and amend that list to your choosing.</p>
<h3>Colours</h3>
<p><code>.u-text-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the font colour of an element to be the same as a reference in the SCSS list.</p>
<p><code>.u-bg-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the background colour of an element to be the same as a reference in the SCSS list.</p>
<p><code>.u-border-colour<strong>-{COLOUR REFERENCE}</strong></code> Will force the border colour of an element to be the same as a reference in the SCSS list.</p>
<hr />
<p>The above utility classes will allow you to amend the colour of an element based on the colour reference you use from the default list below:</p>
<pre>
$colour-list: (
    'one': $col1,
    'two': $col2,
    'three': $col3,
    'four': $col4,
    'text': $col-text,
    'negative': $alert-negative,
    'positive': $alert-positive,
    'neutral': $alert-neutral
) !default;
</pre>
<p>If you wish to add more colours or remove any of these, you can copy the above into your custom vars file (without using <strong>!default</strong>) and amend that list to your choosing.</p>
/* No context defined for this component. */

There are no notes for this item.