crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

cover full screen and center

Browse Source
This commit is contained in:
Julián Benegas
2020-10-22 20:08:47 -03:00
parent 44199be2e7
commit e59b59ef8d
5 changed files with 12 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/product/ProductSlider/ProductSlider.module.css
View File

@@ -5,7 +5,7 @@
.leftControl,
.rightControl {
@apply text-white absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
@apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
}
.leftControl {
@@ -13,11 +13,11 @@
}
.rightControl {
@apply right-6 rotate-180 transform;
@apply right-6;
}
.control {
@apply opacity-0 transition-all duration-150;
@apply opacity-0 transition duration-150;
}
.root:hover .control {

6
components/product/ProductSlider/ProductSlider.tsx
View File

@@ -1,6 +1,6 @@
import { ArrowLeft } from '@components/icon'
import { useKeenSlider } from 'keen-slider/react'
import React, { Children, FC, isValidElement, useState } from 'react'
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
import cn from 'classnames'
import s from './ProductSlider.module.css'
@@ -17,10 +17,10 @@ const ProductSlider: FC = ({ children }) => {
return (
<div className={s.root}>
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
<ArrowLeft />
<HiChevronLeft />
</button>
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
<ArrowLeft />
<HiChevronRight />
</button>
<div ref={ref} className="keen-slider h-full">
{Children.map(children, (child) => {