61 lines
2 KiB
SCSS
61 lines
2 KiB
SCSS
////
|
|
/// @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};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|