diff --git a/components/01_Layouts/_layouts.styl b/components/01_Layouts/_layouts.styl
index 3c35c29..1580d6e 100644
--- a/components/01_Layouts/_layouts.styl
+++ b/components/01_Layouts/_layouts.styl
@@ -1,3 +1,4 @@
@import 'flexRow/_flexRow'
@import 'flexGrid/_flexGrid'
-@import 'fan/_fan'
\ No newline at end of file
+@import 'fan/_fan'
+@import 'breakPoint/_breakPoint'
\ No newline at end of file
diff --git a/components/01_Layouts/breakPoint/_breakPoint.styl b/components/01_Layouts/breakPoint/_breakPoint.styl
new file mode 100644
index 0000000..4946bb1
--- /dev/null
+++ b/components/01_Layouts/breakPoint/_breakPoint.styl
@@ -0,0 +1,73 @@
+RV-BreakPoint__Item(localBreakPoint)
+ +RV-Element()
+ RV-FlexRow__Item()
+ flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
+ overflow: hidden;
+ --outer-spacing 0
+ --inner-spacing 0
+
+RV-BreakPoint__Item--outside()
+ +RV-Element--modifier()
+ margin-bottom -100vh
+ flex-shrink 999
+
+RV-BreakPoint__Item--inside()
+ +RV-Element--modifier()
+ flex-grow 0
+
+RV-BreakPoint(localBreakPoint)
+ RV-FlexRow()
+ +RV-Squash()
+ RV-FlexRow--wrap()
+
+ overflow-y hidden
+
+ RV-Reset()
+ gap 0px
+
+ RV-Utils__ElementAmount--range(0, 20, @(index, total){
+ min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
+ }
+ )
+
+RV-BreakPoint--horizontal()
+ +RV-Block--modifier()
+ flex-wrap nowrap
+ min-width max-content
+
+ +RV-Element('Item')
+ +RV-Element--modifier('outside')
+ margin-bottom unset
+ height unset
+
+RV-BreakPoint--vertical()
+ +RV-Block--modifier()
+ flex-direction column
+ flex-wrap nowrap
+ height 100%
+
+ +RV-Element('Item')
+ +RV-Element--modifier('outside')
+ margin-bottom unset
+ height unset
+
++RV-Block('RV-BreakPoint')
+ RV-CSSParameter({
+ localBreakPoint: 500px
+ })
+
+ &&
+ --inner-spacing 0
+
+ RV-BreakPoint(--localBreakPoint)
+
+ +RV-Element()
+ RV-BreakPoint__Item(--localBreakPoint)
+ RV-BreakPoint__Item--outside()
+ RV-BreakPoint__Item--inside()
+
+ RV-BreakPoint--horizontal()
+ RV-BreakPoint--vertical()
+
+
+
\ No newline at end of file
diff --git a/components/01_Layouts/breakPoint/breakPoint.config.json b/components/01_Layouts/breakPoint/breakPoint.config.json
new file mode 100644
index 0000000..7219269
--- /dev/null
+++ b/components/01_Layouts/breakPoint/breakPoint.config.json
@@ -0,0 +1,17 @@
+{
+ "title": "BreakPoint",
+ "variants": [
+ {
+ "name": "Horizontal",
+ "context": {
+ "modifier": "--horizontal"
+ }
+ },
+ {
+ "name": "Vertical",
+ "context": {
+ "modifier": "--vertical"
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/components/01_Layouts/breakPoint/breakPoint.hbs b/components/01_Layouts/breakPoint/breakPoint.hbs
new file mode 100644
index 0000000..2f4fe8c
--- /dev/null
+++ b/components/01_Layouts/breakPoint/breakPoint.hbs
@@ -0,0 +1,27 @@
+
+
+
\ No newline at end of file
diff --git a/components/01_Layouts/flexRow/_flexRow.styl b/components/01_Layouts/flexRow/_flexRow.styl
index 1526ee4..0e11729 100644
--- a/components/01_Layouts/flexRow/_flexRow.styl
+++ b/components/01_Layouts/flexRow/_flexRow.styl
@@ -12,65 +12,14 @@ RV-FlexRow--horizontal()
RV-FlexRow--vertical()
+RV-Block--modifier()
flex-direction column
-
- +RV-Element('Item')
- margin-bottom unset
-
-
-RV-FlexRow__Item--outsideBreakPoint()
- +RV-Element--modifier()
- margin-bottom -100vh
- height max-content
- flex-shrink 999
-
-RV-FlexRow__Item--insideBreakPoint()
- +RV-Element--modifier()
- flex-grow 0
-/*
- * Breaks from row to column orientation at the given breakpoint
- * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
- */
-RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
- +RV-Block--modifier()
- RV-Reset()
- gap 0px
-
- RV-Utils__ElementAmount--range(0, 20, @(index, total){
- min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
- }
- )
-
- +RV-Element('Item')
- min-width initial
- flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
- overflow hidden
-
- RV-FlexRow__Item--outsideBreakPoint()
- RV-FlexRow__Item--insideBreakPoint()
-
- margin 0
- padding 0
- --_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
- --height 100%
- *
- position relative
- height calc(var(--height) - var(--_spacing-difference))
- width calc(var(--height) - var(--_spacing-difference))
- top calc(var(--_spacing-difference) / 2)
- left calc(var(--_spacing-difference) / 2)
-
- @media(max-width mediaBreakPoint)
- flex-direction row
-
/*
* Typical Flexbox behavior, Row is horizontal, but item are wraped individualy
*/
-RV-FlexRow--auto()
+RV-FlexRow--wrap()
+RV-Block--modifier()
- +RV-Squash()
- RV-FlexRow--horizontal()
- flex-wrap wrap
+ flex-direction row
+ flex-wrap wrap
/* ##########
@@ -144,8 +93,6 @@ RV-FlexRow__Item--content()
########### */
RV-FlexRow()
display flex
- height 100%
- overflow-y hidden
+RV-Block('RV-FlexRow')
RV-FlexRow()
@@ -172,4 +119,4 @@ RV-FlexRow()
RV-FlexRow--breakPoint(--localBreakPoint, --mediaBreakPoint)
RV-FlexRow--horizontal()
RV-FlexRow--vertical()
- RV-FlexRow--auto()
\ No newline at end of file
+ RV-FlexRow--wrap()
\ No newline at end of file
diff --git a/components/01_Layouts/flexRow/flexRow.config.json b/components/01_Layouts/flexRow/flexRow.config.json
index f5053bb..7f25ac4 100644
--- a/components/01_Layouts/flexRow/flexRow.config.json
+++ b/components/01_Layouts/flexRow/flexRow.config.json
@@ -17,15 +17,9 @@
}
},
{
- "name": "Breakpoint",
+ "name": "Wrap",
"context": {
- "modifier": "--breakPoint"
- }
- },
- {
- "name": "Auto",
- "context": {
- "modifier": "--auto"
+ "modifier": "--wrap"
}
}
]