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

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

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

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

@ -1,3 +1,21 @@
// 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}

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

@ -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 class="row">
<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'}
@ -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'}

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>