Box shadow
Read all shadow variablesDefault Box shadow scale​
Ravenbright box shadow variable is defined globally and begin with the prefix ---rbrh-shadow-{size}
. This variable can be used and customized on various components.
Variable | Value |
---|---|
--rbrh-shadow-xs | 0 .125rem .625rem -0.375rem rgba(0,0,0,.1), 0px .25rem .75rem -0.125rem rgba(0,0,0,.1) |
--rbrh-shadow-sm | 0 .125rem .875rem -0.5rem rgba(0,0,0,.15),0px .125rem .75rem -0.125rem rgba(0,0,0,.1) |
--rbrh-shadow-md | 0rem .75rem 2.5rem -0.375rem rgba(0,0,0,.15),-0.125rem 3rem .875rem -2.5rem rgba(0,0,0,.15); |
--rbrh-shadow-lg | 0rem .875rem 1.5rem -0.5rem rgba(0,0,0,0.25); |
--rbrh-shadow-xl | -0.125rem 1.125rem 3rem -0.875rem rgba(0,0,0,.275); |
--rbrh-shadow-inset-xs | inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05); |
--rbrh-shadow-inset-sm | inset 0px 1px 4px 0px rgba(0, 0, 0, 0.08); |
--rbrh-shadow-inset-md | inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1); |
Usage​
Shadow-xsShadow-smShadow-mdShadow-lgShadow-xlinset-xsinset-sminset-md
To use the box-shadow, you can place the CSS variables inside component selector.
.btn-md {
box-shadow: var(--rbrh-shadow-sm);
}
Customizing​
To modify the border-radius value, you can edit these variables in css-variables:
/* Box shadow */
--rbrh-shadow-xl: -0.125rem 1.125rem 3rem -0.875rem rgba(0, 0, 0, 0.275);
--rbrh-shadow-lg: 0rem 0.875rem 1.5rem -0.5rem rgba(0, 0, 0, 0.4);
--rbrh-shadow-md: 0rem 0.75rem 2.5rem -0.375rem rgba(0, 0, 0, 0.15),
-0.125rem 3rem 0.875rem -2.5rem rgba(0, 0, 0, 0.15);
--rbrh-shadow-xs: 0 0.125rem 0.625rem -0.375rem rgba(0, 0, 0, 0.1),
0px 0.25rem 0.75rem -0.125rem rgba(0, 0, 0, 0.1);
--rbrh-shadow-inset-xs: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--rbrh-shadow-inset-sm: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
--rbrh-shadow-inset-md: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
tip
Checkout the complete tutorial on how to customize & add new design variable in CSS variables