Sha256: 0e0b0b04bb7bf2665c40e2282dad503dc1ea2882e8fdf6d3a44d5d17f0f16f22
Contents?: true
Size: 1.95 KB
Versions: 27
Compression:
Stored size: 1.95 KB
Contents
$snap-types: (none, mandatory, proximity);
$snap-directions: (y, x);
$snap-points: (start, end, center, none);
// TODO: Escribir un mixin
@each $snap-type in $snap-types {
@each $snap-direction in $snap-directions {
// El contenedor indica la dirección y obligatoriedad del snap
.snap-#{$snap-type}-#{$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};
}
// Lxs hijxs directos se alinean al contenedor
@each $snap-point in $snap-points {
& > .snap-#{$snap-point} {
scroll-snap-align: #{$snap-point};
}
}
// Poder modificar el snap según el punto de corte
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
@each $snap-point in $snap-points {
& > .snap-#{$grid-breakpoint}-#{$snap-point} {
scroll-snap-align: #{$snap-point};
}
}
}
}
}
@each $grid-breakpoint, $_ in $grid-breakpoints {
@include media-breakpoint-up($grid-breakpoint) {
.snap-#{$snap-type}-#{$grid-breakpoint}-#{$snap-direction} {
// XXX: Esto está duplicado porque SCSS no nos deja extender
// dentro de un @include.
// @extend .snap-#{$snap-type}-#{$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 {
.snap-#{$snap-point} {
scroll-snap-align: #{$snap-point};
}
}
}
}
}
}
}
Version data entries
27 entries across 27 versions & 3 rubygems