Join the Webstudio community

Updated last year

Changing Button Styles at Once in the UI Interface

At a glance

The community members are discussing the ability to change the styles of UI components, such as buttons, all at once. One community member notes that a feature called "tag styles" to style all buttons or links at once would be a nice addition, but this is not specific to the Radix library. Another community member shares that they have managed to apply animation styles to Radix components and will share the code. They also provide a link to a website where the animations can be seen, specifically on the mobile view of the hamburger menu.

Useful resources
for example if I want to change all of the button styles at once I can do it within the UI interface. perhaps it must be done through variables, i'm just not familiar with radix and haven't taken a look at the documentation
O
D
6 comments
generally we are still lacking a feature called "tag styles", basically a tag selector so you can style all buttons at once, all links at once etc.
its not specific to radix
that will be a very nice feature to have. for now I've managed to apply animation styles for the raddix components, i'll share in a bit.
mobile view, hamburger i've added key frame animation to the DialogContent component
<style>
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeOutOverlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes slideInContent {
from {
transform: translateX(-100%); /* Start off-screen to the left / } to { transform: translateX(0); / Slide in from the left / }}@keyframes slideOutContent { from { transform: translateX(0); / Start on-screen / } to { transform: translateX(-100%); / Slide out to the right */
}
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="closed"] {
animation:slideOutContent 300ms ease-in;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="closed"] {
animation: slideOutContent 300ms ease-in;
}


</style>
Add a reply
Sign up and join the conversation on Discord