Mozaic

Import

Import the settings and the flag scss files.

@import 'settings-tools/all-settings';
@import 'components/_c.flag';

Basic usage

The creation of a Flag component in your code is done using the following HTML structure:

<div class="mc-flag">Flag label</div>

Viewport: px

<div class="example">
  <div class="example__item">
    <div class="mc-flag">
      <span class="mc-flag__label">Flag label</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-flag mc-flag--bordered">
      <span class="mc-flag__label">This is a flag with a very long label</span>
    </div>
  </div>
</div>

Variations

Available themes

solid
bordered
solid-primary-02 (no longer maintened)
bordered-primary-02 (no longer maintened)
solid-dark
bordered-dark
solid-light
bordered-light
solid-danger
bordered-danger

example :

<div class="mc-flag">Flag flag__label</div>

<div class="mc-flag mc-flag--bordered-primary-02">Flag bordered primary 02</div>

Viewport: px

<div class="example">
  <div class="example__item">
    <div class="mc-flag">
      <span class="mc-flag__label">Flag solid</span>
    </div>

    <div class="mc-flag mc-flag--bordered">
      <span class="mc-flag__label">Flag bordered</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-flag mc-flag--solid-dark">
      <span class="mc-flag__label">Flag solid dark</span>
    </div>

    <div class="mc-flag mc-flag--bordered-dark">
      <span class="mc-flag__label">Flag bordered dark</span>
    </div>
  </div>

  <div class="example__item example__item--light">
    <div class="mc-flag mc-flag--solid-light">
      <span class="mc-flag__label">Flag solid light</span>
    </div>

    <div class="mc-flag mc-flag--bordered-light">
      <span class="mc-flag__label">Flag bordered light</span>
    </div>
  </div>

  <div class="example__item">
    <div class="mc-flag mc-flag--solid-danger">
      <span class="mc-flag__label">Flag solid danger</span>
    </div>

    <div class="mc-flag mc-flag--bordered-danger">
      <span class="mc-flag__label">Flag bordered danger</span>
    </div>
  </div>
</div>

Customization and mixins

The set-flag-theme mixin

In case you need to create a new flag theme you'll need to define a new SASS map, see below :

$my-map: (
  'color-theme': (
    'background': white,
    'border': blue 'text': red,
  ),
);

Once the map of your theme is defined you can use the mixin set-flag-theme.

.mc-flag--my-custom-theme {
  @include set-flag-theme($my-map);
}

Then, it will generate something like this :

.mc-flag--my-custom-theme {
  color: red;
  border: 1px solid blue;
  background-color: white;
}

Flags