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-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.

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: