Employer Style Base Pattern Library

Flashes 

<!-- Primary -->
<p class="flash-primary">This is a primary flash message.</p>


<!-- Success -->
<p class="flash-success">This is a success flash message.</p>


<!-- Warning -->
<p class="flash-warning">This is a warning flash message.</p>


<!-- Danger -->
<p class="flash-danger">This is a danger flash message.</p>


<p class="flash-{{ modifier }}">This is a {{ label }} flash message.</p>
 
/* Primary */
{
  "order": 1,
  "modifier": "primary",
  "label": "primary"
}


/* Success */
{
  "order": 1,
  "modifier": "success",
  "label": "success"
}


/* Warning */
{
  "order": 1,
  "modifier": "warning",
  "label": "warning"
}


/* Danger */
{
  "order": 1,
  "modifier": "danger",
  "label": "danger"
}
  • Content: 
    @mixin flash($color) {
  background: $color;
  color: darken($color, 60);

  a {
    color: darken($color, 70);

    &:hover {
      color: darken($color, 90);
    }
  }
}

%flash-base {
  font-weight: bold;
  margin-bottom: $base-spacing / 2;
  padding: $base-spacing / 2;
}

@mixin flash-primary {
  @extend %flash-base;
  @include flash($alert-primary);
}

@mixin flash-success {
  @extend %flash-base;
  @include flash($alert-success);
}

@mixin flash-warning {
  @extend %flash-base;
  @include flash($alert-warning);
}

@mixin flash-danger {
  @extend %flash-base;
  @include flash($alert-danger);
}
  • URL: /components/raw/flashes/_flashes.scss
  • Filesystem Path: sass/directives/01_tools/flashes/_flashes.scss
  • Size: 606 Bytes

There are no notes for this item.