Sutty/sutty-base-jekyll-theme
5
0
Fork 0
Code Issues Pull requests Projects Releases Activity

oh snap!

Browse source
This commit is contained in:
f 2020-11-12 15:20:31 -03:00
parent 3639cac621
commit d7946bf6dc
2 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
_sass/snap.scss Normal file
View file

@ -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};
}
}
}
}
}
}
}

1
assets/css/styles.scss
View file

@ -21,6 +21,7 @@ $debug: {{ jekyll.environment | not: 'production' }};
@import "toggler";
@import "share_box";
@import "embed";
@import "snap";
@if $debug {
/*