diff --git a/docs/src/pages/ui-elements/Layout.vue b/docs/src/pages/ui-elements/Layout.vue
index aa1bb62..c404525 100644
--- a/docs/src/pages/ui-elements/Layout.vue
+++ b/docs/src/pages/ui-elements/Layout.vue
@@ -64,6 +64,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -104,67 +170,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/mdLayout/mdLayout.scss b/src/components/mdLayout/mdLayout.scss
index 102cd73..a6f3c90 100644
--- a/src/components/mdLayout/mdLayout.scss
+++ b/src/components/mdLayout/mdLayout.scss
@@ -93,24 +93,37 @@ $sizes: (8, 16, 24, 40);
.md-flex#{$size}-33 {
min-width: 33.33333%;
- max-width: 33.33333%;
flex: 0 1 33.33333%;
}
.md-flex#{$size}-66 {
min-width: 33.33333%;
- max-width: 33.33333%;
flex: 0 1 66.66666%;
}
- @for $i from 0 through 20 {
+ @if $size == '' {
+ .md-flex-offset-33 {
+ margin-left: 33.33333%;
+ }
+
+ .md-flex-offset-66 {
+ margin-left: 66.66666%;
+ }
+ }
+
+ @for $i from 1 through 20 {
$counter: $i * 5;
.md-flex#{$size}-#{$counter} {
min-width: #{$counter + '%'};
- max-width: #{$counter + '%'};
flex: 0 1 #{$counter + '%'};
}
+
+ @if $size == '' {
+ .md-flex-offset-#{$counter} {
+ margin-left: #{$counter + '%'};
+ }
+ }
}
}
diff --git a/src/components/mdLayout/mdLayout.vue b/src/components/mdLayout/mdLayout.vue
index 9376f59..098266c 100644
--- a/src/components/mdLayout/mdLayout.vue
+++ b/src/components/mdLayout/mdLayout.vue
@@ -30,7 +30,8 @@
mdFlexSmall: [String, Number, Boolean],
mdFlexMedium: [String, Number, Boolean],
mdFlexLarge: [String, Number, Boolean],
- mdFlexXlarge: [String, Number, Boolean]
+ mdFlexXlarge: [String, Number, Boolean],
+ mdFlexOffset: [String, Number]
},
computed: {
classes() {
@@ -62,6 +63,10 @@
}
}
+ if (this.mdFlexOffset) {
+ classes['md-flex-offset-' + this.mdFlexOffset] = true;
+ }
+
this.generateFlexClasses('', 'mdFlex', classes);
this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
this.generateFlexClasses('small', 'mdFlexSmall', classes);