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: