fix: make the control dots change in size when dimensions changed via CSS

FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.

https://commerce.nearform.com/open-source/nuka-carousel

Other

3.02k stars 597 forks source link

fix: make the control dots change in size when dimensions changed via CSS #964

Closed fritz-c closed 1 year ago

fritz-c commented 1 year ago

Description

By giving the paging dot SVG a viewBox, it can respond to changes in CSS width. e.g., the following CSS could be used to increase the size of the dots from 6x6px to 20x20px:

.paging-dot {
  height: 20px;
  width: 20px;
}

Before:

After:

Fixes #962

Type of Change

[x] Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Manually

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
nuka-carousel	✅ Ready (Inspect)	Visit Preview	Sep 6, 2022 at 4:18PM (UTC)