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

Background and color utility classes & map
2025-12-23 09:35:48 +01:00 · 2025-12-22 12:02:19 +01:00 · 2025-12-22 11:36:35 +01:00 · 2025-12-22 11:35:05 +01:00 · 2025-12-22 10:49:47 +01:00
22 changed files with 84 additions and 302 deletions
--- 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,,
+);
--- a/falcon/_dev/css/theme/_index.scss
+++ b/falcon/_dev/css/theme/_index.scss
@ -5,4 +5,3 @@
@import "layout/index";
@import "components/index";

-@import "custom/custom";
--- a/falcon/_dev/css/theme/custom/_custom.scss
+++ b/falcon/_dev/css/theme/custom/_custom.scss
@ -1,13 +1,4 @@
-/* 
-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
-Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
-
-*/
+// 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/base";
@ -16,7 +7,7 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
 //@import "abstracts/utilities";

 // Components: parts of the theme itself that are not associated with a module.
-//@import "components/buttons";
+//@import "components/";
@import "components/forms";

 // Modules: Styling for specific modules.
@ -29,7 +20,5 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
@import "layout/swiper";

 // Pages
-//@import "pages/checkout";
-//@import "pages/home";
-//@import "pages/listing";
+//@import "pages/category";
 //@import "pages/product";
--- a/falcon/_dev/css/theme/custom/abstracts/_functions.scss
+++ b/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);
 }
--- a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
+++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
@ -42,32 +42,3 @@
        @content;
    }
 }
