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

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

Browse Source
This commit is contained in:
Isabelle Oving - Anno
2025-12-31 17:23:51 +01:00
parent ea6ebb4df1 d5d30616f0
commit b895c40030
10 changed files with 190 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss
View File

@ -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,,
);

24
falcon/_dev/css/abstracts/variables/bootstrap/_grid.scss
View File

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

2
falcon/_dev/css/theme/custom/_custom.scss
View File

@ -10,6 +10,8 @@ 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/functions";
@import "abstracts/mixins";
@import "abstracts/utilities";
//@import "abstracts/base";

17
falcon/_dev/css/theme/custom/abstracts/_functions.scss Normal file
View File

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

2
falcon/_dev/css/theme/custom/abstracts/_mixins.scss
View File

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

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

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

14
falcon/templates/_partials/header.tpl
View File

@ -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">

17
falcon/templates/index.tpl
View File

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

127
falcon/templates/layouts/layout-both-columns.tpl
View File

@ -25,101 +25,96 @@
<!doctype html>
<html lang="{$language.locale}">
<head>
<head>
{block name='head'}
{include file='_partials/head.tpl'}
{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'}
{hook h='displayAfterBodyOpeningTag'}
{/block}
<main class="l-main">
{block name='product_activation'}
{include file='catalog/_partials/product-activation.tpl'}
{/block}
<header id="header" class="l-header">
{block name='header'}
{include file='_partials/header.tpl'}
{/block}
</header>
<section id="wrapper">
{block name='notifications'}
{include file='_partials/notifications.tpl'}
{block name='product_activation'}
{include file='catalog/_partials/product-activation.tpl'}
{/block}
{hook h="displayWrapperTop"}
<div class="container">
{block name='breadcrumb'}
{include file='_partials/breadcrumb.tpl'}
{/block}
<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'}
{hook h='displayLeftColumnProduct' product=$product category=$category}
{else}
{hook h="displayLeftColumn"}
{/if}
</div>
<header id="header" class="l-header">
{block name='header'}
{include file='_partials/header.tpl'}
{/block}
</header>
{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"}
{block name="content"}
<p>Hello world! This is HTML5 Boilerplate.</p>
<section id="wrapper">
{block name='notifications'}
{include file='_partials/notifications.tpl'}
{/block}
{hook h="displayWrapperTop"}
<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}
{hook h="displayContentWrapperBottom"}
</div>
{/block}
<div {if $page.page_name != 'index' || !isset($page.body_classes['layout-full-width'])}class="row"{/if}>
{block name="left_column"}
<div id="left-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'}
{hook h='displayLeftColumnProduct' product=$product category=$category}
{else}
{hook h="displayLeftColumn"}
{/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"}
{block name="content"}
<p>Hello world! This is HTML5 Boilerplate.</p>
{/block}
{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'}
{hook h='displayRightColumnProduct'}
{else}
{hook h="displayRightColumn"}
{/if}
</div>
{/block}
</div>
</div>
{hook h="displayWrapperBottom"}
</section>
{block name="right_column"}
<div id="right-column" class="col-12 col-md-4 col-lg-3">
{if $page.page_name == 'product'}
{hook h='displayRightColumnProduct'}
{else}
{hook h="displayRightColumn"}
{/if}
</div>
<footer id="footer" class="l-footer js-footer">
{block name="footer"}
{include file="_partials/footer.tpl"}
{/block}
</div>
</div>
{hook h="displayWrapperBottom"}
</section>
<footer id="footer" class="l-footer js-footer">
{block name="footer"}
{include file="_partials/footer.tpl"}
{/block}
</footer>
</footer>
</main>
{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}
</body>
</body>
</html>

2
falcon/templates/layouts/layout-full-width.tpl
View File

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