49 lines
1.4 KiB
SCSS
49 lines
1.4 KiB
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;
|
|
}
|
|
}
|