Merge branch 'feature_old/standard-styling' into feature_old/isabelle-edits

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/abstracts/variables/bootstrap/_colors.scss

@@ -23,11 +23,20 @@ $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;
+
+$primary: $blue;
+$secondary: $gray-600;
+
+// Map for utility classes
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    //"tertiary": $tertiary,
+    //"quaternary": $quaternary,,
+);

falcon/_dev/css/theme/_index.scss

@@ -5,4 +5,3 @@
 @import "layout/index";
 @import "components/index";
 
-@import "custom/custom";

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/base";
 @import "abstracts/functions";
 @import "abstracts/mixins";
-//@import "abstracts/utilities";
+@import "abstracts/utilities";
+//@import "abstracts/base";
 
 // Components: parts of the theme itself that are not associated with a module.
 //@import "components/buttons";

falcon/_dev/css/theme/custom/abstracts/_functions.scss

@@ -8,34 +8,10 @@
     }
 }
 
-// Font weight utility classes generator
-// Generates utility classes like .fw-100, .fw-200, etc.
-@for $i from 100 through 900 {
-    @if $i % 100 == 0 {
-        .fw-#{$i} {
-            font-weight: #{$i} !important;
-        }
-    }
-}
-
 // gap size utility classes generator
-// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4
+// Generates utility classes like .gap-4
 @for $i from 1 through 35 {
     .gap-#{$i} {
         gap: rem-calc($i * 1px) !important;
     }
-    .gap-col-#{$i} {
-        column-gap: rem-calc($i * 1px) !important;
-    }
-    .gap-row-#{$i} {
-        row-gap: rem-calc($i * 1px) !important;
-    }
-}
-
-// hex to rgba function
-@function hex-to-rgba($hex, $alpha) {
-    $r: red($hex);
-    $g: green($hex);
-    $b: blue($hex);
-    @return rgba($r, $g, $b, $alpha);
 }

falcon/_dev/css/theme/custom/abstracts/_mixins.scss

