Horsin' around
This commit is contained in:
parent
11c5146a19
commit
8275d2960d
@ -48,8 +48,11 @@ apply_alias_stack(name)
|
||||
auto_name(delimiter)
|
||||
if length(called-from) < 3
|
||||
return null
|
||||
name = split(delimiter, called-from[2])[-1]
|
||||
if name in ('RV-Element' 'RV-Block' 'RV-Element--modifier' 'RV-Block--modifier')
|
||||
block_name = called-from[2]
|
||||
if delimiter == null
|
||||
return block_name
|
||||
name = split(delimiter, block_name)[-1]
|
||||
if name in ('RV-Element' 'RV-Block' 'RV-Block--shorthand' 'RV-Element--modifier' 'RV-Block--modifier' 'RV-Generate')
|
||||
return null
|
||||
return name
|
||||
|
||||
@ -82,13 +85,13 @@ is_any_parent_nested()
|
||||
return true
|
||||
return false
|
||||
|
||||
RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_if_parent_nested=false)
|
||||
if name == null
|
||||
name = auto_name(name_delimiter)
|
||||
RV-Level(name_delimiter, allowed_parent_levels=null, selector_callback, squash_if_parent_nested=false)
|
||||
name = auto_name(name_delimiter)
|
||||
p(called-from)
|
||||
not_in_parent = true
|
||||
for parent_level in allowed_parent_levels
|
||||
not_in_parent = not_in_parent && not_nested_in(parent_level)
|
||||
if not_in_parent || is_nested_in('RV-Squash')
|
||||
if not_in_parent //|| is_nested_in('RV-Squash')
|
||||
{block}
|
||||
else if is_nested()
|
||||
store_alias(name)
|
||||
@ -108,6 +111,11 @@ RV-Level(name, name_delimiter, allowed_parent_levels, selector_callback, squash_
|
||||
{selector_name}
|
||||
{block}
|
||||
|
||||
// RV-Fan--horizontal RV-Fan--horizontal __ Base -- wurst
|
||||
// RV-BreakPoint__Item--outside RV-Fan--horizontal__Base RV-Fan--horizontal
|
||||
|
||||
|
||||
|
||||
|
||||
RV-Block(name)
|
||||
.{name}
|
||||
@ -115,29 +123,39 @@ RV-Block(name)
|
||||
|
||||
_bem_context._alias_map = {}
|
||||
_bem_context._alias_stacks = {}
|
||||
|
||||
RV-Generate()
|
||||
{block}
|
||||
|
||||
_bem_context._alias_map = {}
|
||||
_bem_context._alias_stacks = {}
|
||||
|
||||
RV-Block()
|
||||
+RV-Level(null, ('RV-Generate'), @(name){
|
||||
define('current_block', name, true)
|
||||
return '.'+name
|
||||
})
|
||||
{block}
|
||||
|
||||
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') {
|
||||
return '& ^[-1]__' + name
|
||||
}
|
||||
else {
|
||||
return '& &__' + name
|
||||
}
|
||||
|
||||
RV-Element()
|
||||
+RV-Level('__', ('RV-Generate' 'RV-Block--modifier'), @(name){
|
||||
return '& .' + current_block +'__' + name
|
||||
})
|
||||
{block}
|
||||
|
||||
|
||||
RV-Element--modifier(name=null)
|
||||
+RV-Level(name, '--', ('RV-Element'), @(name){return '&--' + name}, true)
|
||||
RV-Element--modifier()
|
||||
+RV-Level('--', ('RV-Element'), @(name){return '&--' + name}, true)
|
||||
{block}
|
||||
|
||||
RV-Block--modifier(name=null)
|
||||
+RV-Level(name, '--', ('RV-Block' 'RV-Block--shorthand'), @(name){return '&--' + name}, true)
|
||||
RV-Block--modifier()
|
||||
+RV-Level('--', ('RV-Generate' 'RV-Block--shorthand'), @(name){
|
||||
'.' + current_block +'--' + name
|
||||
}, true)
|
||||
if is_nested_in('RV-Block--shorthand') && length(called-from) > 0
|
||||
mixin_name = split('--', called-from[0])[0]
|
||||
convert(unquote(mixin_name)+'()')
|
||||
|
@ -1,4 +1,6 @@
|
||||
@import 'flexRow/_flexRow'
|
||||
/*@import 'flexRow/_flexRow'
|
||||
@import 'flexGrid/_flexGrid'
|
||||
*/
|
||||
@import 'breakPoint/_breakPoint'
|
||||
|
||||
@import 'fan/_fan'
|
@ -6,22 +6,13 @@
|
||||
}
|
||||
</style>
|
||||
<div class="RV-BreakPoint RV-BreakPoint{{modifier}}">
|
||||
<div class="RV-BreakPoint__Item RV-Dummy RV-Spacing__Inner--medium">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
|
||||
<div>Larger</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>Content</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>ItemItem</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--inside RV-Dummy--yellow RV-Dummy">
|
||||
<div style="margin: 15px;">Smaller</div>
|
||||
</div>
|
||||
<div class="RV-BreakPoint__Item RV-Dummy">
|
||||
<div>ItemItem</div>
|
||||
<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
|
||||
<div>Larger</div>
|
||||
</div>
|
||||
</div>
|
@ -5,10 +5,26 @@
|
||||
* can be right of the base or below.
|
||||
*/
|
||||
|
||||
/* ######################
|
||||
/** #####################
|
||||
* Block Modifiers Mixins
|
||||
* ###################### */
|
||||
|
||||
RV-Fan--horizontal__Surface()
|
||||
+RV-Element()
|
||||
RV-BreakPoint__Item(--localBreakPoint)
|
||||
|
||||
RV-Fan--horizontal__Base()
|
||||
+RV-Element()
|
||||
RV-BreakPoint__Item(--localBreakPoint)
|
||||
RV-BreakPoint__Item--outside()
|
||||
|
||||
flex-basis base-width
|
||||
flex-grow 0
|
||||
|
||||
RV-Fan--horizontal__Base--wurst()
|
||||
+RV-Element--modifier()
|
||||
--wurst wasser
|
||||
|
||||
/*
|
||||
* Base on the left, Surface on the right
|
||||
* Base is fixed, given size, Surface is given height
|
||||
@ -20,21 +36,21 @@ RV-Fan--horizontal(base-height, base-width)
|
||||
localBreakPoint: 'calc(2 * %s)' % base-width
|
||||
})
|
||||
RV-BreakPoint(--localBreakPoint)
|
||||
|
||||
+RV-Element('Surface')
|
||||
RV-BreakPoint__Item(--localBreakPoint)
|
||||
|
||||
+RV-Element('Base')
|
||||
RV-BreakPoint__Item(--localBreakPoint)
|
||||
+RV-Squash()
|
||||
RV-BreakPoint__Item--outside()
|
||||
|
||||
flex-basis base-width
|
||||
flex-grow 0
|
||||
RV-Fan--horizontal__Surface()
|
||||
+RV-Element()
|
||||
RV-Fan--horizontal__Base()
|
||||
RV-Fan--horizontal__Base--wurst()
|
||||
|
||||
RV-BreakPoint--horizontal()
|
||||
min-width base-width
|
||||
|
||||
|
||||
RV-Fan--vertical__Surface()
|
||||
+RV-Element()
|
||||
width base-width
|
||||
min-width initial
|
||||
min-height base-height
|
||||
|
||||
/*
|
||||
* Base above, Surfce below
|
||||
* Base is fixed, given size, base is given width
|
||||
@ -45,15 +61,16 @@ RV-Fan--vertical(base-height, base-width)
|
||||
flex-direction column
|
||||
width base-width
|
||||
min-width initial
|
||||
|
||||
+RV-Element('Surface')
|
||||
width base-width
|
||||
min-width initial
|
||||
min-height base-height
|
||||
|
||||
+RV-Element--modifier('fixedHeight')
|
||||
--wurst wasserererer
|
||||
RV-Fan--vertical__Surface()
|
||||
|
||||
RV-Fan--auto__Base()
|
||||
+RV-Element()
|
||||
flex-grow 1
|
||||
|
||||
RV-Fan--auto__Surface()
|
||||
+RV-Element()
|
||||
box-sizing border-box
|
||||
flex-grow 99999
|
||||
|
||||
/*
|
||||
* Initialy horizontal, changes to vertical when
|
||||
@ -63,13 +80,9 @@ RV-Fan--vertical(base-height, base-width)
|
||||
RV-Fan--auto(base-height, base-width)
|
||||
+RV-Block--modifier()
|
||||
flex-flow row wrap
|
||||
|
||||
+RV-Element('Base')
|
||||
flex-grow 1
|
||||
|
||||
+RV-Element('Surface')
|
||||
box-sizing border-box
|
||||
flex-grow 99999
|
||||
|
||||
RV-Fan--auto__Base()
|
||||
RV-Fan--auto__Surface()
|
||||
|
||||
|
||||
/* ###############
|
||||
@ -116,25 +129,25 @@ RV-Fan__Surface(base-height, base-width)
|
||||
* Block Mixin
|
||||
* ############ */
|
||||
RV-Fan(base-height, base-width)
|
||||
display flex
|
||||
position relative
|
||||
min-width min-content
|
||||
+RV-Block()
|
||||
RV-CSSParameter({
|
||||
base-height: base-height,
|
||||
base-width: base-width
|
||||
})
|
||||
display flex
|
||||
position relative
|
||||
min-width min-content
|
||||
|
||||
+RV-Block('RV-Fan')
|
||||
RV-CSSParameter({
|
||||
base-height: 280px,
|
||||
base-width: 320px
|
||||
})
|
||||
|
||||
RV-Fan(--base-height, --base-width)
|
||||
+RV-Generate()
|
||||
RV-Fan(280px, 320px)
|
||||
RV-Fan__Base(--base-height, --base-width)
|
||||
|
||||
|
||||
+RV-Element()
|
||||
RV-Fan__Surface(--base-height, --base-width)
|
||||
RV-Fan__Surface--fixedHeight(base-height)
|
||||
RV-Fan__Surface--fixedWidth(base-width)
|
||||
|
||||
|
||||
RV-Fan--auto(--base-height, --base-width)
|
||||
RV-Fan--vertical(--base-height, --base-width)
|
||||
RV-Fan--horizontal(--base-height, --base-width)
|
||||
|
||||
|
@ -20,6 +20,7 @@ RV-Pagination__Item(breakPoint)
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--narrower()
|
||||
flex-basis 100px
|
||||
margin-right -.1rem
|
||||
|
||||
+RV-Element('Forwards')
|
||||
RV-BreakPoint(--navigationBreakPoint)
|
||||
@ -28,6 +29,7 @@ RV-Pagination__Item(breakPoint)
|
||||
RV-BreakPoint--horizontal()
|
||||
RV-FlexRow__Item--narrower()
|
||||
flex-basis 100px
|
||||
margin-left -.1rem
|
||||
|
||||
+RV-Element('Sites')
|
||||
RV-BreakPoint(--breakPoint)
|
||||
@ -59,6 +61,7 @@ RV-Pagination__Item(breakPoint)
|
||||
border-radius .2rem
|
||||
display flex
|
||||
justify-content center
|
||||
//margin 0 -.5rem
|
||||
.RV-Link
|
||||
RV-BreakPoint__Item(--size)
|
||||
RV-BreakPoint__Item--outside()
|
||||
|
@ -1,6 +1,6 @@
|
||||
@import '00_Tools/_tools'
|
||||
@import '01_Layouts/_layouts'
|
||||
@import '02_ContentShape/_contentShape'
|
||||
/*@import '02_ContentShape/_contentShape'
|
||||
@import '03_Styles/_styles'
|
||||
@import '04_Atoms/_atoms'
|
||||
@import '05_Molecules/_molecules'
|
||||
|
1268
public/rcss.css
1268
public/rcss.css
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user