-
-// Mixin to add an after pseudo-element with a mask image to customize button colors
-/* Example: 
-
-.btn-arrow-right{
-    &::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;
-}
--- a/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
+++ b/falcon/_dev/css/theme/custom/abstracts/_utilities.scss
@ -1,32 +1,12 @@
-// Header selector for interpolation
-// Example usage: #{$headings} { ... }
-$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
-
-// Section Spacers
-$section-spacer: rem-calc(50px);
-$section-spacer-small: rem-calc(25px);
-
-.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);
-        }
+// Color utility classes
+@each $name, $color in $theme-colors {
+    .bg-#{$name} {
+        background-color: $color;
    }
 }

-.section-spacer {
-    @extend .section-spacer-both;
-    margin-bottom: unset;
-    &--small {
-        margin-bottom: unset;
+@each $name, $color in $theme-colors {
+    .text-#{$name} {
+        color: $color;
    }
 }
--- a/falcon/_dev/css/theme/custom/components/_buttons.scss
+++ b/falcon/_dev/css/theme/custom/components/_buttons.scss
@ -1,16 +0,0 @@
-// 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;
-    }
-}
--- a/falcon/_dev/img/checkmark.svg
+++ b/falcon/_dev/img/checkmark.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16">
-  <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
-</svg>
--- a/falcon/_dev/js/theme/index.js
+++ b/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);
-        }
-    });
 });
--- a/falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl
+++ b/falcon/modules/is_favoriteproducts/views/templates/hook/button-product.tpl
@ -1,29 +0,0 @@
-
-<div class="col-auto mt-2 px-1">
-    <a
-        class="product-page__action-btn btn btn-light shadow rounded-circle favorite-btn p-2"
-        href="#"
-        data-action="toggleFavorite"
-        data-active="false"
-        {if isset($product.id) && isset($product.id_product_attribute)}
-            data-key="{$product.id}_{$product.id_product_attribute}"
-        {/if}
-    >
-        <div class="favorite-btn__content favorite-btn__content--added">
-            {capture name="svg_output"}{svg_icon file='heart.svg' }{/capture}
-            {if $smarty.capture.svg_output}
-                {$smarty.capture.svg_output nofilter}
-            {else}
-                <span class="material-icons product-page__action-btn-icon d-block">favorite</span>
-            {/if}
-        </div>
-        <div class="favorite-btn__content favorite-btn__content--add">
-             {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
-            {if $smarty.capture.svg_output}
-                {$smarty.capture.svg_output nofilter}
-            {else}
-                <span class="material-icons product-page__action-btn-icon d-block">favorite_border</span>
-            {/if}
-        </div>
-    </a>
-</div>
--- a/falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl
+++ b/falcon/modules/is_favoriteproducts/views/templates/hook/button.tpl
@ -1,28 +0,0 @@
-
-<a
-    class="product-miniature__functional-btn product-miniature__functional-btn--top btn btn-light shadow rounded-circle favorite-btn"
-    href="#"
-    data-action="toggleFavorite"
-    data-active="false"
-    {if isset($product.id) && isset($product.id_product_attribute)}
-        data-key="{$product.id}_{$product.id_product_attribute}"
-    {/if}
->
-    <div class="favorite-btn__content favorite-btn__content--added">
-        {capture name="svg_output"}{svg_icon file='heart.svg'}{/capture}
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
-                <span class="material-icons product-miniature__functional-btn-icon d-block">favorite</span>
-        {/if}
-    </div>
-    <div class="favorite-btn__content favorite-btn__content--add">
-        {capture name="svg_output"}{svg_icon file='heart.svg' width="22"}{/capture}
-        {if $smarty.capture.svg_output}
-            {$smarty.capture.svg_output nofilter}
-        {else}
-            <span class="material-icons product-miniature__functional-btn-icon d-block">favorite_border</span>
-        {/if}
-        
-    </div>
-</a>
--- a/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
+++ b/falcon/modules/is_searchbar/views/templates/hook/is_searchbar.tpl
@ -9,12 +9,7 @@
 					   name="s"
 					   value="{$search_string}">
 				<button type="submit" class="search-form__btn btn">
-                    {capture name="svg_output"}{svg_icon file='search.svg'}{/capture}
-                    {if $smarty.capture.svg_output}
-                        {$smarty.capture.svg_output nofilter}
-                    {else}
-                        <span class="header-top__icon material-icons">search</span>
-                    {/if}
+					<span class="material-icons">search</span>
 				</button>
 			</div>
 		</form>
--- a/falcon/modules/ps_contactinfo/ps_contactinfo.tpl
+++ b/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}
+      <i class="material-icons d-block"></i>
    </a>
  </div>

--- a/falcon/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
+++ b/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}
+      <i class="material-icons d-block"></i>
    </a>
  </div>

--- a/falcon/modules/ps_customersignin/ps_customersignin.tpl
+++ b/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}
+      <span class="header-top__icon material-icons">person</span>
    </div>
  </a>
 </div>
--- a/falcon/modules/ps_linklist/views/templates/hook/linkblock-column.tpl
+++ b/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}
+        <i class="material-icons d-block"></i>
      </a>
    </div>
    <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">
--- a/falcon/modules/ps_linklist/views/templates/hook/linkblock.tpl
+++ b/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}
+          <i class="material-icons d-block"></i>
        </a>
      </div>
      <div id="footer_sub_menu_{$_expand_id}" class="collapse d-md-block">
--- a/falcon/modules/ps_mainmenu/ps_mainmenu.tpl
+++ b/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}
--- a/falcon/templates/_partials/header.tpl
+++ b/falcon/templates/_partials/header.tpl
@ -37,6 +37,7 @@
        <div class="header-top js-header-top">
            <div class="header-top__content pb-md-0 py-2">
                <div class="container">
+
                    <div class="row header-top__row">

                        <div class="col flex-grow-0 header-top__block header-top__block--menu-toggle d-block d-md-none">
--- a/falcon/templates/_partials/pagination.tpl
+++ b/falcon/templates/_partials/pagination.tpl
@ -26,43 +26,38 @@

 {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">
-                {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'}
-                    <span
-                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                        href="#"
-                        class="page-link"
-                    >
-                        &hellip;
-                    </span>
-                    {else}
-                    <a
-                        rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
-                        href="{$page.url}"
-                        class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
-                    >
-                        {if $page.type === 'previous'}
-                        <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
-                        <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
-                        {elseif $page.type === 'next'}
-                        <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
-                        <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
-                        {else}
-                        {$page.page}
-                        {/if}
-                    </a>
-                    {/if}
-                </li>
-                {/foreach}
-            </ul>
-        </nav>
-    </div>
+    <nav>
+      <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'}
+              <span
+                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                href="#"
+                class="page-link"
+              >
+                &hellip;
+              </span>
+            {else}
+              <a
+                rel="{if $page.type === 'previous'}prev{elseif $page.type === 'next'}next{else}nofollow{/if}"
+                href="{$page.url}"
+                class="page-link {['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}"
+              >
+                {if $page.type === 'previous'}
+                  <span class="material-icons font-reset align-middle">keyboard_arrow_left</span>
+                  <span class="sr-only">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                {elseif $page.type === 'next'}
+                  <span class="material-icons font-reset align-middle">keyboard_arrow_right</span>
+                  <span class="sr-only">{l s='Next' d='Shop.Theme.Actions'}</span>
+                {else}
+                  {$page.page}
+                {/if}
+              </a>
+            {/if}
+          </li>
+        {/foreach}
+      </ul>
+    </nav>
  {/if}
 {/block}
--- a/falcon/templates/catalog/_partials/category-footer.tpl
+++ b/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>
--- a/falcon/templates/catalog/_partials/miniatures/product.tpl
+++ b/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}
Author	SHA1	Message	Date
Isabelle	4ca5500e5f	Merge branch 'feature/standard-styling' into feature/isabelle-edits	2025-12-23 09:35:48 +01:00
Isabelle	d5d1cd7874	Background and color utility classes & map	2025-12-22 12:02:19 +01:00
Isabelle	bae76ed030	Merge branch 'feature/standard-styling' into feature/isabelle-edits	2025-12-22 11:36:35 +01:00
Isabelle	871e42f4ba	Add gap and font-size function classes	2025-12-22 11:35:05 +01:00
Isabelle	cf37d8a257	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.	2025-12-22 10:49:47 +01:00