diff --git a/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl b/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl index b6d80ae50..e2098e97d 100644 --- a/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl +++ b/modules/ps_bestsellers/views/templates/hook/ps_bestsellers.tpl @@ -5,7 +5,7 @@
{include file='components/section-title.tpl' title={l s='Best Sellers' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
{l s='All best sellers' d='Shop.Theme.Catalog'} diff --git a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl index 140f7000a..251ea9b02 100644 --- a/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl +++ b/modules/ps_categoryproducts/views/templates/hook/ps_categoryproducts.tpl @@ -10,6 +10,6 @@ {include file='components/section-title.tpl' title={l s='%s other products in the same category' sprintf=[$products|@count] d='Shop.Theme.Catalog'}} {/if} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
diff --git a/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl b/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl index 7f65074e9..1c005f422 100644 --- a/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl +++ b/modules/ps_crossselling/views/templates/hook/ps_crossselling.tpl @@ -6,6 +6,6 @@
{include file='components/section-title.tpl' title={l s='Customers who bought this product also bought:' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
diff --git a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl index 822b44943..796b01b65 100644 --- a/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl +++ b/modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl @@ -5,7 +5,7 @@
{include file='components/section-title.tpl' title={l s='Popular Products' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
diff --git a/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl b/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl index 09c242283..a3e706dc9 100644 --- a/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl +++ b/modules/ps_newproducts/views/templates/hook/ps_newproducts.tpl @@ -6,7 +6,7 @@
{include file='components/section-title.tpl' title={l s='New products' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
{l s='All new products' d='Shop.Theme.Catalog'} diff --git a/modules/ps_specials/views/templates/hook/ps_specials.tpl b/modules/ps_specials/views/templates/hook/ps_specials.tpl index e21832b73..871dc9e64 100644 --- a/modules/ps_specials/views/templates/hook/ps_specials.tpl +++ b/modules/ps_specials/views/templates/hook/ps_specials.tpl @@ -6,7 +6,7 @@
{include file='components/section-title.tpl' title={l s='On sale' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
{l s='All sale products' d='Shop.Theme.Catalog'} diff --git a/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl b/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl index 094ea9670..eb84ac445 100644 --- a/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl +++ b/modules/ps_viewedproduct/views/templates/hook/ps_viewedproduct.tpl @@ -5,6 +5,6 @@
{include file='components/section-title.tpl' title={l s='Viewed products' d='Shop.Theme.Catalog'}} - {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-6 col-lg-4 col-xl-3'} + {include file='catalog/_partials/productlist.tpl' products=$products productClass='col-12 col-xs-6 col-lg-4 col-xl-3'}
diff --git a/src/scss/abstract/variables/overrides/_overrides.scss b/src/scss/abstract/variables/overrides/_overrides.scss index 010e3c466..73e90bf97 100644 --- a/src/scss/abstract/variables/overrides/_overrides.scss +++ b/src/scss/abstract/variables/overrides/_overrides.scss @@ -1,22 +1,15 @@ -// IT IS FORBIDDEN TO USE REFERENCES TO BS5 VARIABLES BECAUSE THEY ARE NOT YET DECLARED. -//$primary: #16181c; -//secondary: #f39d72; -//success: #21834d; -//warning: #ff9a52; -//danger: #ff4c4c; +// Bootstrap variables, maps overrides -//gray-100: #f6f6f6; -//gray-200: #eaebec; -//gray-300: #b3c7cd; -//gray-600: #7a7a7a; -//gray-700: #697180; -//gray-800: #363a41; -//gray-900: #232323; - -// THESE ARE FINE BECAUSE WE ARE REDEFINING THEM IN THIS SHEET -//text-muted: $gray-600; - -//body-color: $gray-800; +// Breakpoints +$grid-breakpoints: ( + "xxs": 0, + "xs": 360px, // Add breakpoint to give us flexibility on small devices + "sm": 576px, + "md": 768px, + "lg": 992px, + "xl": 1200px, + "xxl": 1400px +); // Toasts $toast-border-width: 0; diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss index d0769ce57..296e723c8 100644 --- a/src/scss/custom/components/category/_pagination.scss +++ b/src/scss/custom/components/category/_pagination.scss @@ -7,4 +7,58 @@ $component-name: pagination; font-size: 1rem; color: var(--bs-gray-600); } + + @include media-breakpoint-down(sm) { + position: relative; + margin-bottom: 3.5rem; + + .page-item { + &:nth-child(2) { + .page-link { + border-top-left-radius: var(--bs-pagination-border-radius); + border-bottom-left-radius: var(--bs-pagination-border-radius); + } + } + + &:nth-last-child(2) { + .page-link { + border-top-right-radius: var(--bs-pagination-border-radius); + border-bottom-right-radius: var(--bs-pagination-border-radius); + } + } + + &.disabled { + .page-link { + padding-inline: 0.375rem; + } + } + + &:has(.previous), + &:has(.next) { + position: absolute; + top: calc(100% + 0.5rem); + transform-origin: center; + } + + &:has(.previous) { + left: 50%; + transform: translateX(calc(-100% - 0.25rem)); + } + + &:has(.next) { + right: 50%; + transform: translateX(calc(100% + 0.25rem)); + } + } + + .page-link { + padding-inline: 0.625rem; + + &.previous, + &.next { + padding: 0.5rem; + border-radius: 50%; + } + } + } } diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl index 16bda5e95..ef99b5891 100644 --- a/templates/_partials/pagination.tpl +++ b/templates/_partials/pagination.tpl @@ -16,25 +16,40 @@