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

45 lines
848 B
Stylus

/**
* 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()