111 lines
2.4 KiB
Stylus
111 lines
2.4 KiB
Stylus
/*
|
|
* A collection of Box Shadows
|
|
*/
|
|
|
|
/*
|
|
* Just a simple box shadow, surrounding the box
|
|
*/
|
|
RV-BoxShadow--simple(color)
|
|
+RV-Block__Modifier--name('simple')
|
|
box-shadow 0 0 10px 3px color
|
|
|
|
RV-BoxShadow--solid(color)
|
|
+RV-Block__Modifier--name('solid')
|
|
border 8px solid color
|
|
border-radius 14px
|
|
padding 8px
|
|
margin -8px
|
|
|
|
/*
|
|
* Hhuge shadow under the bottom of the
|
|
* box, which creates an levitation effect
|
|
*/
|
|
RV-BoxShadow--levitating(color)
|
|
+RV-Block__Modifier--name('levitating')
|
|
box-shadow: color 0px 1px 1px 0px inset, color 0px 40px 80px -15px, color 0px 30px 60px -30px;
|
|
|
|
/*
|
|
* Stacked, retro, synth wave style
|
|
* shadows unterneath the box
|
|
* To change the color using CSS vars
|
|
* you have to set the separte r, g, b values
|
|
* --color: 107, 86, 144
|
|
* This may cause other types of shadow to break
|
|
* if used in the same selector / var scope
|
|
*/
|
|
RV-BoxShadow--stacked(color)
|
|
+RV-Block__Modifier--name('stacked')
|
|
--color red(@--color), green(@--color), blue(@--color)
|
|
box-shadow: 'rgba(%s, 0.4) 0px 5px, rgba(%s, 0.3) 0px 10px, rgba(%s, 0.2) 0px 15px, rgba(%s, 0.1) 0px 20px, rgba(%s, 0.05) 0px 25px' % (color color color color color)
|
|
|
|
/*
|
|
* Two shadows at the lower left and right of the box
|
|
* to create the effect the corners are lifted like
|
|
* a piece of paper
|
|
*/
|
|
RV-BoxShadow--liftedCorners(color)
|
|
+RV-Block__Modifier--name('liftedCorners')
|
|
&:before, &:after
|
|
bottom 15px
|
|
left 10px
|
|
width 50%
|
|
height 20%
|
|
box-shadow 0 15px 8px color
|
|
transform rotate(-5deg)
|
|
|
|
&:after
|
|
right 10px
|
|
left auto
|
|
transform rotate(5deg)
|
|
|
|
/*
|
|
* A suttle drop shadow in the middle of the element
|
|
*/
|
|
RV-BoxShadow--drop(color)
|
|
+RV-Block__Modifier--name('drop')
|
|
position relative
|
|
box-shadow 0 1px 4px color
|
|
|
|
&:after
|
|
box-shadow 0 0 40px color
|
|
bottom 0px
|
|
left 10%
|
|
right 10%
|
|
width 80%
|
|
height 50%
|
|
border-radius 100%
|
|
|
|
|
|
RV-BoxShadow()
|
|
position relative
|
|
background-color white
|
|
|
|
&:before, &:after
|
|
content ''
|
|
position absolute
|
|
z-index -2
|
|
|
|
+RV-Block('RV-BoxShadow')
|
|
RV-CSSParameter({
|
|
color: #6b5690
|
|
})
|
|
|
|
RV-BoxShadow()
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--simple(--color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--liftedCorners(--color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--levitating(--color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--stacked(--color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--drop(--color)
|
|
|
|
+RV-Block__Modifier()
|
|
RV-BoxShadow--solid(--color) |