Replace bull with round icon

This commit is contained in:
Lim Chee Aun 2023-08-10 23:52:29 +08:00
parent 339b66f42f
commit 5b8744ac55
3 changed files with 12 additions and 6 deletions

View file

@ -1111,22 +1111,27 @@ button.carousel-dot {
backdrop-filter: blur(12px) invert(0.25); backdrop-filter: blur(12px) invert(0.25);
} }
button.carousel-dot { button.carousel-dot {
font-weight: bold;
backdrop-filter: none !important; backdrop-filter: none !important;
transition: all 0.2s;
} }
button.carousel-dot[disabled] { button.carousel-dot[disabled] {
pointer-events: none; pointer-events: none;
} }
button.carousel-dot:not(.active) { button.carousel-dot .icon {
transition: all 0.2s;
transform: scale(0.5);
}
button.carousel-dot:not(.active) .icon {
opacity: 0.5; opacity: 0.5;
} }
button.carousel-dot:not(.active):is(:hover, :focus) { button.carousel-dot:not(.active):is(:hover, :focus) .icon {
opacity: 1; opacity: 1;
} }
button.carousel-dot:is(.active, [disabled].active) { button.carousel-dot:is(.active, [disabled].active) {
opacity: 1; opacity: 1;
transform: scale(2.2) translateY(-0.5px); }
button.carousel-dot:is(.active, [disabled].active) .icon {
opacity: 1;
transform: scale(1);
} }
@media (hover: hover) { @media (hover: hover) {
.carousel-top-controls { .carousel-top-controls {

View file

@ -88,6 +88,7 @@ const ICONS = {
layout5: () => import('@iconify-icons/mingcute/layout-5-line'), layout5: () => import('@iconify-icons/mingcute/layout-5-line'),
announce: () => import('@iconify-icons/mingcute/announcement-line'), announce: () => import('@iconify-icons/mingcute/announcement-line'),
alert: () => import('@iconify-icons/mingcute/alert-line'), alert: () => import('@iconify-icons/mingcute/alert-line'),
round: () => import('@iconify-icons/mingcute/round-fill'),
}; };
function Icon({ function Icon({

View file

@ -180,7 +180,7 @@ function MediaModal({
carouselRef.current.focus(); carouselRef.current.focus();
}} }}
> >
&bull; <Icon icon="round" size="s" />
</button> </button>
))} ))}
</span> </span>