@@ -46,7 +46,7 @@
 // Mixin to add an after pseudo-element with a mask image to customize button colors
 /* Example: 
 
-.btn-arrow-right{
+.btn{
     &::after {
         @include btn-after("../img/arrow-right.svg");
     }

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -1,32 +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";
 
-// Section Spacers
+// Background
-$section-spacer: rem-calc(50px);
+.bg__block {
-$section-spacer-small: rem-calc(25px);
+    // background: url(../img/bg.svg) repeat center center, $tertiary;
-
-.section-spacer-both {
-    margin-top: $section-spacer;
-    margin-bottom: $section-spacer;
-    @include bs5-media-breakpoint-up(lg) {
-        margin-top: calc($section-spacer * 1.5);
-        margin-bottom: calc($section-spacer * 1.5);
-    }
-    &--small {
-        margin-top: $section-spacer-small;
-        margin-bottom: $section-spacer-small;
-        @include bs5-media-breakpoint-up(lg) {
-            margin-top: calc($section-spacer-small * 2);
-            margin-bottom: calc($section-spacer-small * 2);
-        }
-    }
 }
 
-.section-spacer {
+// Border
-    @extend .section-spacer-both;
+.bordered {
-    margin-bottom: unset;
+    border: 1px solid $border-color !important;
-    &--small {
-        margin-bottom: unset;
-    }
 }

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -13,4 +13,14 @@ $btn-color: (
     .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;
+        }
+    }
 }

falcon/_dev/js/theme/index.js

@@ -79,19 +79,4 @@ $(() => {
     $(".js-select-link").on("change", ({ target }) => {
         window.location.href = $(target).val();
     });
-
-    // Postcode input formatting
-    const $postCodeInput = $("input[name='postcode']");
-    $postCodeInput.on("input", function () {
-        let value = $(this).val();
-
-        // Match 4 digits followed by 2 letters (e.g., 1234AB)
-        const match = value.match(/^(\d{4})([a-zA-Z]{2})$/);
-
-        if (match) {
-            // Add space between numbers and letters
-            const formatted = `${match[1]} ${match[2]}`;
-            $(this).val(formatted);
-        }
-    });
 });

falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl

@@ -18,7 +18,7 @@
             {/if}
         </div>
         <div class="favorite-btn__content favorite-btn__content--add">
-             {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+             {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
             {if $smarty.capture.svg_output}
                 {$smarty.capture.svg_output nofilter}
             {else}

falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl

@@ -17,7 +17,7 @@
         {/if}
     </div>
     <div class="favorite-btn__content favorite-btn__content--add">
-        {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
+        {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
         {if $smarty.capture.svg_output}
             {$smarty.capture.svg_output nofilter}
         {else}

falcon/modules/ps_contactinfo/ps_contactinfo.tpl

@@ -28,13 +28,7 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Store information' d='Shop.Theme.Global'}</span>
     <a href="#footer_contact_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
       <i class="material-icons d-block"></i>
-        {/if}
     </a>
   </div>
 

falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl

@@ -28,13 +28,7 @@
   <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
     <span class="h4 mb-0">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <a href="#footer_account_list" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
       <i class="material-icons d-block"></i>
-        {/if}
     </a>
   </div>
 

falcon/modules/ps_customersignin/ps_customersignin.tpl

@@ -34,12 +34,7 @@
     {/if}
   >
     <div class="header-top__icon-container">
-        {capture name="svg_output"}{svg_icon file='person.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
       <span class="header-top__icon material-icons">person</span>
-        {/if}
     </div>
   </a>
 </div>

falcon/modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,13 +4,7 @@
     <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
       <span class="h4 mb-0">{$linkBlock.title}</span>
       <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-        {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-        <span style="margin-bottom: 3px;">
-            {$smarty.capture.svg_output nofilter}
-        {else}
         <i class="material-icons d-block"></i>
-        {/if}
       </a>
     </div>
     <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl

@@ -29,13 +29,7 @@
       <div class="d-flex align-items-center mb-3 justify-content-between position-relative">
         <span class="h4 mb-0">{$linkBlock.title}</span>
         <a href="#footer_sub_menu_{$_expand_id}" class="icon-collapse stretched-link text-reset d-block d-md-none" data-toggle="collapse">
-            {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-            {if $smarty.capture.svg_output}
-            <span style="margin-bottom: 3px;">
-                {$smarty.capture.svg_output nofilter}
-            {else}
           <i class="material-icons d-block"></i>
-            {/if}
         </a>
       </div>
       <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">

falcon/modules/ps_mainmenu/ps_mainmenu.tpl

@@ -21,14 +21,9 @@
             >
               <span class="align-self-center">{$node.label}</span>
               {if $node.children|count}
-                {capture name="svg_output"}{svg_icon file='chevron_down.svg'}{/capture}
-                {if $smarty.capture.svg_output}
                 <span class="d-none d-md-block pl-1" style="margin-bottom: 3px;">
-                    {$smarty.capture.svg_output nofilter}
+                    {svg_icon file='chevron_down.svg' }  
                 </span>
-                {else}
-                    <i class="material-icons d-block"></i>
-                {/if}
               {/if}
             </a>
             {if $node.children|count}

falcon/templates/_partials/header.tpl

@@ -33,6 +33,20 @@
 {/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" *}
+
+    {*
+    <div class="header-cta d-none d-lg-block py-2 py-lg-3 bg-primary">
+        <div class="container">
+            <div class="row d-flex gap-20">
+                {hook h='displayHeaderTopUsps'}
+            </div>
+        </div> 
+    </div> 
+    *}
+
     <div class="js-header-top-wrapper">
         <div class="header-top js-header-top">
             <div class="header-top__content pb-md-0 py-2">

falcon/templates/_partials/pagination.tpl

@@ -26,12 +26,8 @@
 
 {block name='pagination_page_list'}
   {if $pagination.should_be_displayed}
-    <div class="d-flex justify-content-between align-items-center">
-        <div class="results__block">
-            {l s='%curr_numer% van %total_items% resultaten' sprintf=['%curr_numer%' => $pagination.items_shown_to,'%total_items%' => $pagination.total_items] d='Shop.Theme.Actions'}
-        </div>
     <nav>
-            <ul class="pagination justify-content-center m-0">
+      <ul class="pagination justify-content-center mt-4 mb-2">
         {foreach from=$pagination.pages item="page"}
           <li  class="page-item{if $page.current} active{/if} {if $page.type === 'spacer'}disabled{/if}">
             {if $page.type === 'spacer'}
@@ -63,6 +59,5 @@
         {/foreach}
       </ul>
     </nav>
-    </div>
   {/if}
 {/block}

falcon/templates/catalog/_partials/category-footer.tpl

@@ -1,13 +1,5 @@
-{* Defensive: Handles LazyArray objects for category *}
-{if is_object($category)}
-  {$category = $category|json_encode|json_decode:true}
-  {if isset($category.category)}
-    {$category = $category.category}
-  {/if}
-{/if}
-
 <div id="js-product-list-footer">
-    {if isset($category.additional_description) && $category.additional_description && $listing.pagination.items_shown_from == 1}
+    {if $category.additional_description && $listing.pagination.items_shown_from == 1}
       <div id="category-description-2" class="cms-content my-3">
         {$category.additional_description nofilter}
       </div>

falcon/templates/catalog/_partials/miniatures/product.tpl

@@ -26,7 +26,7 @@
   {$listingType = $type|default:'listing'}
   <div
     {if $listingType === 'listing'}
-      class="products-list__block col col-sm-6 col-lg-4 col-xl-3"
+      class="products-list__block products-list__block--grid"
     {elseif $listingType === 'slider'}
       class="swiper-slide product-slider__item col-6 col-md-4 col-lg-3"
     {/if}

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:
+
+          <section id="home_hero" class="mt-0">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-6 displayCustomhtml1">
+                            {hook h='displayCustomhtml1'}
+                        </div>
+                        <div class="col-6 displayHomeBanner1">
+                            {hook h='displayHomeBanner1'}
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+          *}
           {block name='hook_home'}
             {$HOOK_HOME nofilter}
           {/block}

falcon/templates/layouts/layout-both-columns.tpl

@@ -25,13 +25,13 @@
 <!doctype html>
 <html lang="{$language.locale}">
 
-  <head>
+<head>
     {block name='head'}
         {include file='_partials/head.tpl'}
     {/block}
-  </head>
+</head>
 
-  <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
+<body id="{$page.page_name}" class="{$page.body_classes|classnames}">
 
     {block name='hook_after_body_opening_tag'}
         {hook h='displayAfterBodyOpeningTag'}
@@ -49,18 +49,15 @@
         </header>
 
         <section id="wrapper">
-
             {block name='notifications'}
                 {include file='_partials/notifications.tpl'}
             {/block}
-
             {hook h="displayWrapperTop"}
-        <div class="container">
+            <div class="{if $page.page_name == 'index' }container-fluid p-0 overflow-hidden{else} container {/if}">
                 {block name='breadcrumb'}
                     {include file='_partials/breadcrumb.tpl'}
                 {/block}
-
+                    <div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
-          <div class="row">
                     {block name="left_column"}
                         <div id="left-column" class="col-12 col-md-4 col-lg-3">
                             {if $page.page_name == 'product'}
@@ -70,7 +67,6 @@
                             {/if}
                         </div>
                     {/block}
-
                     {block name="content_wrapper"}
                         <div id="content-wrapper" class="js-content-wrapper left-column right-column col-md-4 col-lg-6">
                             {hook h="displayContentWrapperTop"}
@@ -80,7 +76,6 @@
                             {hook h="displayContentWrapperBottom"}
                         </div>
                     {/block}
-
                     {block name="right_column"}
                         <div id="right-column" class="col-12 col-md-4 col-lg-3">
                             {if $page.page_name == 'product'}
@@ -120,6 +115,6 @@
         {include file="_partials/page-loader.tpl"}
     {/block}
 
-  </body>
+</body>
 
 </html>

falcon/templates/layouts/layout-full-width.tpl

@@ -28,7 +28,7 @@
 {block name='right_column'}{/block}
 
 {block name='content_wrapper'}
-  <div id="content-wrapper" class="col-12 js-content-wrapper">
+  <div id="content-wrapper" class="{if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}col-12 {/if}js-content-wrapper">
     {hook h="displayContentWrapperTop"}
     {block name='content'}
       <p>Hello world! This is HTML5 Boilerplate.</p>