Shared Styles
The 📁 base/_shared-styles.scss file contains CSS Variables storing style rules that apply to multiple components.
⚠️ The files inside the base/ folder contain essential CSS rules and utility classes. We suggest you don't modify them. Use the custom-style/ folder to add your own style.
Radius Variables #
| Variable | Description |
|---|---|
--radius-sm |
Equal to half the border radius base size. |
--radius-md |
Equal to the border radius base size. |
--radius-lg |
Equal to twice the border radius base size. |
You can use these CSS variables to set the border-radius of your elements.
To modify the border radius base size, you can change the value of the --radius variable inside the 📁 custom-style/_shared-styles.scss file (default value is 0.25em). Changing the value of the --radius variable will automatically update the values of the --radius-{size} variables.
Here's an example of how to use a radius variable:
.component {
border-radius: var(--radius-sm);
}Box Shadow Variables #
| Variable | Description |
|---|---|
--shadow-xs |
Used to create a lower depth effect. |
--shadow-sm |
Used to create a low depth effect. |
--shadow-md |
Used to create a medium depth effect. |
--shadow-lg |
Used to create a high depth effect. |
--shadow-xl |
Used to create a higher depth effect. |
Here's an example of how to use a shadow variable:
.component {
box-shadow: var(--shadow-md);
}Timing Function Variables #
| Variable | Description |
|---|---|
--bounce |
Used to create a bounce animation. |
--ease-in-out |
Used to create an ease-in-out animation. |
--ease-in |
Used to create an ease-in animation. |
--ease-out |
Used to create an ease-out animation. |
You can use this CSS Variables to set the timing-function property for a CSS Animation/Transition.
Here's an example of how to use a timing function variable:
.component {
transition: transform 0.5s var(--ease-in-out);
}Use the pen below to test the easing options: