blue ball styling can't be changing via css

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

blue ball styling can't be changing via css #712

Open guyhagemans opened 2 years ago

guyhagemans commented 2 years ago

Environments

Framework name: svelte
Framework version: latest
Moveable Component version: 0.25.0
Testable Address(optional): no

Description

we're trying to hide blue ball/moveable-n item. However we can't get any styling to be applied on this item. please advise.

daybrush commented 2 years ago

@guyhagemans

Use renderDirections prop renderDirections={["e", "s", "w", "ne", "nw", "se", "sw"]}

guyhagemans commented 2 years ago

Sorry I wasn't clear in my first message. We need the N direction in order for the component to resize upwards, but we'd like to restyle the blue circle that comes with it. Somehow when we add any css it doesn't do anything.

daybrush commented 2 years ago

@guyhagemans

You will have to use css depth deeply or use !important.

https://codesandbox.io/s/laughing-danny-p8xd4s

guyhagemans commented 2 years ago

thank you so much for the example. Do you maybe have an example in Svelte? We can't get it to work in Svelte. We tried via the id selector and the !important.

guyhagemans commented 2 years ago

Ah we figured it out, we had to se :global(.rCS1rb3a7w .moveable-control)

thanks again for your help though.