scss-library/components/03_Styles/boxShadow/_boxShadow.styl

/*
 * A collection of Box Shadows
 */
 
/*
 * Just a simple box shadow, surrounding the box
 */
RV-BoxShadow--simple(color)
	+RV-Block--modifier()
		box-shadow 0 0 10px 3px color

RV-BoxShadow--solid(color)
	+RV-Block--modifier()
		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()
		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()	
		--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()
		&: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()
		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-BoxShadow()
	+RV-Block()
		RV-CSSParameter({
			color: #6b5690
		})
		
		RV-BoxShadow--simple(--color)
		RV-BoxShadow--liftedCorners(--color)
		RV-BoxShadow--levitating(--color)
		RV-BoxShadow--stacked(--color)
		RV-BoxShadow--drop(--color)
		RV-BoxShadow--solid(--color)
	
RV-BoxShadow()