BEM Generator shorthand for block modifiers
This commit is contained in:
parent
05b23653c7
commit
d6b4f0aff2
@ -102,11 +102,13 @@ RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_
|
||||
if squash_if_parent_nested && is_any_parent_nested()
|
||||
{block}
|
||||
else
|
||||
{selector_callback(name)}
|
||||
selector_name = selector_callback(name)
|
||||
if name == ''
|
||||
selector_name = split(name_delimiter, selector_name)[0]
|
||||
{selector_name}
|
||||
{block}
|
||||
|
||||
|
||||
|
||||
RV-Block(name)
|
||||
.{name}
|
||||
{block}
|
||||
@ -114,6 +116,10 @@ RV-Block(name)
|
||||
_bem_context._alias_map = {}
|
||||
_bem_context._alias_stacks = {}
|
||||
|
||||
RV-Block--shorthand(name)
|
||||
+RV-Block(name)
|
||||
{block}
|
||||
|
||||
RV-Element(name=null)
|
||||
+RV-Level(name, '__', ('RV-Block' 'RV-Block--modifier'), @(name){
|
||||
if is_nested_in('RV-Block--modifier') {
|
||||
@ -131,7 +137,11 @@ RV-Element--modifier(name=null)
|
||||
{block}
|
||||
|
||||
RV-Block--modifier(name=null)
|
||||
+RV-Level(name, '--', ('RV-Block'), @(name){return '&--' + name}, true)
|
||||
+RV-Level(name, '--', ('RV-Block' 'RV-Block--shorthand'), @(name){return '&--' + name}, true)
|
||||
if is_nested_in('RV-Block--shorthand') && length(called-from) > 0
|
||||
mixin_name = split('--', called-from[0])[0]
|
||||
p(mixin_name)
|
||||
convert(unquote(mixin_name)+'()')
|
||||
{block}
|
||||
|
||||
RV-Squash()
|
||||
|
@ -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()
|
||||
|
@ -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>
|
||||
|
@ -51,7 +51,7 @@ RV-AspectRatio()
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
+RV-Block('RV-AspectRatio')
|
||||
+RV-Block--shorthand('RV-AspectRatio')
|
||||
RV-AspectRatio()
|
||||
|
||||
RV-AspectRatio--1to2()
|
||||
|
@ -1,11 +1,11 @@
|
||||
|
||||
{{#if modifier}}
|
||||
<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
|
||||
<div class="RV-Dummy {{modifier}}"></div>
|
||||
{{else}}
|
||||
<div class="RV-FlexGrid RV-FlexGrid--masonry">
|
||||
{{#each modifier_list}}
|
||||
<div class="RV-FlexGrid__Item ">
|
||||
<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
|
||||
<div class="RV-Dummy {{this}}"></div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
@ -44,7 +44,7 @@ RV-FocalPoint(focalX=50%, focalY=50%)
|
||||
object-fit cover
|
||||
object-position --focalX --focalY
|
||||
|
||||
+RV-Block('RV-FocalPoint')
|
||||
+RV-Block--shorthand('RV-FocalPoint')
|
||||
RV-FocalPoint()
|
||||
|
||||
RV-FocalPoint--upperHalf()
|
||||
|
@ -14,9 +14,9 @@
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--4to3">
|
||||
<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
|
||||
<img class="RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
|
||||
</div>
|
||||
|
||||
<div class="RV-AspectRatio RV-AspectRatio--1to2">
|
||||
<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
|
||||
<img class="RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
|
||||
</div>
|
||||
|
@ -37,6 +37,6 @@ RV-Shape--circle()
|
||||
bottom 0
|
||||
right 0
|
||||
|
||||
+RV-Block('RV-Shape')
|
||||
+RV-Block--shorthand('RV-Shape')
|
||||
RV-Shape--square()
|
||||
RV-Shape--circle()
|
@ -1,3 +1,3 @@
|
||||
<div class="RV-Shape {{#if modifier}}{{modifier}}{{/if}}">
|
||||
<div class="{{#if modifier}}{{modifier}}{{/if}}">
|
||||
<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
|
||||
</div>
|
@ -70,7 +70,7 @@ RV-Truncation(line-height=1.3em, height=100%, background-color=white)
|
||||
background --background-color
|
||||
line-height --line-height
|
||||
|
||||
+RV-Block('RV-Truncation')
|
||||
+RV-Block--shorthand('RV-Truncation')
|
||||
RV-Truncation()
|
||||
|
||||
RV-Truncation--fade(--background-color)
|
||||
|
@ -1,5 +1,8 @@
|
||||
{
|
||||
"name": "Truncation",
|
||||
"context": {
|
||||
"modifier": "RV-Truncation"
|
||||
},
|
||||
"variants": [
|
||||
{
|
||||
"name": "Fade",
|
||||
|
@ -1,4 +1,4 @@
|
||||
<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
|
||||
<div class="{{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
|
||||
<div class="RV-Truncation__Cutter">
|
||||
<p class="RV-Truncation__Content">
|
||||
You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
|
||||
|
Loading…
Reference in New Issue
Block a user