forked from crowetic/commerce
bigger clickable dots
This commit is contained in:
parent
1b3e4e7077
commit
03ca1e5f1f
@ -32,11 +32,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.positionIndicator {
|
.positionIndicator {
|
||||||
@apply bg-hover-1 hover:bg-hover-2 transition-colors w-3 h-3 rounded-full mx-2 focus:outline-none;
|
@apply rounded-full p-2;
|
||||||
|
|
||||||
|
/* :hover .dot {
|
||||||
|
@apply bg-hover-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus .dot {
|
||||||
|
@apply outline-none;
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
.positionIndicatorActive {
|
.dot {
|
||||||
@apply bg-white hover:bg-white;
|
@apply bg-hover-1 transition w-3 h-3 rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicator:hover .dot {
|
||||||
|
@apply bg-hover-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicator:focus {
|
||||||
|
@apply outline-none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicator:focus .dot {
|
||||||
|
@apply shadow-outline-blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicatorActive .dot {
|
||||||
|
@apply bg-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionIndicatorActive:hover .dot {
|
||||||
|
@apply bg-white;
|
||||||
}
|
}
|
||||||
/* sx={{
|
/* sx={{
|
||||||
width: '10px',
|
width: '10px',
|
||||||
|
@ -59,7 +59,9 @@ const ProductSlider: FC = ({ children }) => {
|
|||||||
onClick={() => {
|
onClick={() => {
|
||||||
slider.moveToSlideRelative(idx)
|
slider.moveToSlideRelative(idx)
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
<div className={s.dot} />
|
||||||
|
</button>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user