Flexible alerts

.c-flex-alert

scss

.c-flex-alert {
  align-items: center;
  background-color: use-color('base', 'true-white');
  border-radius: 4px;
  box-shadow: $box-shadow-card-lvl-1;
  display: flex;
  flex-wrap: wrap;
  font-size: 22px;
  justify-content: space-between;
  padding: 8px;
  transition: box-shadow ease-in-out 0.25s;

  @include media-breakpoint-up('webchat') {
    flex-wrap: nowrap;
  }

  @include element('img') {
    background-color: use-color('grey', true-white);
    border-radius: 50%;
    box-shadow: $box-shadow-card-lvl-1;
    flex-shrink: 0;
    height: 36px;
    margin-right: 16px;
    overflow: hidden;
    width: 36px;
    
    img {
      height: 100%;
      width: 100%;
    }
  }

  @include element('text') {
    margin-right: 4px;
    width: 100%;

    p {
      margin: 0;
    }
  }

  @include element('title') {
    @include use-font('body', 'semibold');
  }

  @include element('body') {
    @include use-font('body', 'regular');
  }

  @include element('footer') {
    margin-top: 4px;
  }

  @include element('time') {
    @include use-font('caption', 'regular');
    color: use-color('grey', 'light');
    margin-right: 16px;
  }

  @include element('tags') {
    display: inline-flex;
    margin-bottom: 4px;
    margin-top: 4px;
    
    @include media-breakpoint-up('webchat') {
      margin-bottom: 0;
    }
  }

  @include element('actions') {
    display: flex;
    justify-content: space-around;
    margin-top: 6px;
    width: 100%;

    @include media-breakpoint-up('webchat') {
      margin-bottom: 0;
      margin-top: initial;
      width: auto;
    }

    button + button {
      margin-left: 8px;
    }
  }

  @include modifier('error') {
    background-color: transparentize(use-color('event', 'error'), 0.96);
    border: 1px solid transparentize(use-color('event', 'error'), 0.7);
    color: darken(use-color('event', 'error'), 4%);
  }

  @include modifier('info') {
    background-color: transparentize(use-color('event', 'info'), 0.96);
    border: 1px solid transparentize(use-color('event', 'info'), 0.7);
    color: darken(use-color('event', 'info'), 30%);
  }

  @include modifier('success') {
    background-color: transparentize(use-color('event', 'success'), 0.96);
    border: 1px solid transparentize(use-color('event', 'success'), 0.7);
    color: darken(use-color('event', 'success'), 10%);
  }

  @include modifier('dark') {
    background-color: use-color('base', 'black');
    border: 0;
    color: use-color('base', 'white');

    .c-close-btn {
      background-color: darken(use-color('grey', 'light'), 8%);
    }
  }

  @include modifier('sticky') {
    bottom: 32px;
    left: 32px;
    position: fixed;
    z-index: use-layer('modal-3');
  }

  & + & {
    margin-top: 16px;
  }

  &[class*='--'] {
    text-align: center;
  }

  &:hover {
    box-shadow: $box-shadow-card-lvl-2;
  }
}

Este componente basado en flexbox, es la base de alertas y notificaciones. Por defecto se alinea a la izquierda, pero en el caso de usar sus modificadores de alerta se alinea automáticamente al centro.

Examples

html

<div class="c-flex-alert">
  <div class="c-flex-alert__text">
    <p class="c-flex-alert__body">
      Porter Collins created an issue
    </p>
  </div>
  <div class="c-flex-alert__actions">
    <button class="c-close-btn">
      Cerrar
    </button>
  </div>
</div>

html Modificadores: error, info y success

<div class="c-flex-alert c-flex-alert--info">
  <div class="c-flex-alert__text">
    <p class="c-flex-alert__body">
      UXUI-310 Centro notificaciones nuevo dashboard
    </p>
  </div>
  <div class="c-flex-alert__actions">
    <button class="c-close-btn">
      Cerrar
    </button>
  </div>
  </div>
  <div class="c-flex-alert c-flex-alert--error">
  <div class="c-flex-alert__text">
    <p class="c-flex-alert__body">
      UXUI-310 Centro notificaciones nuevo dashboard
    </p>
  </div>
  <div class="c-flex-alert__actions">
    <button class="c-close-btn">
      Deshacer
    </button>
    <button class="c-close-btn">
      Cerrar
    </button>
  </div>
  </div>
  <div class="c-flex-alert c-flex-alert--success">
    🙌
    <div class="c-flex-alert__text">
      <p class="c-flex-alert__body">
        UXUI-310 Centro notificaciones nuevo dashboard
      </p>
    </div>
  </div>

Flexible Alerts

.c-flex-alert

Examples

Requires

@mixin element()

@mixin modifier()

@mixin use-font()

@mixin media-breakpoint-up()

@function use-color()

$box-shadow-card-lvl-1 [private]

$box-shadow-card-lvl-2 [private]