BEM Generator shorthand for block modifiers

This commit is contained in:
2021-03-10 02:58:14 +01:00
parent 05b23653c7
commit d6b4f0aff2
12 changed files with 33 additions and 20 deletions

View File

@@ -30,7 +30,7 @@ RV-Alignment--center()
align-items center
justify-content center
+RV-Block('RV-Alignment')
+RV-Block--shorthand('RV-Alignment')
RV-Alignment()
RV-Alignment--top()

View File

@@ -7,37 +7,37 @@
<div class="RV-FlexGrid RV-FlexGrid--fixedSize RV-Spacing__Inner--medium">
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--top">
<div class="RV-Alignment--top">
<p>Aligned Top</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--left">
<div class="RV-Alignment--left">
<p>Aligned Left</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--bottom">
<div class="RV-Alignment--bottom">
<p>Aligned Bottom</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--right">
<div class="RV-Alignment--right">
<p>Aligned Right</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--verticalCenter">
<div class="RV-Alignment--verticalCenter">
<p>Aligned v center</p>
</div>
</div>
<div class="RV-FlexGrid__Item RV-BoxShadow RV-BoxShadow--solid">
<div class="RV-Alignment RV-Alignment--horizontalCenter">
<div class="RV-Alignment--horizontalCenter">
<p>Aligned</p>
<p>h</p>
<p>center</p>