Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-19 15:30:23 +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/mixins.scss';
/* Rows and Columns */
.md-layout {
display: flex;
flex-direction: row;
flex: 1;
}
.md-row {
flex-direction: row;
@mixin layout($size: null) {
@if $size == null {
$size : '';
}
@if $size != '' {
$size : '-#{$size}';
}
.md-row#{$size} {
flex-direction: row;
}
.md-column#{$size} {
flex-direction: column;
}
}
.md-column {
flex-direction: column;
}
@include layout();
/* Gutter Size */
@ -84,19 +99,12 @@ $sizes: (8, 16, 24, 40);
/* Responsive Breakpoints */
@mixin breakpoint-layout($size) {
.md-column-#{$size} {
flex-direction: column;
}
.md-row-#{$size} {
flex-direction: row;
}
@include layout($size);
@include layout-flex($size);
.md-hide-#{$size} {
display: none;
}
@include layout-flex($size);
}
@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('small', 'mdFlexSmall', classes);
this.generateFlexClasses('medium', 'mdFlexMedium', classes);