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

Horsin' around

Browse Source
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

54
components/00_Tools/_bemGenerator.styl
View File

@ -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}
@ -116,28 +124,38 @@ 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)+'()')

4
components/01_Layouts/_layouts.styl
View File

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

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

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

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

@ -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') RV-Fan--auto__Base()
width base-width +RV-Element()
min-width initial flex-grow 1
min-height base-height
+RV-Element--modifier('fixedHeight')
--wurst wasserererer
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
@ -64,12 +81,8 @@ 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,17 +129,17 @@ 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()

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

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

2
components/_components.styl
View File

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

File diff suppressed because it is too large Load Diff