45 lines
848 B
Stylus
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()
|