Compare commits
7 Commits
feature/ex
...
411e20133e
| Author | SHA1 | Date | |
|---|---|---|---|
| 411e20133e | |||
| e6be4f4323 | |||
| 6827758b2f | |||
| 57c34d3aa2 | |||
| c11507d628 | |||
| 17dc652bc6 | |||
| 9faf691155 |
@ -1,21 +1,3 @@
|
||||
// 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;
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI",
|
||||
roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-family-sans-serif: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$headings-font-family: $font-family-sans-serif;
|
||||
|
||||
$font-size-base: rem-calc(14px);
|
||||
$font-size-base: rem-calc(16px);
|
||||
$font-size-lg: $font-size-base * 1.125;
|
||||
$font-size-sm: $font-size-base * 0.875;
|
||||
$font-size-xs: $font-size-base * 0.6875;
|
||||
$font-size-sm: $font-size-base * .875;
|
||||
$font-size-xs: $font-size-base * .6875;
|
||||
|
||||
$font-weight-lighter: 200;
|
||||
$font-weight-light: 300;
|
||||
|
||||
19
falcon/_dev/css/custom.scss
Normal file
19
falcon/_dev/css/custom.scss
Normal file
@ -0,0 +1,19 @@
|
||||
// NOTE: All bootstrap overrides have been configured under the abstracts/variables/bootstrap folder.
|
||||
|
||||
//Abstracts: Things used throughout the site such as utility classes and generic overrides.
|
||||
//@import "custom/abstracts/base";
|
||||
//@import "custom/abstracts/utilities";
|
||||
|
||||
// Components: parts of the theme itself that are not associated with a module.
|
||||
//@import "custom/components/";
|
||||
|
||||
// Modules: Styling for specific modules.
|
||||
//@import "custom/modules/";
|
||||
|
||||
//Layouts: Parts of a page, such as the header, footer, etc.
|
||||
//@import "custom/layout/header";
|
||||
//@import "custom/layout/footer";
|
||||
|
||||
// Pages
|
||||
//@import "custom/pages/category";
|
||||
//@import "custom/pages/product";
|
||||
@ -1,3 +1,3 @@
|
||||
@import "abstracts/index";
|
||||
@import "theme/index";
|
||||
@import "theme/custom/custom";
|
||||
@import "custom";
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
max-width: inherit;
|
||||
padding: map.get($spacers, 2);
|
||||
font-weight: 700;
|
||||
color: $gray-800;
|
||||
white-space: nowrap;
|
||||
border-radius: $border-radius;
|
||||
@include font-size($font-size-base);
|
||||
@ -44,11 +45,13 @@
|
||||
}
|
||||
|
||||
@include hover-focus() {
|
||||
color: $primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: map.get($spacers, 1);
|
||||
color: $primary;
|
||||
@include font-size(26px);
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-right: map.get($spacers, 2);
|
||||
|
||||
@ -1,35 +1,22 @@
|
||||
/*
|
||||
This is the main custom SCSS file for the Falcon theme.
|
||||
/* 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";
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/mixins";
|
||||
//@import "abstracts/utilities";
|
||||
//@import "abstracts/mixins";
|
||||
|
||||
// Components: parts of the theme itself that are not associated with a module.
|
||||
//@import "components/buttons";
|
||||
@import "components/forms";
|
||||
|
||||
// Modules: Styling for specific modules.
|
||||
//@import "modules/";
|
||||
|
||||
//Layouts: Parts of a page, such as the header, footer, etc.
|
||||
//@import "layout/footer";
|
||||
@import "layout/header";
|
||||
@import "layout/left-column";
|
||||
@import "layout/swiper";
|
||||
//@import "layout/header";
|
||||
|
||||
// Pages
|
||||
//@import "pages/checkout";
|
||||
//@import "pages/home";
|
||||
//@import "pages/listing";
|
||||
//@import "pages/product";
|
||||
|
||||
@ -1,41 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
@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);
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-spacer {
|
||||
@extend .section-spacer-both;
|
||||
margin-bottom: unset;
|
||||
&--small {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
.field-password-policy .input-group.js-parent-focus {
|
||||
> * {
|
||||
max-height: rem-calc(39px);
|
||||
}
|
||||
.form-control {
|
||||
height: unset;
|
||||
}
|
||||
.input-group-append .btn {
|
||||
border-top-right-radius: $border-radius !important;
|
||||
border-bottom-right-radius: $border-radius !important;
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.header-top__row {
|
||||
flex-wrap: wrap;
|
||||
.header-top__block--search {
|
||||
@include media-breakpoint-down(sm) {
|
||||
order: 1;
|
||||
}
|
||||
.js-search-form {
|
||||
max-width: unset;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
#left-column {
|
||||
.list-group-item,
|
||||
.list-group-item-action-dropdown-link,
|
||||
label {
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
color: $secondary;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.swiper-slide {
|
||||
height: auto;
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
<div class="footer-bottom py-3">
|
||||
<div class="container d-flex justify-content-between align-items-center">
|
||||
<div class="copyright">
|
||||
<span>
|
||||
{l
|
||||
s='Copyright © %year% %shop%'
|
||||
sprintf=['%year%' => $smarty.now|date_format:"%Y", '%shop%' => $shop.name|capitalize]
|
||||
d='Shop.Theme.Footer'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<a href="https://dewebsmid.nl/prestashop/" rel="noopener" target="_blank">
|
||||
{l s='PrestaShop' d='Shop.Theme.Footer'}
|
||||
</a>
|
||||
<div class="privacy">
|
||||
<a href="content/3-gebruiks-voorwaarden">
|
||||
{l s='Terms & Conditions' d='Shop.Theme.Footer'}
|
||||
</a>
|
||||
<span class="mx-2"> | </span>
|
||||
<a href="content/1-levering">
|
||||
{l s='Privacy policy' d='Shop.Theme.Footer'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,7 +29,7 @@
|
||||
{/block}
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-container pb-0">
|
||||
<div class="footer-container">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{block name='hook_footer'}
|
||||
@ -42,5 +42,4 @@
|
||||
{/block}
|
||||
</div>
|
||||
</div>
|
||||
{include file='_partials/footer-copyright.tpl'}
|
||||
</div>
|
||||
|
||||
@ -29,14 +29,24 @@
|
||||
{/block}
|
||||
|
||||
{block name='header_nav'}
|
||||
|
||||
<nav class="header-nav border-bottom bg-light py-1 d-none d-md-block">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
{hook h='displayNav1'}
|
||||
{hook h='displayNav2'}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{/block}
|
||||
|
||||
{block name='header_top'}
|
||||
<div class="js-header-top-wrapper">
|
||||
|
||||
<div class="header-top js-header-top">
|
||||
<div class="header-top__content pb-md-0 py-2">
|
||||
<div class="header-top__content pt-md-3 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">
|
||||
@ -48,17 +58,12 @@
|
||||
data-target="#mobile_top_menu_wrapper"
|
||||
>
|
||||
<div class="header-top__icon-container">
|
||||
{capture name="svg_output"}{svg_icon file='hamburger-menu.svg'}{/capture}
|
||||
{if $smarty.capture.svg_output}
|
||||
{$smarty.capture.svg_output nofilter}
|
||||
{else}
|
||||
<span class="header-top__icon material-icons">menu</span>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col col-md-auto col header-top__block header-top__block--logo">
|
||||
<div class="col-md-4 col header-top__block header-top__block--logo">
|
||||
<a href="{$urls.pages.index}">
|
||||
{images_block webpEnabled=$webpEnabled}
|
||||
<img
|
||||
@ -74,15 +79,13 @@
|
||||
{/images_block}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{hook h='displayTop'}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{hook h='displayNavFullWidth'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -49,9 +49,6 @@
|
||||
|
||||
<div class="row product-container js-product-container">
|
||||
<div class="col-md-5 mb-4">
|
||||
{block name='page_header'}
|
||||
<p class="h1 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
|
||||
{/block}
|
||||
{block name='page_content_container'}
|
||||
{block name='page_content'}
|
||||
<div class="position-relative">
|
||||
@ -67,8 +64,7 @@
|
||||
<div class="col-md-7 mb-4">
|
||||
{block name='page_header_container'}
|
||||
{block name='page_header'}
|
||||
<h1 class="h1 d-none d-md-block">{block name='page_title'}{$product.name}{/block}</h1>
|
||||
<p class="h5 d-block d-md-none">{block name='page_title'}{$product.name}{/block}</p>
|
||||
<h1 class="h1">{block name='page_title'}{$product.name}{/block}</h1>
|
||||
{/block}
|
||||
{/block}
|
||||
{block name='product_prices'}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
{/block}
|
||||
{block name='modal_close'}
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
{svg_icon file='x.svg' width="24" height="24"}
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
{/block}
|
||||
</div>
|
||||
|
||||
@ -29,11 +29,7 @@
|
||||
{/block}
|
||||
|
||||
{block name='page_content'}
|
||||
<p>
|
||||
<strong>
|
||||
{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}
|
||||
</strong>
|
||||
</p>
|
||||
<h6>{l s='Here are the orders you\'ve placed since your account was created.' d='Shop.Theme.Customeraccount'}</h6>
|
||||
|
||||
{if $orders}
|
||||
<table class="table table-striped table-bordered hidden-sm-down">
|
||||
@ -44,7 +40,7 @@
|
||||
<th>{l s='Total price' d='Shop.Theme.Checkout'}</th>
|
||||
<th class="hidden-md-down">{l s='Payment' d='Shop.Theme.Checkout'}</th>
|
||||
<th class="hidden-md-down">{l s='Status' d='Shop.Theme.Checkout'}</th>
|
||||
<th>{l s='Actions' d='Shop.Theme.Checkout'}</th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -70,14 +66,16 @@
|
||||
{$order.history.current.ostate_name}
|
||||
</span>
|
||||
</td>
|
||||
<td class="order-actions align-middle d-flex">
|
||||
<td class="text-sm-center order-actions align-middle">
|
||||
<a class="view-order-details-link btn btn-sm btn-primary" href="{$order.details.details_url}" data-link-action="view-order-details">
|
||||
{l s='Details' d='Shop.Theme.Customeraccount'}
|
||||
</a>
|
||||
{if $order.details.reorder_url}
|
||||
<a class="reorder-link btn btn-sm btn-secondary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
|
||||
<div class="col-sm-6 mt-2">
|
||||
<a class="reorder-link btn btn-sm btn-primary" href="{$order.details.reorder_url}" data-link-action="view-order-details">
|
||||
{l s='Reorder' d='Shop.Theme.Actions'}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user