reverend
/
scss-library
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Horsin' around

This commit is contained in:
reverend 2021-03-12 16:22:23 +01:00
parent 11c5146a19
commit 8275d2960d
7 changed files with 187 additions and 1252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
components/00_Tools/_bemGenerator.styl
View File

@ -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)+'()')

4
components/01_Layouts/_layouts.styl
View File

@ -1,4 +1,6 @@
@import 'flexRow/_flexRow'
/*@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
*/
@import 'breakPoint/_breakPoint'
@import 'fan/_fan'

13
components/01_Layouts/breakPoint/breakPoint.hbs
View File

@ -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>

93
components/01_Layouts/fan/_fan.styl
View File

@ -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)

3
components/05_Molecules/pagination/_pagination.styl
View File

@ -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()

2
components/_components.styl
View File

@ -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
View File

File diff suppressed because it is too large Load Diff