Switching to BEM Generator

This commit is contained in:
2021-03-04 17:37:09 +01:00
parent 6c5a7704b4
commit c656dc2929
3 changed files with 118 additions and 85 deletions

View File

@@ -1,34 +1,45 @@
/**
* 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()
padding-top 100%
width 100%
position relative
*
position absolute
top 0
left 0
bottom 0
right 0
+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()
padding-top 100%
width 100%
position relative
+RV-Block__Modifier--name('circle')
padding-top 100%
width 100%
position relative
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
&, *
border-radius 50%
*
position absolute
top 0
left 0
bottom 0
right 0
.RV-Shape
&--square
+RV-Block('RV-Shape')
+RV-Block__Modifier()
RV-Shape--square()
&--circle
+RV-Block__Modifier()
RV-Shape--circle()