react-wheel-menu/dist/index.css

React components & hooks for building a radial wheel menu

.wheel,.wheel-segment,.wheel-spoke,.wheel-layout,.wheel-label{box-sizing:border-box;margin:0;padding:0;border:0;background:none;appearance:none;list-style:none;text-decoration:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:normal;text-align:center;-webkit-tap-highlight-color:transparent}.wheel:focus,.wheel-segment:focus,.wheel-spoke:focus,.wheel-layout:focus,.wheel-label:focus{outline:none}.wheel,.wheel-segment,.wheel-spoke,.wheel-layout{overflow:hidden;overflow:clip}.wheel{position:relative;display:flex;justify-content:center;align-items:center;border-radius:50%;clip-path:circle(50%)}.wheel-segment{position:absolute;bottom:50%;left:50%;width:200%;height:auto;padding-bottom:200%;transform-origin:bottom left}.wheel-spoke{position:absolute;display:block;height:50%}.wheel-spoke--left{bottom:50%;left:50%;transform-origin:bottom left}.wheel-spoke--center{bottom:50%;transform-origin:bottom center}.wheel-spoke--right{bottom:50%;right:50%;transform-origin:bottom right}.wheel-layout{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform-origin:bottom}.wheel-segment>.wheel-layout{padding-top:25%;padding-bottom:50%}.wheel-layout--vertical{flex-direction:column-reverse}.wheel-layout--vertical.wheel-layout--start{justify-content:flex-start}.wheel-layout--vertical.wheel-layout--center{justify-content:center}.wheel-layout--vertical.wheel-layout--end{justify-content:flex-end}.wheel-layout--horizontal{flex-direction:row}.wheel-layout--horizontal.wheel-layout--start{justify-content:flex-end}.wheel-layout--horizontal.wheel-layout--center{justify-content:center}.wheel-layout--horizontal.wheel-layout--end{justify-content:flex-start}.wheel-label{display:flex;justify-content:center;align-items:center}.wheel-label--start{justify-content:flex-start}.wheel-label--center{justify-content:center}.wheel-label--end{justify-content:flex-end}