2021-03-09 12:40:36 +01:00
|
|
|
/**
|
|
|
|
|
* 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()
|
2021-03-09 13:03:22 +01:00
|
|
|
+RV-Block--modifier()
|
2021-03-09 12:40:36 +01:00
|
|
|
padding-top 100%
|
|
|
|
|
width 100%
|
|
|
|
|
position relative
|
|
|
|
|
|
|
|
|
|
*
|
|
|
|
|
position absolute
|
|
|
|
|
top 0
|
|
|
|
|
left 0
|
|
|
|
|
bottom 0
|
|
|
|
|
right 0
|
|
|
|
|
|
|
|
|
|
RV-Shape--circle()
|
2021-03-09 13:03:22 +01:00
|
|
|
+RV-Block--modifier()
|
2021-03-09 12:40:36 +01:00
|
|
|
padding-top 100%
|
|
|
|
|
width 100%
|
|
|
|
|
position relative
|
|
|
|
|
|
|
|
|
|
&, *
|
|
|
|
|
clip-path circle()
|
|
|
|
|
|
|
|
|
|
*
|
|
|
|
|
position absolute
|
|
|
|
|
top 0
|
|
|
|
|
left 0
|
|
|
|
|
bottom 0
|
|
|
|
|
right 0
|
|
|
|
|
|
|
|
|
|
+RV-Block('RV-Shape')
|
2021-03-09 13:03:22 +01:00
|
|
|
RV-Shape--square()
|
|
|
|
|
RV-Shape--circle()
|
