scss-library/components/10_ContentShape/shape/_shape.styl

/**
 * This mixins lets to shape elements to squares or circles.
 * Note: Even if the class RV-Shape itself is not nessecary (at this point)
 * you still should use it to maintain compatiblity:
 * CSS: class="RV-Shape RV-Shape--square"
 * Stylues: 
 *	RV-Shape()
 *	RV-Shape--square()
 * You may want to combine this mixin with RV-FocalPoint.
 */
RV-Shape--square()
	+RV-Block__Modifier--name('square')
		padding-top 100%
		width 100%
		position relative
		
		*
			position absolute
			top 0
			left 0
			bottom 0
			right 0

RV-Shape--circle()
	+RV-Block__Modifier--name('circle')	
		padding-top 100%
		width 100%
		position relative

		&, *
			clip-path circle()
		
		*
			position absolute
			top 0
			left 0
			bottom 0
			right 0

+RV-Block('RV-Shape')
	+RV-Block__Modifier()
		RV-Shape--square()
		
	+RV-Block__Modifier()
		RV-Shape--circle()