diff --git a/_sass/snap.scss b/_sass/snap.scss new file mode 100644 index 0000000..8b0e9b0 --- /dev/null +++ b/_sass/snap.scss @@ -0,0 +1,58 @@ +$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 $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 $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}; + } + } + } + } + } + } +} diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 1ae40c1..2e275d7 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -21,6 +21,7 @@ $debug: {{ jekyll.environment | not: 'production' }}; @import "toggler"; @import "share_box"; @import "embed"; +@import "snap"; @if $debug { /*