Sha256: e8bdbe945415dd3f9958b538dcc326f3a0820108c8b17521e175935380299002
Contents?: true
Size: 1.36 KB
Versions: 16
Compression:
Stored size: 1.36 KB
Contents
////
/// 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;
}
}
Version data entries
16 entries across 16 versions & 4 rubygems