From cf37d8a257fd53acb318e763b5e5fe5b905eee2b Mon Sep 17 00:00:00 2001 From: Isabelle Date: Mon, 22 Dec 2025 10:49:47 +0100 Subject: [PATCH 1/8] feat(isabelle-edits): Made grid & media queries more like bootstrap 5 This branch was made to save edits that would make my life easier but are optional. These edits stray further form the original theme than the edits in the standard styles feature branch do, so if you are not used to them you night not like them. That is why I separated the branch. --- .../abstracts/variables/bootstrap/_grid.scss | 24 ++++++++-- falcon/_dev/css/theme/custom/_custom.scss | 1 + .../css/theme/custom/abstracts/_mixins.scss | 44 +++++++++++++++++++ 3 files changed, 66 insertions(+), 3 deletions(-) create mode 100644 falcon/_dev/css/theme/custom/abstracts/_mixins.scss diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss index 7845a36..9b83776 100644 --- a/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss +++ b/falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss @@ -1,3 +1,21 @@ -$grid-columns: 12; -$grid-gutter-width: rem-calc(20px); -$grid-row-columns: 6; +// Made this more like the breakpoints used in Bootstrap 5 +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, +); + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px, +); + +$grid-columns: 12; +$grid-gutter-width: rem-calc(20px); +$grid-row-columns: 6; diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index a660a38..1fe46e1 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -1,6 +1,7 @@ // NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap //Abstracts: Things used throughout the site such as utility classes and generic overrides. +@import "abstracts/mixins"; //@import "abstracts/base"; //@import "abstracts/utilities"; diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss new file mode 100644 index 0000000..522481e --- /dev/null +++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss @@ -0,0 +1,44 @@ +// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4) +// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass + +@mixin bs5-media-breakpoint-up($name) { + $min: map-get($grid-breakpoints, $name); + @if $min and $min > 0 { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} + +@mixin bs5-media-breakpoint-down($name) { + $max: map-get($grid-breakpoints, $name); + @if $max { + @media (max-width: calc(#{$max} - 0.02px)) { + @content; + } + } @else { + @content; + } +} + +@mixin bs5-media-breakpoint-between($lower, $upper) { + $min: map-get($grid-breakpoints, $lower); + $max: map-get($grid-breakpoints, $upper); + @if $min and $max { + @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) { + @content; + } + } +} + +@mixin bs5-media-breakpoint-only($name) { + $breakpoint-names: map-keys($grid-breakpoints); + $index: index($breakpoint-names, $name); + $next-name: nth($breakpoint-names, $index + 1); + + @include bs5-media-breakpoint-between($name, $next-name) { + @content; + } +} From 871e42f4ba61089c8828c1c2e67d1e6ddafa3e74 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Mon, 22 Dec 2025 11:35:05 +0100 Subject: [PATCH 2/8] Add gap and font-size function classes --- falcon/_dev/css/theme/custom/_custom.scss | 3 ++- .../css/theme/custom/abstracts/_functions.scss | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 falcon/_dev/css/theme/custom/abstracts/_functions.scss diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index 1fe46e1..42b25c6 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -1,8 +1,9 @@ // NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap //Abstracts: Things used throughout the site such as utility classes and generic overrides. -@import "abstracts/mixins"; //@import "abstracts/base"; +@import "abstracts/functions"; +@import "abstracts/mixins"; //@import "abstracts/utilities"; // Components: parts of the theme itself that are not associated with a module. diff --git a/falcon/_dev/css/theme/custom/abstracts/_functions.scss b/falcon/_dev/css/theme/custom/abstracts/_functions.scss new file mode 100644 index 0000000..cc4565e --- /dev/null +++ b/falcon/_dev/css/theme/custom/abstracts/_functions.scss @@ -0,0 +1,17 @@ +@use "sass:math"; + +// Font size utility classes generator +// Generates utility classes like .fs-14, .fs-16, etc. +@for $i from 8 through 72 { + .fs-#{$i} { + font-size: rem-calc($i * 1px) !important; + } +} + +// gap size utility classes generator +// Generates utility classes like .gap-4 +@for $i from 1 through 35 { + .gap-#{$i} { + gap: rem-calc($i * 1px) !important; + } +} From d5d1cd787401f522fb9dedc1df0054f3f59586a4 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Mon, 22 Dec 2025 12:01:47 +0100 Subject: [PATCH 3/8] Background and color utility classes & map --- .../variables/bootstrap/_colors.scss | 49 +++++++++++-------- .../theme/custom/abstracts/_utilities.scss | 12 +++++ 2 files changed, 41 insertions(+), 20 deletions(-) create mode 100644 falcon/_dev/css/theme/custom/abstracts/_utilities.scss diff --git a/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss b/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss index 3ef3427..22f3c42 100644 --- a/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss +++ b/falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss @@ -1,6 +1,6 @@ // Color system -$white: #fff; +$white: #fff; $gray-100: #f8f9fa; $gray-200: #e9ecef; $gray-300: #dee2e6; @@ -10,24 +10,33 @@ $gray-600: #6c757d; $gray-700: #495057; $gray-800: #343a40; $gray-900: #212529; -$black: #000; +$black: #000; -$blue: #007bff; -$indigo: #6610f2; -$purple: #6f42c1; -$pink: #e83e8c; -$red: #dc3545; -$orange: #fd7e14; -$yellow: #ffc107; -$green: #28a745; -$teal: #20c997; -$cyan: #17a2b8; +$blue: #007bff; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #e83e8c; +$red: #dc3545; +$orange: #fd7e14; +$yellow: #ffc107; +$green: #28a745; +$teal: #20c997; +$cyan: #17a2b8; -$primary: $blue; -$secondary: $gray-600; -$success: $green; -$info: $cyan; -$warning: #ff9a52; -$danger: $red; -$light: $gray-100; -$dark: $gray-800; +$success: $green; +$info: $cyan; +$warning: #ff9a52; +$danger: $red; +$light: $gray-100; +$dark: $gray-800; + +$primary: $blue; +$secondary: $gray-600; + +// Map for utility classes +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + //"tertiary": $tertiary, + //"quaternary": $quaternary,, +); diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss new file mode 100644 index 0000000..cf456a8 --- /dev/null +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -0,0 +1,12 @@ +// Color utility classes +@each $name, $color in $theme-colors { + .bg-#{$name} { + background-color: $color; + } +} + +@each $name, $color in $theme-colors { + .text-#{$name} { + color: $color; + } +} From 00b79f12e2127758349c9dbcf20005a6af9a1988 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 09:33:55 +0100 Subject: [PATCH 4/8] feat(isabelle-edits): Clarify theme structure and add SVG icon support Improves theme organization by adopting a 7-in-1 SCSS structure. Introduces support for SVG icons within templates, enhancing visual flexibility. Adds a checkmark SVG asset. --- falcon/_dev/css/theme/custom/_custom.scss | 12 +++++++++--- .../css/theme/custom/abstracts/_utilities.scss | 4 ++++ falcon/_dev/img/checkmark.svg | 3 +++ .../views/templates/hook/is_searchbar.tpl | 7 ++++++- falcon/templates/_partials/header.tpl | 15 ++++++++++++++- 5 files changed, 36 insertions(+), 5 deletions(-) create mode 100644 falcon/_dev/img/checkmark.svg diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index 42b25c6..4dd3e49 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -1,13 +1,19 @@ -// NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +/* +This is the main custom SCSS file for the Falcon theme. + +I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here: +https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1 + +⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +*/ //Abstracts: Things used throughout the site such as utility classes and generic overrides. +@import "abstracts/utilities"; //@import "abstracts/base"; @import "abstracts/functions"; @import "abstracts/mixins"; -//@import "abstracts/utilities"; // Components: parts of the theme itself that are not associated with a module. -//@import "components/"; @import "components/forms"; // Modules: Styling for specific modules. diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index cf456a8..af19738 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -1,3 +1,7 @@ +// Header selector for interpolation +// Example usage: #{$headings} { ... } +$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; + // Color utility classes @each $name, $color in $theme-colors { .bg-#{$name} { diff --git a/falcon/_dev/img/checkmark.svg b/falcon/_dev/img/checkmark.svg new file mode 100644 index 0000000..87168de --- /dev/null +++ b/falcon/_dev/img/checkmark.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl index 4cda15b..d51da7d 100644 --- a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl +++ b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl @@ -9,7 +9,12 @@ name="s" value="{$search_string}"> diff --git a/falcon/templates/_partials/header.tpl b/falcon/templates/_partials/header.tpl index 24a382c..a6fb96e 100644 --- a/falcon/templates/_partials/header.tpl +++ b/falcon/templates/_partials/header.tpl @@ -33,11 +33,24 @@ {/block} {block name='header_top'} + {* Optional: Add USP bar at the top of the header + Uncomment the code below to enable it + Use the uspanywhere module and hook to "displayHeaderTopUsps" *} + + {* +
+
+
+ {hook h='displayHeaderTopUsps'} +
+
+
+ *} +
-
From 1ccb71c8e0c3620cdd83eb000b1e62ec81d59af0 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 10:14:06 +0100 Subject: [PATCH 5/8] feat(isabelle-edits): Modify index page layout This new page structure for the home page makes it so you have more control over the index.tpl file. By default, if the index.tpl file is full width (meaning no side columns) the container becomes fluid and full-width. For each section, you need to define a container, rows and columns. This way you can easily have full-width background images for only certain sections. --- .../theme/custom/abstracts/_utilities.scss | 13 -- falcon/templates/index.tpl | 17 +++ .../templates/layouts/layout-both-columns.tpl | 127 +++++++++--------- .../templates/layouts/layout-full-width.tpl | 2 +- 4 files changed, 79 insertions(+), 80 deletions(-) diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index af19738..73b6d30 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -1,16 +1,3 @@ // Header selector for interpolation // Example usage: #{$headings} { ... } $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; - -// Color utility classes -@each $name, $color in $theme-colors { - .bg-#{$name} { - background-color: $color; - } -} - -@each $name, $color in $theme-colors { - .text-#{$name} { - color: $color; - } -} diff --git a/falcon/templates/index.tpl b/falcon/templates/index.tpl index c17d03e..f6c8bee 100644 --- a/falcon/templates/index.tpl +++ b/falcon/templates/index.tpl @@ -29,6 +29,23 @@ {block name='page_content_top'}{/block} {block name='page_content'} + {* Define containers, rows and columns here for each section *} + {* Example: + +
+
+
+
+ {hook h='displayCustomhtml1'} +
+
+ {hook h='displayHomeBanner1'} +
+
+
+
+ + *} {block name='hook_home'} {$HOOK_HOME nofilter} {/block} diff --git a/falcon/templates/layouts/layout-both-columns.tpl b/falcon/templates/layouts/layout-both-columns.tpl index e27ec56..db39344 100644 --- a/falcon/templates/layouts/layout-both-columns.tpl +++ b/falcon/templates/layouts/layout-both-columns.tpl @@ -25,101 +25,96 @@ - + {block name='head'} - {include file='_partials/head.tpl'} + {include file='_partials/head.tpl'} {/block} - + - + {block name='hook_after_body_opening_tag'} - {hook h='displayAfterBodyOpeningTag'} + {hook h='displayAfterBodyOpeningTag'} {/block}
- {block name='product_activation'} - {include file='catalog/_partials/product-activation.tpl'} - {/block} - - - -
- - {block name='notifications'} - {include file='_partials/notifications.tpl'} + {block name='product_activation'} + {include file='catalog/_partials/product-activation.tpl'} {/block} - {hook h="displayWrapperTop"} -
- {block name='breadcrumb'} - {include file='_partials/breadcrumb.tpl'} - {/block} - -
- {block name="left_column"} -
- {if $page.page_name == 'product'} - {hook h='displayLeftColumnProduct' product=$product category=$category} - {else} - {hook h="displayLeftColumn"} - {/if} -
+ - {block name="content_wrapper"} -
- {hook h="displayContentWrapperTop"} - {block name="content"} -

