Colorize

Documentation • Demo

Ready

Colorize utilities

You can use these utilities to quickly set a background color or a text color

See examples for all possible colors.

View
Context
HTML
Code
Info


        <h3 class="ecl-heading ecl-heading--ema-h3">Background colours</h3>

<div class="example">
  <div class="ema-u-bg-primary" style="color: #fff">ema-u-bg-primary</div>
  <div class="ema-u-bg-blue-1" style="color: #fff">ema-u-bg-blue-1</div>
  <div class="ema-u-bg-blue-2" style="color: #fff">ema-u-bg-blue-2</div>
  <div class="ema-u-bg-blue-3" style="color: #fff">ema-u-bg-blue-3</div>
  <div class="ema-u-bg-blue-4" style="color: #fff">ema-u-bg-blue-4</div>
  <div class="ema-u-bg-epar-red" style="color: #fff">ema-u-bg-epar-red</div>
  <div class="ema-u-bg-epar-green" style="color: #fff">ema-u-bg-epar-green</div>
  <div class="ema-u-bg-epar-grey" style="color: #fff">ema-u-bg-epar-grey</div>
  <div class="ema-u-bg-grey-1" style="color: #fff">ema-u-bg-grey-1</div>
  <div class="ema-u-bg-grey-2" style="color: #fff">ema-u-bg-grey-2</div>
  <div class="ema-u-bg-grey-3" style="color: #fff">ema-u-bg-grey-3</div>
  <div class="ema-u-bg-light-grey-1">ema-u-bg-light-grey-1</div>
  <div class="ema-u-bg-light-grey-2">ema-u-bg-light-grey-2</div>
  <div class="ema-u-bg-light-grey-3">ema-u-bg-light-grey-3</div>
  <div class="ema-u-bg-light-grey-4">ema-u-bg-light-grey-4</div>
</div>

<h3 class="ecl-heading ecl-heading--ema-h3">Text colours</h3>

<div class="example">
  <div class="ema-u-color-primary">ema-u-color-primary</div>
  <div class="ema-u-color-blue-1">ema-u-color-blue-1</div>
  <div class="ema-u-color-blue-2">ema-u-color-blue-2</div>
  <div class="ema-u-color-blue-3">ema-u-color-blue-3</div>
  <div class="ema-u-color-blue-4">ema-u-color-blue-4</div>
  <div class="ema-u-color-epar-red">ema-u-color-epar-red</div>
  <div class="ema-u-color-epar-green">ema-u-color-epar-green</div>
  <div class="ema-u-color-epar-grey">ema-u-color-epar-grey</div>
  <div class="ema-u-color-black">ema-u-color-black</div>
  <div class="ema-u-color-grey-1">ema-u-color-grey-1</div>
  <div class="ema-u-color-grey-2">ema-u-color-grey-2</div>
  <div class="ema-u-color-grey-3">ema-u-color-grey-3</div>
  <div class="ema-u-color-light-grey-1">ema-u-color-light-grey-1</div>
  <div class="ema-u-color-light-grey-2">ema-u-color-light-grey-2</div>
  <div class="ema-u-color-light-grey-3">ema-u-color-light-grey-3</div>
  <div class="ema-u-color-light-grey-4">ema-u-color-light-grey-4</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }
  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>


        
            
            /* No context defined for this component. */


        
        <h3 class="ecl-heading ecl-heading--ema-h3">Background colours</h3>

<div class="example">
  <div class="ema-u-bg-primary" style="color: #fff">ema-u-bg-primary</div>
  <div class="ema-u-bg-blue-1" style="color: #fff">ema-u-bg-blue-1</div>
  <div class="ema-u-bg-blue-2" style="color: #fff">ema-u-bg-blue-2</div>
  <div class="ema-u-bg-blue-3" style="color: #fff">ema-u-bg-blue-3</div>
  <div class="ema-u-bg-blue-4" style="color: #fff">ema-u-bg-blue-4</div>
  <div class="ema-u-bg-epar-red" style="color: #fff">ema-u-bg-epar-red</div>
  <div class="ema-u-bg-epar-green" style="color: #fff">ema-u-bg-epar-green</div>
  <div class="ema-u-bg-epar-grey" style="color: #fff">ema-u-bg-epar-grey</div>
  <div class="ema-u-bg-grey-1" style="color: #fff">ema-u-bg-grey-1</div>
  <div class="ema-u-bg-grey-2" style="color: #fff">ema-u-bg-grey-2</div>
  <div class="ema-u-bg-grey-3" style="color: #fff">ema-u-bg-grey-3</div>
  <div class="ema-u-bg-light-grey-1">ema-u-bg-light-grey-1</div>
  <div class="ema-u-bg-light-grey-2">ema-u-bg-light-grey-2</div>
  <div class="ema-u-bg-light-grey-3">ema-u-bg-light-grey-3</div>
  <div class="ema-u-bg-light-grey-4">ema-u-bg-light-grey-4</div>
</div>

<h3 class="ecl-heading ecl-heading--ema-h3">Text colours</h3>

<div class="example">
  <div class="ema-u-color-primary">ema-u-color-primary</div>
  <div class="ema-u-color-blue-1">ema-u-color-blue-1</div>
  <div class="ema-u-color-blue-2">ema-u-color-blue-2</div>
  <div class="ema-u-color-blue-3">ema-u-color-blue-3</div>
  <div class="ema-u-color-blue-4">ema-u-color-blue-4</div>
  <div class="ema-u-color-epar-red">ema-u-color-epar-red</div>
  <div class="ema-u-color-epar-green">ema-u-color-epar-green</div>
  <div class="ema-u-color-epar-grey">ema-u-color-epar-grey</div>
  <div class="ema-u-color-black">ema-u-color-black</div>
  <div class="ema-u-color-grey-1">ema-u-color-grey-1</div>
  <div class="ema-u-color-grey-2">ema-u-color-grey-2</div>
  <div class="ema-u-color-grey-3">ema-u-color-grey-3</div>
  <div class="ema-u-color-light-grey-1">ema-u-color-light-grey-1</div>
  <div class="ema-u-color-light-grey-2">ema-u-color-light-grey-2</div>
  <div class="ema-u-color-light-grey-3">ema-u-color-light-grey-3</div>
  <div class="ema-u-color-light-grey-4">ema-u-color-light-grey-4</div>
</div>

<style type="text/css">
  body {
    margin: 2rem;
  }

  .example div {
    padding: 1rem;
    text-align: center;
  }
</style>

File:

Content:


                                /*
  EMA Colorize
  ===========
*/

@each $key, $value in $ema-colors {
  .ema-u-color-#{$key} {
    color: $value;
    fill: $value;
  }
  .ema-u-bg-#{$key} {
    background-color: $value;
  }
}

.ema-u-color-white {
  color: #fff;
  fill: #fff;
}

.ema-u-color-black {
  color: #000;
  fill: #000;
}

URL: /components/raw/ema-u-colorize/ema-u-colorize.scss
Filesystem Path: framework/utilities/ema-u-colorize/ema-u-colorize.scss
Size: 302 Bytes

Handle: @ec-europa/ema-u-colorize
Preview:
- With layout
- Component only
Filesystem Path: framework/utilities/ema-u-colorize/ema-u-colorize.twig