search

uvarov-frontend / vanilla-calendar-pro

Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
https://vanilla-calendar.pro
MIT License
427 stars 56 forks source link

Firefox v52 is unable to display previous/next arrows due to missing mask-image support. #185

Closed whataboutpereira closed 7 months ago

whataboutpereira commented 7 months ago

Firefox v52 is also missing the previous/next arrows because of missing mask-image support.

image

That could be fixed by using the SVG from mask-image inside the <button> elements and changing their fill color on hover.

<button type="button" class="vanilla-calendar-arrow vanilla-calendar-arrow_next" data-calendar-arrow="next">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 16c-.3 0-.5-.1-.7-.3l-6-6c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l5.3 5.3 5.3-5.3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-6 6c-.2.2-.4.3-.7.3z"></path>
    </svg>
</button>
[data-calendar-theme="light"] .vanilla-calendar-arrow {
    --tw-bg-opacity: 1;
    fill: rgb(15 23 42 / var(--tw-bg-opacity));
}

[data-calendar-theme="light"] .vanilla-calendar-arrow:hover {
    --tw-bg-opacity: 1;
    fill: rgb(100 116 139 / var(--tw-bg-opacity));
}

.vanilla-calendar-arrow.vanilla-calendar-arrow_prev {
    transform: rotate(90deg);
}

.vanilla-calendar-arrow.vanilla-calendar-arrow_next {
    transform: rotate(-90deg);
}
uvarov-frontend commented 7 months ago

I've used svg inside button before, but it interferes with arrow customization. For example, if you style the calendar in your own way, then the arrows will be your own, you will have to hide the svg in the button via css. But in fact, they will all still exist. This is why the arrows are made using css, so that they can be easily reassigned.