Hello world! This is HTML5 Boilerplate.

+
+ {block name='notifications'} + {include file='_partials/notifications.tpl'} + {/block} + {hook h="displayWrapperTop"} +
+ {block name='breadcrumb'} + {include file='_partials/breadcrumb.tpl'} {/block} - {hook h="displayContentWrapperBottom"} -
- {/block} +
+ {block name="left_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayLeftColumnProduct' product=$product category=$category} + {else} + {hook h="displayLeftColumn"} + {/if} +
+ {/block} + {block name="content_wrapper"} +
+ {hook h="displayContentWrapperTop"} + {block name="content"} +

Hello world! This is HTML5 Boilerplate.

+ {/block} + {hook h="displayContentWrapperBottom"} +
+ {/block} + {block name="right_column"} +
+ {if $page.page_name == 'product'} + {hook h='displayRightColumnProduct'} + {else} + {hook h="displayRightColumn"} + {/if} +
+ {/block} +
+
+ {hook h="displayWrapperBottom"} +
- {block name="right_column"} -
- {if $page.page_name == 'product'} - {hook h='displayRightColumnProduct'} - {else} - {hook h="displayRightColumn"} - {/if} -
+
+ {block name="footer"} + {include file="_partials/footer.tpl"} {/block} -
-
- {hook h="displayWrapperBottom"} - - -
- {block name="footer"} - {include file="_partials/footer.tpl"} - {/block} -
+ {block name='javascript_bottom'} - {include file="_partials/password-policy-template.tpl"} - {include file="_partials/javascript.tpl" javascript=$javascript.bottom} + {include file="_partials/password-policy-template.tpl"} + {include file="_partials/javascript.tpl" javascript=$javascript.bottom} {/block} {block name='hook_before_body_closing_tag'} - {hook h='displayBeforeBodyClosingTag'} + {hook h='displayBeforeBodyClosingTag'} {/block} {block name='mobile-modals'} - {include file="_partials/mobile-modals.tpl"} + {include file="_partials/mobile-modals.tpl"} {/block} {block name='page-loader'} - {include file="_partials/page-loader.tpl"} + {include file="_partials/page-loader.tpl"} {/block} - + diff --git a/falcon/templates/layouts/layout-full-width.tpl b/falcon/templates/layouts/layout-full-width.tpl index 83186a9..e16fd2e 100644 --- a/falcon/templates/layouts/layout-full-width.tpl +++ b/falcon/templates/layouts/layout-full-width.tpl @@ -28,7 +28,7 @@ {block name='right_column'}{/block} {block name='content_wrapper'} -
+
{hook h="displayContentWrapperTop"} {block name='content'}

Hello world! This is HTML5 Boilerplate.

From 51bad8030e0e56fa5b5c53000958d7744fa91f1b Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 11:52:12 +0100 Subject: [PATCH 6/8] feat(standard-styling): Add button color map --- falcon/_dev/css/theme/custom/_custom.scss | 8 ++++-- .../css/theme/custom/components/_buttons.scss | 26 +++++++++++++++++++ 2 files changed, 32 insertions(+), 2 deletions(-) create mode 100644 falcon/_dev/css/theme/custom/components/_buttons.scss diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index fea6de0..6dcd960 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -5,14 +5,16 @@ I am loosely following the 7 in 1 structure for better organization of the style https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap +Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html + */ //Abstracts: Things used throughout the site such as utility classes and generic overrides. @import "abstracts/utilities"; //@import "abstracts/base"; -//@import "abstracts/utilities"; // Components: parts of the theme itself that are not associated with a module. +//@import "components/buttons"; @import "components/forms"; // Modules: Styling for specific modules. @@ -25,5 +27,7 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter @import "layout/swiper"; // Pages -//@import "pages/category"; +//@import "pages/checkout"; +//@import "pages/home"; +//@import "pages/listing"; //@import "pages/product"; diff --git a/falcon/_dev/css/theme/custom/components/_buttons.scss b/falcon/_dev/css/theme/custom/components/_buttons.scss new file mode 100644 index 0000000..3a64197 --- /dev/null +++ b/falcon/_dev/css/theme/custom/components/_buttons.scss @@ -0,0 +1,26 @@ +// To customize text colors per button, use this map +$btn-color: ( + "primary": $white, + "secondary": $white, + "light": $primary, + "dark": $white, +); + +// Generate button color overrides from the map +@each $name, $color in $btn-color { + .btn-#{$name}, + .btn-lg-#{$name}, + .btn-sm-#{$name} { + color: $color !important; + } + .btn-outline-#{$name}, + .btn-lg-outline-#{$name}, + .btn-sm-outline-#{$name} { + color: $color; + &:hover, + &:focus, + &:active { + color: $color !important; + } + } +} From 252b20bdc6117a4c4e0c78fb35f8e861b3fc27a8 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 11:53:36 +0100 Subject: [PATCH 7/8] Add btn after mixin --- .../css/theme/custom/abstracts/_mixins.scss | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss index 522481e..b541d01 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss @@ -42,3 +42,32 @@ @content; } } + +// Mixin to add an after pseudo-element with a mask image to customize button colors +/* Example: + +.btn{ + &::after { + @include btn-after("../img/arrow-right.svg"); + } +} + +*/ + +@mixin btn-after($url, $color: currentColor) { + content: ""; + display: inline-block; + width: 1em; + height: 1em; + margin-left: 0.5em; + vertical-align: middle; + background-color: currentColor; + mask-image: url(#{$url}); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-image: url(#{$url}); + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} From 1490fc6a1e0e751f5683bf6da67c73ccdd226084 Mon Sep 17 00:00:00 2001 From: Isabelle Date: Wed, 24 Dec 2025 13:47:08 +0100 Subject: [PATCH 8/8] feat(isabelle-edits): Adds spacing, heading, and border utilities Adds utility classes for spacing, headings, and borders to provide more flexible styling options. This commit introduces: - Spacing utilities with responsive adjustments for different screen sizes. - A heading selector for simplified styling of heading elements. - A border utility for applying a consistent border style. --- falcon/_dev/css/theme/custom/_custom.scss | 4 +-- .../theme/custom/abstracts/_utilities.scss | 27 +++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss index 8b66a99..e7fba9a 100644 --- a/falcon/_dev/css/theme/custom/_custom.scss +++ b/falcon/_dev/css/theme/custom/_custom.scss @@ -10,10 +10,10 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/ */ //Abstracts: Things used throughout the site such as utility classes and generic overrides. -@import "abstracts/utilities"; -//@import "abstracts/base"; @import "abstracts/functions"; @import "abstracts/mixins"; +@import "abstracts/utilities"; +//@import "abstracts/base"; // Components: parts of the theme itself that are not associated with a module. //@import "components/buttons"; diff --git a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss index 73b6d30..17742e8 100644 --- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss +++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss @@ -1,3 +1,30 @@ +// Spacers +$section-spacer: rem-calc(50px); +$section-spacer-small: rem-calc(25px); + +.section-spacer { + margin-top: $section-spacer; + @include bs5-media-breakpoint-up(lg) { + margin-top: calc($section-spacer * 1.5); + } + &--small { + margin-top: $section-spacer-small; + @include bs5-media-breakpoint-up(lg) { + margin-top: calc($section-spacer-small * 1.5); + } + } +} + // Header selector for interpolation // Example usage: #{$headings} { ... } $headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6"; + +// Background +.bg__block { + // background: url(../img/bg.svg) repeat center center, $tertiary; +} + +// Border +.bordered { + border: 1px solid $border-color !important; +}