sutty-base-jekyll-theme/_sass/floating_alert.scss

////
/// Alertas flotantes
/// @group Alertas flotantes
////

/// Posiciones posibles
$positions: (top, right, bottom, left);

/// Las alertas flotantes son notificaciones emergentes que desaparecen
/// por su cuenta, como los "Toast" de Android.  Tienen opciones de
/// accesibilidad para que los lectores de pantalla también las
/// notifiquen.
/// @link _packs/controllers/notification_controller.js
/// @link _includes/floating_alert.html
/// @example html
///   <div class="floating-alert floating-alert-default floating-alert-bottom">
///     <div class="floating-alert-content"></div>
///   </div>
.floating-alert {
  /// No se puede interactuar
  @extend .pointer-event-none;

  /// El estilo por defecto las coloca centradas y con una transición al
  /// aparecer o desaparecer.  Si no usamos esta clase podemos darle
  /// nuestro propio estilo.
  &.floating-alert-default {
    @extend .d-flex;
    @extend .justify-content-center;
    @extend .w-100;
    @extend .position-fixed;
    @extend .fade;
    @extend .hide;
  }

  @each $position in $positions {
    /// Pueden tener una posición fija
    &.floating-alert-#{$position} {
      #{$position}: 2rem;
    }
  }

  /// Tienen un borde redondeado y un padding para parecerse a un toast.
  /// El color de fondo se lo da una clase background-*
  .floating-alert-content {
    border-radius: 2rem;
    padding: .5rem 1rem;
  }
}