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

45 lines
848 B
Stylus
Raw Normal View History

2021-03-04 17:37:09 +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-04 17:37:09 +01:00
+RV-Block__Modifier--name('square')
padding-top 100%
width 100%
position relative
2021-03-04 17:37:09 +01:00
*
position absolute
top 0
left 0
bottom 0
right 0
RV-Shape--circle()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier--name('circle')
padding-top 100%
width 100%
position relative
2021-03-04 17:37:09 +01:00
&, *
2021-03-04 17:38:50 +01:00
clip-path circle()
2021-03-04 17:37:09 +01:00
*
position absolute
top 0
left 0
bottom 0
right 0
2021-03-04 17:37:09 +01:00
+RV-Block('RV-Shape')
+RV-Block__Modifier()
RV-Shape--square()
2021-03-04 17:37:09 +01:00
+RV-Block__Modifier()
RV-Shape--circle()