diff --git a/app/[locale]/globals.css b/app/[locale]/globals.css index 7a899dedd..f82a0ee9b 100644 --- a/app/[locale]/globals.css +++ b/app/[locale]/globals.css @@ -36,199 +36,4 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-x: none; -} - -/* COMPONENTS */ -.glider { - scrollbar-width: none; - -ms-overflow-style: none; -} - -.glider::-webkit-scrollbar { - display: none; -} - -.glider-dots { - @apply flex !space-x-[2px] !mt-8; -} - -.glider-dot { - @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16; -} - -.glider-dot.active { - @apply after:!bg-high-contrast; -} - -/* Glider slider. */ -.glider-prev { - @apply text-high-contrast !right-12 !-top-10 !left-auto lg:!right-16 lg:!-top-12 2xl:!-top-16 2xl:!right-[100px] !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110; -} - -.glider-next { - @apply text-high-contrast !right-4 !-top-10 lg:!right-8 lg:!-top-12 2xl:!-top-16 2xl:!right-16 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110; -} - -.pdp .glider-prev { - @apply text-high-contrast absolute !left-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden; -} - -.pdp .glider-next { - @apply text-high-contrast absolute !right-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden; -} - -/* Dynamic content */ -.dynamic-content > :not(.hero) { - @apply my-16 lg:my-24; -} - -.dynamic-content > :first-child { - @apply mt-0 md:mt-0 lg:mt-0; -} - -.dynamic-content > :last-child { - @apply mb-16 lg:mb-24; -} - -.dynamic-content .dynamic-content { - @apply px-0 md:px-0; -} - -.dynamic-content .dynamic-content > { - @apply my-0 md:my-0 lg:my-0; -} - -.dynamic-content .dynamic-content > :last-child { - @apply my-0 md:my-0 lg:my-0; -} - -/* ALGOLIA SEARCH */ -.ais-SearchBox-form { - @apply w-full relative; -} - -.ais-SearchBox-input { - @apply h-[44px] pl-10 bg-ui w-full; -} - -.ais-SearchBox-input::placeholder { - @apply text-high-contrast text-opacity-50; -} - -.ais-SearchBox-submit { - @apply absolute left-0 flex items-center justify-center w-12 h-12 top-1/2 transform -translate-y-1/2; -} - -.ais-SearchBox-submit svg { - @apply w-4 h-4; -} - -.ais-SearchBox-reset:not([hidden]) { - @apply absolute right-[3px] bg-ui flex items-center justify-center w-12 h-8 top-1/2 transform -translate-y-1/2; -} - -.ais-SearchBox-reset svg { - @apply w-3 h-3; -} - -.ais-RefinementList-item { - @apply mt-1 first:mt-0; -} -.ais-RefinementList-label { - @apply flex items-center cursor-pointer text-sm; -} - -.ais-RefinementList-checkbox { - @apply w-4 h-4; -} - -.ais-RefinementList-labelText { - @apply ml-2; -} - -.ais-RefinementList-count { - @apply ml-2 bg-ui h-5 w-5 flex items-center justify-center text-xs rounded-full; -} - -.ais-CurrentRefinements-label { - @apply uppercase; -} - -.ais-Hits-list { - @apply grid grid-cols-2 gap-4 lg:grid-cols-4 items-start; -} - -.ais-Pagination-list { - @apply flex justify-center -space-x-px mt-8; -} - -.ais-Pagination-link { - @apply flex h-12 w-12 items-center justify-center bg-white border border-ui-border; -} - -.ais-Pagination-link--selected { - @apply bg-ui font-bold; -} - -.ais-ClearRefinements-button { - @apply inline-flex py-3 cursor-pointer px-6 border border-ui-border; -} - -.ais-ClearRefinements-button--disabled { - @apply opacity-50 cursor-not-allowed; -} - -/* ALGOLIA AUTOCOMPLETE */ -.aa-DetachedContainer { - @apply !shadow-none; -} - -.aa-DetachedContainer--modal { - @apply lg:!top-4 !rounded-none; -} - -.aa-DetachedFormContainer { - @apply !border-none !px-4; -} - -.aa-DetachedSearchButton { - @apply !w-10 !h-10 !p-0 cursor-pointer items-center justify-center !border-none; -} - -.aa-DetachedSearchButtonIcon, -.aa-SubmitIcon { - @apply pointer-events-none; -} - -.aa-DetachedSearchButtonPlaceholder { - @apply sr-only; -} - -.aa-Form { - @apply !rounded-none !bg-white !border-ui-border; -} - -.aa-SubmitButton { - @apply !flex !items-center !justify-center !p-0 !h-10 !w-10 lg:!w-10; -} - -.aa-SubmitIcon { - @apply !text-high-contrast; -} - -.aa-Panel { - @apply !rounded-none border border-ui-border !shadow-none !p-0; -} - -.aa-PanelLayout { - @apply !p-0; -} - -.aa-Item { - @apply !px-4 !py-2 lg:!px-4; -} - -.aa-Item[aria-selected='true'] { - @apply !bg-ui; -} - +} \ No newline at end of file diff --git a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx index 33f1b3a7b..a38a22f41 100644 --- a/components/layout/dynamic-content-manager/dynamic-content-manager.tsx +++ b/components/layout/dynamic-content-manager/dynamic-content-manager.tsx @@ -1,9 +1,10 @@ 'use client' -import { Info } from 'lucide-react' -import dynamic from 'next/dynamic' +import { Info } from 'lucide-react'; +import dynamic from 'next/dynamic'; +import './dynamic-content.css'; -import Hero from 'components/modules/hero' +import Hero from 'components/modules/hero'; const Slider = dynamic(() => import('components/modules/slider')) const BlurbSection = dynamic(() => import('components/modules/blurb-section')) const FilteredProductList = dynamic( diff --git a/components/layout/dynamic-content-manager/dynamic-content.css b/components/layout/dynamic-content-manager/dynamic-content.css new file mode 100644 index 000000000..644427af9 --- /dev/null +++ b/components/layout/dynamic-content-manager/dynamic-content.css @@ -0,0 +1,23 @@ +.dynamic-content > :not(.hero) { + @apply my-16 lg:my-24; +} + +.dynamic-content > :first-child { + @apply mt-0 md:mt-0 lg:mt-0; +} + +.dynamic-content > :last-child { + @apply mb-16 lg:mb-24; +} + +.dynamic-content .dynamic-content { + @apply px-0 md:px-0; +} + +.dynamic-content .dynamic-content > { + @apply my-0 md:my-0 lg:my-0; +} + +.dynamic-content .dynamic-content > :last-child { + @apply my-0 md:my-0 lg:my-0; +} \ No newline at end of file diff --git a/components/modules/carousel/carousel.css b/components/modules/carousel/carousel.css new file mode 100644 index 000000000..27f162498 --- /dev/null +++ b/components/modules/carousel/carousel.css @@ -0,0 +1,37 @@ +/* Glider slider. */ +.glider { + scrollbar-width: none; + -ms-overflow-style: none; +} + +.glider::-webkit-scrollbar { + display: none; +} + +.glider-dots { + @apply flex !space-x-[2px] !mt-8; +} + +.glider-dot { + @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16; +} + +.glider-dot.active { + @apply after:!bg-high-contrast; +} + +.glider-prev { + @apply text-high-contrast !right-12 !-top-10 !left-auto lg:!right-16 lg:!-top-12 2xl:!-top-16 2xl:!right-[100px] !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110; +} + +.glider-next { + @apply text-high-contrast !right-4 !-top-10 lg:!right-8 lg:!-top-12 2xl:!-top-16 2xl:!right-16 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110; +} + +.pdp .glider-prev { + @apply text-high-contrast absolute !left-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden; +} + +.pdp .glider-next { + @apply text-high-contrast absolute !right-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden; +} \ No newline at end of file diff --git a/components/modules/carousel/carousel.tsx b/components/modules/carousel/carousel.tsx index 0beaeff67..0d04c18bf 100644 --- a/components/modules/carousel/carousel.tsx +++ b/components/modules/carousel/carousel.tsx @@ -1,7 +1,8 @@ -import 'glider-js/glider.min.css' -import { ArrowLeft, ArrowRight } from 'lucide-react' -import React from 'react' -import Glider from 'react-glider' +import 'glider-js/glider.min.css'; +import { ArrowLeft, ArrowRight } from 'lucide-react'; +import React from 'react'; +import Glider from 'react-glider'; +import './carousel.css'; export interface CarouselItemProps { children: React.ReactNode diff --git a/components/product/price.tsx b/components/product/price.tsx index 42098a172..fc802ff42 100644 --- a/components/product/price.tsx +++ b/components/product/price.tsx @@ -1,12 +1,14 @@ const Price = ({ + className, amount, currencyCode, ...props }: { amount: string; currencyCode: string | 'SEK' | 'GPB'; + className?: string; } & React.ComponentProps<'p'>) => ( -
+
{`${new Intl.NumberFormat(undefined, {
style: 'currency',
diff --git a/components/product/product-view.tsx b/components/product/product-view.tsx
index a166cf96e..d9f1fc817 100644
--- a/components/product/product-view.tsx
+++ b/components/product/product-view.tsx
@@ -30,7 +30,7 @@ export default function ProductView({product, relatedProducts }: ProductViewProp
hasDots={false}
gliderClasses={'lg:px-8 2xl:px-16'}
slidesToScroll={1}
- slidesToShow={1.025}
+ slidesToShow={images.length > 1 ? 1.0125 : 1}
responsive={{
breakpoint: 1024,
settings: {
diff --git a/components/ui/product-card/product-card.tsx b/components/ui/product-card/product-card.tsx
index a44f5d0fa..a70aabf62 100644
--- a/components/ui/product-card/product-card.tsx
+++ b/components/ui/product-card/product-card.tsx
@@ -62,11 +62,13 @@ const ProductCard: FC