isabelle/Falcon-PrestaShop-9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: isabelle:d5c3a60e37ed0e2474307509380e719af068e8b3
Branches Tags
isabelle:main isabelle:feature/extra-features isabelle:feature/falcon-PS9
..
compare: isabelle:be58a92df35b38bd39b47011268386af0a576697
Branches Tags
isabelle:feature/extra-features isabelle:feature/falcon-PS9 isabelle:main

2 Commits
d5c3a60e37 ... be58a92df3

Author SHA1 Message Date
Isabelle
be58a92df3 feat(extra-features): introduce .section-spacer-bottom utility class 2026-03-10 17:01:25 +01:00
Isabelle
c522059d06 refactor(extra-features): enhance utility variables and section spacer logic 2026-03-10 17:01:24 +01:00
1 changed files with 21 additions and 10 deletions
Expand all files Collapse all files

31
falcon/_dev/css/theme/custom/abstracts/_utilities.scss
View File

@@ -1,28 +1,32 @@
// Header selector for interpolation // Header selector for interpolation
// Example usage: #{$headings} { ... } // Example usage: #{$headers} { ... }
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; $headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
// All text selector for interpolation
$text: "#{$headers}, p, span, a, li";
// Section Spacers. Just set the two variables below and it is fully responsive!
// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with --small (ex. section-spacer--small).
// Section Spacers
$section-spacer: rem-calc(50px); $section-spacer: rem-calc(50px);
$section-spacer-small: rem-calc(25px); $section-spacer-small: rem-calc(25px);
.section-spacer-both { .section-spacer-both {
margin-top: $section-spacer; margin-top: $section-spacer-small;
margin-bottom: $section-spacer; margin-bottom: $section-spacer-small;
@include bs5-media-breakpoint-up(lg) { @include bs5-media-breakpoint-up(lg) {
margin-top: calc($section-spacer * 1.5); margin-top: $section-spacer;
margin-bottom: calc($section-spacer * 1.5); margin-bottom: $section-spacer;
} }
&--small { &--small {
margin-top: $section-spacer-small; margin-top: $section-spacer-small;
margin-bottom: $section-spacer-small; margin-bottom: $section-spacer-small;
@include bs5-media-breakpoint-up(lg) { @include bs5-media-breakpoint-up(lg) {
margin-top: calc($section-spacer-small * 2); margin-top: $section-spacer-small;
margin-bottom: calc($section-spacer-small * 2); margin-bottom: $section-spacer-small;
} }
} }
} }
.section-spacer { .section-spacer {
@extend .section-spacer-both; @extend .section-spacer-both;
margin-bottom: unset; margin-bottom: unset;
@@ -30,3 +34,10 @@ $section-spacer-small: rem-calc(25px);
margin-bottom: unset; margin-bottom: unset;
} }
} }
.section-spacer-bottom {
@extend .section-spacer-both;
margin-top: unset;
&--small {
margin-top: unset;
}
}