Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-19 12:41:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor columns

Browse source
This commit is contained in:
Marcos Moura 2016-12-13 21:30:07 -02:00
parent d04f48f211
commit b2fcce9d95
2 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/mdLayout/mdLayout.scss
View file

@ -1,19 +1,34 @@
@import '../../core/stylesheets/variables.scss'; @import '../../core/stylesheets/variables.scss';
@import '../../core/stylesheets/mixins.scss'; @import '../../core/stylesheets/mixins.scss';
/* Rows and Columns */
.md-layout { .md-layout {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex: 1; flex: 1;
} }
.md-row { @mixin layout($size: null) {
flex-direction: row; @if $size == null {
$size : '';
}
@if $size != '' {
$size : '-#{$size}';
}
.md-row#{$size} {
flex-direction: row;
}
.md-column#{$size} {
flex-direction: column;
}
} }
.md-column { @include layout();
flex-direction: column;
}
/* Gutter Size */ /* Gutter Size */
@ -84,19 +99,12 @@ $sizes: (8, 16, 24, 40);
/* Responsive Breakpoints */ /* Responsive Breakpoints */
@mixin breakpoint-layout($size) { @mixin breakpoint-layout($size) {
.md-column-#{$size} { @include layout($size);
flex-direction: column; @include layout-flex($size);
}
.md-row-#{$size} {
flex-direction: row;
}
.md-hide-#{$size} { .md-hide-#{$size} {
display: none; display: none;
} }
@include layout-flex($size);
} }
@include layout-xlarge { @include layout-xlarge {

2
src/components/mdLayout/mdLayout.vue
View file

@ -67,7 +67,7 @@
} }
} }
this.generateFlexClasses(null, 'mdFlex', classes); this.generateFlexClasses('', 'mdFlex', classes);
this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes); this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
this.generateFlexClasses('small', 'mdFlexSmall', classes); this.generateFlexClasses('small', 'mdFlexSmall', classes);
this.generateFlexClasses('medium', 'mdFlexMedium', classes); this.generateFlexClasses('medium', 'mdFlexMedium', classes);