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
Download Patch File Download Diff File Expand all files Collapse all files

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)