...
 
Commits (2)
......@@ -4,8 +4,8 @@ const generateBreakpoints = (name, limit, condition) => {
const conditionArray = isArray(condition) ? condition : [condition]
const result = {};
for (let i = 1; i <= limit; i++) {
result[`flex__col--${name}-${i}`] = conditionArray && conditionArray[0] === i
result[`flex__col--${name}-shift-${i}`] = conditionArray && conditionArray[1] === i
result[`${name}-${i}`] = conditionArray && conditionArray[0] === i
result[`${name}-shift-${i}`] = conditionArray && conditionArray[1] === i
}
return result
}
......@@ -35,6 +35,13 @@ export default {
type: String,
default: 'div'
},
/**
* force flex-direction to column
*/
stack: {
type: Boolean,
default: false
},
/**
* Reverse direction of the flex element (only row and column)
*/
......@@ -236,64 +243,73 @@ export default {
if (isContainer) {
classes = Object.assign(classes, {
'flex__container': true,
'flex__container--fluid': this.fluid,
'flex__container--nogutter': this.nogutter,
'flex__container--debug': this.debug
'fluid': this.fluid,
'nogutter': this.nogutter,
'debug': this.debug
})
}
if (isRow) {
classes = Object.assign(classes, {
'flex__row': true,
'flex__row--reset': this.resetStyle,
'flex__row--reverse': this.reverse,
'flex__row--align-stretch': this.align && this.align === 'strech',
'flex__row--align-start': (this.align && this.align === 'start') || this.top,
'flex__row--align-end': (this.align && this.align === 'end') || this.bottom,
'flex__row--align-center': (this.align && this.align === 'center') || this.middle,
'flex__row--align-baseline': this.align && this.align === 'baseline',
'flex__row--justify-start': (this.justify && this.justify === 'start') || this.left,
'flex__row--justify-end': (this.justify && this.justify === 'end') || this.right,
'flex__row--justify-center': (this.justify && this.justify === 'center') || this.center,
'flex__row--justify-between': (this.justify && this.justify === 'between') || this.between,
'flex__row--justify-around': (this.justify && this.justify === 'around') || this.around,
'flex__row--justify-evenly': (this.justify && this.justify === 'evenly') || this.evenly,
'flex__row--justify-initial': this.justify && this.justify === 'initial',
'flex__row--justify-inherit': this.justify && this.justify === 'inherit',
'flex__row--grow': this.grow,
'flex__row--nowrap': this.nowrap,
'flex__row--nogutter': this.nogutter,
'flex__row--debug': this.debug
'reset': this.resetStyle,
'reverse': this.reverse,
'align-stretch': this.align && this.align === 'strech',
'align-start': (this.align && this.align === 'start') || this.top,
'align-end': (this.align && this.align === 'end') || this.bottom,
'align-center': (this.align && this.align === 'center') || this.middle,
'align-baseline': this.align && this.align === 'baseline',
'justify-start': (this.justify && this.justify === 'start') || this.left,
'justify-end': (this.justify && this.justify === 'end') || this.right,
'justify-center': (this.justify && this.justify === 'center') || this.center,
'justify-between': (this.justify && this.justify === 'between') || this.between,
'justify-around': (this.justify && this.justify === 'around') || this.around,
'justify-evenly': (this.justify && this.justify === 'evenly') || this.evenly,
'justify-initial': this.justify && this.justify === 'initial',
'justify-inherit': this.justify && this.justify === 'inherit',
'grow': this.grow,
'nowrap': this.nowrap,
'nogutter': this.nogutter,
'debug': this.debug
})
}
if (isColumn) {
classes = Object.assign(classes, {
'flex__col': true,
'flex__col--reverse': this.reverse,
'flex__col--align-stretch': this.align && this.align === 'strech',
'flex__col--align-start': this.align && this.align === 'start',
'flex__col--align-end': this.align && this.align === 'end',
'flex__col--align-center': this.align && this.align === 'center',
'flex__col--align-baseline': this.align && this.align === 'baseline',
'flex__col--justify-start': (this.justify && this.justify === 'start') || this.left,
'flex__col--justify-end': (this.justify && this.justify === 'end') || this.right,
'flex__col--justify-center': (this.justify && this.justify === 'center') || this.center,
'flex__col--justify-between': (this.justify && this.justify === 'between') || this.between,
'flex__col--justify-around': (this.justify && this.justify === 'around') || this.around,
'flex__col--justify-evenly': (this.justify && this.justify === 'evenly') || this.evenly,
'flex__col--justify-initial': this.justify && this.justify === 'initial',
'flex__col--justify-inherit': this.justify && this.justify === 'inherit',
...generateBreakpoints('xs', 12, this.xs),
...generateBreakpoints('sm', 12, this.sm),
...generateBreakpoints('md', 12, this.md),
...generateBreakpoints('lg', 12, this.lg),
...generateBreakpoints('xl', 12, this.xl),
'flex__col--first': this.first,
'flex__col--last': this.last,
'flex__col--nogutter': this.nogutter,
'flex__col--debug': this.debug
})
flex__col: true,
"stack": this.stack,
"reverse": this.reverse,
"align-stretch": this.align && this.align === "strech",
"align-start": this.align && this.align === "start",
"align-end": this.align && this.align === "end",
"align-center": this.align && this.align === "center",
"align-baseline": this.align && this.align === "baseline",
"justify-start":
(this.justify && this.justify === "start") || this.left,
"justify-end":
(this.justify && this.justify === "end") || this.right,
"justify-center":
(this.justify && this.justify === "center") || this.center,
"justify-between":
(this.justify && this.justify === "between") || this.between,
"justify-around":
(this.justify && this.justify === "around") || this.around,
"justify-evenly":
(this.justify && this.justify === "evenly") || this.evenly,
"justify-initial":
this.justify && this.justify === "initial",
"justify-inherit":
this.justify && this.justify === "inherit",
...generateBreakpoints("xs", 12, this.xs),
...generateBreakpoints("sm", 12, this.sm),
...generateBreakpoints("md", 12, this.md),
...generateBreakpoints("lg", 12, this.lg),
...generateBreakpoints("xl", 12, this.xl),
"first": this.first,
"last": this.last,
"nogutter": this.nogutter,
"debug": this.debug
});
}
return classes
},
......
......@@ -374,27 +374,46 @@ Shift a column by breakpoint with `xsshift`, `smshift`, `mdshift`, `lgshift` and
```vue
<Flex nogutter>
<Flex row nogutter>
<Flex col xs>
<Flex col>
<div class="box-row"></div>
</Flex>
<Flex col xs>
<Flex col>
<div class="box-row"></div>
</Flex>
</Flex>
<Flex row nogutter>
<Flex col xs>
<Flex col>
<div class="box-row"></div>
</Flex>
<Flex col xs>
<Flex col>
<div class="box-row"></div>
</Flex>
<Flex col xs>
<Flex col>
<div class="box-row"></div>
</Flex>
</Flex>
</Flex>
```
### Stack
```vue
<Flex nogutter>
<Flex col nogutter>
<Flex row nogutter justify="end">
<div class="box-row" style="width: 100px;"></div>
<div class="box-row" style="width: 100px;"></div>
</Flex>
</Flex>
<Flex col stack nogutter>
<Flex row justify="end" nogutter>
<div class="box-row" style="width: 100px;"></div>
<div class="box-row" style="width: 100px;"></div>
</Flex>
</Flex>
</Flex>
```
### Nested Grids
Nest grids inside grids inside grids.
......
......@@ -9,14 +9,14 @@
margin: 0 auto;
padding-left: #{$layout-gutter}px;
padding-right: #{$layout-gutter}px;
&--fluid {
&.fluid {
max-width: 100%;
}
&--nogutter {
&.nogutter {
padding-left: 0;
padding-right: 0;
}
&--debug {
&.debug {
background: transparentize($layout-color-debug-container, .8);
border: dashed 1px transparentize($layout-color-debug-container, .6);
}
......@@ -27,172 +27,177 @@
flex-direction: row;
flex-wrap: wrap;
margin: 0 #{$layout-gutter}px;
&--reset {
&.reset {
padding: 0;
list-style: none;
}
&--reverse {
&.reverse {
flex-direction: row-reverse;
}
&--align-stretch {
&.align-stretch {
align-items: stretch;
}
&--align-start {
&.align-start {
align-items: flex-start;
}
&--align-end {
&.align-end {
align-items: flex-end;
}
&--align-center {
&.align-center {
align-items: center;
}
&--align-baseline {
&.align-baseline {
align-items: baseline;
}
&--justify-start {
&.justify-start {
justify-content: flex-start;
}
&--justify-end {
&.justify-end {
justify-content: flex-end;
}
&--justify-center {
&.justify-center {
justify-content: center;
}
&--justify-between {
&.justify-between {
justify-content: space-between;
}
&--justify-around {
&.justify-around {
justify-content: space-around;
}
&--justify-evenly {
&.justify-evenly {
justify-content: space-evenly;
}
&--justify-initial {
&.justify-initial {
justify-content: initial;
}
&--justify-inherit {
&.justify-inherit {
justify-content: inherit;
}
&--grow {
&.grow {
flex-grow: 1;
}
&--nowrap {
&.nowrap {
flex-wrap: nowrap;
}
&--nogutter {
&.nogutter {
margin: 0
}
&--debug {
&.debug {
background: transparentize($layout-color-debug-row, .8);
border: dashed 1px transparentize($layout-color-debug-row, .6);
}
}
&__col {
flex-direction: column;
flex: 1;
padding-left: #{$layout-gutter/2}px;
padding-right: #{$layout-gutter/2}px;
&--reverse {
flex-direction: column-reverse;
&.reverse {
flex-direction: row-reverse;
}
&.stack {
flex-direction: column;
&.reverse {
flex-direction: column-reverse;
}
}
&--align-stretch {
&.align-stretch {
align-items: stretch;
}
&--align-start {
&.align-start {
align-items: flex-start;
}
&--align-end {
&.align-end {
align-items: flex-end;
}
&--align-center {
&.align-center {
align-items: center;
}
&--align-baseline {
&.align-baseline {
align-items: baseline;
}
&--justify-start {
&.justify-start {
justify-content: flex-start;
}
&--justify-end {
&.justify-end {
justify-content: flex-end;
}
&--justify-center {
&.justify-center {
justify-content: center;
}
&--justify-between {
&.justify-between {
justify-content: space-between;
}
&--justify-around {
&.justify-around {
justify-content: space-around;
}
&--justify-evenly {
&.justify-evenly {
justify-content: space-evenly;
}
&--justify-initial {
&.justify-initial {
justify-content: initial;
}
&--justify-inherit {
&.justify-inherit {
justify-content: inherit;
}
&--first {
&.first {
order: -1;
}
&--last {
&.last {
order: 1;
}
@mixin media-query($breakpoint) {
&--#{$breakpoint},
&--#{$breakpoint}-1,
&--#{$breakpoint}-2,
&--#{$breakpoint}-3,
&--#{$breakpoint}-4,
&--#{$breakpoint}-5,
&--#{$breakpoint}-6,
&--#{$breakpoint}-7,
&--#{$breakpoint}-8,
&--#{$breakpoint}-9,
&--#{$breakpoint}-10,
&--#{$breakpoint}-11,
&--#{$breakpoint}-12,
&--#{$breakpoint}-shift-0,
&--#{$breakpoint}-shift-1,
&--#{$breakpoint}-shift-2,
&--#{$breakpoint}-shift-3,
&--#{$breakpoint}-shift-4,
&--#{$breakpoint}-shift-5,
&--#{$breakpoint}-shift-6,
&--#{$breakpoint}-shift-7,
&--#{$breakpoint}-shift-8,
&--#{$breakpoint}-shift-9,
&--#{$breakpoint}-shift-10,
&--#{$breakpoint}-shift-11,
&--#{$breakpoint}-shift-12 {
&.#{$breakpoint},
&.#{$breakpoint}-1,
&.#{$breakpoint}-2,
&.#{$breakpoint}-3,
&.#{$breakpoint}-4,
&.#{$breakpoint}-5,
&.#{$breakpoint}-6,
&.#{$breakpoint}-7,
&.#{$breakpoint}-8,
&.#{$breakpoint}-9,
&.#{$breakpoint}-10,
&.#{$breakpoint}-11,
&.#{$breakpoint}-12,
&.#{$breakpoint}-shift-0,
&.#{$breakpoint}-shift-1,
&.#{$breakpoint}-shift-2,
&.#{$breakpoint}-shift-3,
&.#{$breakpoint}-shift-4,
&.#{$breakpoint}-shift-5,
&.#{$breakpoint}-shift-6,
&.#{$breakpoint}-shift-7,
&.#{$breakpoint}-shift-8,
&.#{$breakpoint}-shift-9,
&.#{$breakpoint}-shift-10,
&.#{$breakpoint}-shift-11,
&.#{$breakpoint}-shift-12 {
flex: 0 0 auto;
padding-right: #{$layout-gutter/2}px;
padding-left: #{$layout-gutter/2}px;
}
&--#{$breakpoint} {
&.#{$breakpoint} {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
@each $column in $var-columns-top {
&--#{$breakpoint}-#{$column} {
&.#{$breakpoint}-#{$column} {
flex-basis: calc((100% * #{$column}) / #{$layout-columns});
max-width: calc((100% * #{$column}) / #{$layout-columns});
}
}
&--#{$breakpoint}-shift-0 {
&.#{$breakpoint}-shift-0 {
margin-left: 0;
}
@each $column in $var-columns-bottom {
&--#{$breakpoint}-shift-#{$column} {
&.#{$breakpoint}-shift-#{$column} {
margin-left: calc((100% * #{$column}) / #{$layout-columns});
}
}
......@@ -206,11 +211,11 @@
}
}
&--nogutter {
&.nogutter {
padding-left: 0;
padding-right: 0;
}
&--debug {
&.debug {
background: transparentize($layout-color-debug-column, .8);
border: dashed 1px transparentize($layout-color-debug-column, .6);
}
......