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