diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 2deaf9553..4573efe15 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -4,65 +4,6 @@ height: 100% !important; } -.root:hover { - & .header .name span, - & .header .price, - & .wishlistButton { - @apply bg-secondary text-secondary; - } - - &:nth-child(6n + 1) .header .name span, - &:nth-child(6n + 1) .header .price, - &:nth-child(6n + 1) .wishlistButton { - @apply bg-violet text-white; - } - - &:nth-child(6n + 5) .header .name span, - &:nth-child(6n + 5) .header .price, - &:nth-child(6n + 5) .wishlistButton { - @apply bg-blue text-white; - } - - &:nth-child(6n + 3) .header .name span, - &:nth-child(6n + 3) .header .price, - &:nth-child(6n + 3) .wishlistButton { - @apply bg-pink text-white; - } - - &:nth-child(6n + 6) .header .name span, - &:nth-child(6n + 6) .header .price, - &:nth-child(6n + 6) .wishlistButton { - @apply bg-cyan text-white; - } -} - -.header { - @apply transition-colors ease-in-out duration-500 - absolute top-0 left-0 z-20 pr-16; -} - -.header .name { - @apply pt-0 max-w-full w-full leading-extra-loose - transition-colors ease-in-out duration-500; - font-size: 2rem; - letter-spacing: 0.4px; -} - -.header .name span { - @apply py-4 px-6 bg-primary text-primary font-bold - transition-colors ease-in-out duration-500; - font-size: inherit; - letter-spacing: inherit; - box-decoration-break: clone; - -webkit-box-decoration-break: clone; -} - -.header .price { - @apply pt-2 px-6 pb-4 text-sm bg-primary text-accent-9 - font-semibold inline-block tracking-wide - transition-colors ease-in-out duration-500; -} - .imageContainer { @apply relative flex items-center justify-center bg-primary-2 mb-4; padding: 12% 15%; @@ -72,39 +13,7 @@ padding-bottom: 100%; } -.root .wishlistButton { - @apply top-0 right-0 z-30 absolute; -} - .typeIcon { @apply absolute bg-accent-2 rounded-full p-1.5 -bottom-2 right-2.5; font-size: 0; } - -/* Variant Simple */ -.simple .header .name { - @apply pt-2 text-lg leading-10 -mt-1; -} - -.simple .header .price { - @apply text-sm; -} - -/* Variant Slim */ -.slim { - @apply bg-transparent relative overflow-hidden - box-border; -} - -.slim .header { - @apply absolute inset-0 flex items-center justify-end mr-8 z-20; -} - -.slim span { - @apply bg-accent-9 text-accent-0 inline-block p-3 - font-bold text-xl break-words; -} - -.root:global(.secondary) .header span { - @apply bg-accent-0 text-accent-9; -}