Switching to BEM Generator
This commit is contained in:
@@ -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()
|
Reference in New Issue
Block a user