Sha256: a89cb19fa99b0868b90133074d45d9a90fca2851d93bccefc2a0af87a2557837
Contents?: true
Size: 1.99 KB
Versions: 9
Compression:
Stored size: 1.99 KB
Contents
////
/// @group Snap
////
/// _Snap_ es una forma de hacer que los elementos se alineen
/// automáticamente a partes de su contenedor durante el _scroll_. Si le
/// usuarie _scrollea_ hasta la mitad, el navegador continua el _scroll_
/// hasta que se alinee. Es útil para presentaciones de diapositivas
/// (como el sitio de Sutty) o _banners_ con navegación horizontal
/// (_sliders_).
///
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
$snap-types: (none, mandatory, proximity);
/// Ejes
$snap-directions: (y, x);
/// Puntos de alineación
$snap-points: (start, end, center, none);
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
/// Obtiene el sufijo para cada clase responsive usando mixins de
/// Bootstrap. Valores posibles:
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
/// `-md`, `-lg`, `-xl`.
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@each $snap-type in $snap-types {
@each $snap-direction in $snap-directions {
/// El contenedor indica la dirección y obligatoriedad del snap
///
/// @example html
/// <div class="snap-mandatory-y snap-proximity-md-y"></div>
.snap-#{$snap-type}#{$infix}-#{$snap-direction} {
scroll-snap-points-#{$snap-direction}: repeat(100%);
scroll-snap-destination: 0 0;
@each $prefix in $vendor-prefixes {
#{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
#{$prefix}scroll-snap-type: #{$snap-type};
}
@each $snap-point in $snap-points {
/// Los elementos que son descendientes directos se alinean a
/// su contenedor
///
/// @example html
/// <div class="snap-mandatory-y snap-proximity-md-y">
/// <div class="snap-start"></div>
/// <div class="snap-center"></div>
/// <div class="snap-end"></div>
/// </div>
& > .snap-#{$snap-point} {
scroll-snap-align: #{$snap-point};
}
}
}
}
}
}
}
Version data entries
9 entries across 9 versions & 3 rubygems