fix(MdLayout): add xlarge and large classes to the layout component (#…

…1323) * Update layout.scss with large and xlarge props * Added md-gutter-xlarge variable * Removed Trailing white spaces * fix: change gutter for large size
vuematerial · Dec 22, 2017 · 6c5fe65 · 6c5fe65
1 parent f983c53
commit 6c5fe65
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/components/MdLayout/layout.scss b/src/components/MdLayout/layout.scss
@@ -23,7 +23,11 @@
  */
 
 .md-layout {
-  @include md-layout-gutter($md-gutter-large);
+  @include md-layout-gutter($md-gutter-xlarge);
+
+  @include md-layout-large {
+    @include md-layout-gutter($md-gutter-large);
+  }
 
   @include md-layout-medium {
     @include md-layout-gutter($md-gutter-medium);
@@ -62,6 +66,14 @@
 
   @include md-layout-item;
 
+  @include md-layout-xlarge {
+    @include md-layout-item(xlarge);
+  }
+
+  @include md-layout-large {
+    @include md-layout-item(large);
+  }
+
   @include md-layout-medium {
     @include md-layout-item(medium);
   }
@@ -82,6 +94,14 @@
 
 @include md-hide;
 
+@include md-layout-xlarge {
+  @include md-hide(xlarge);
+}
+
+@include md-layout-large {
+  @include md-hide(large);
+}
+
 @include md-layout-medium {
   @include md-hide(medium);
 }

diff --git a/src/components/MdLayout/variables.scss b/src/components/MdLayout/variables.scss
@@ -23,3 +23,4 @@ $md-gutter-xsmall: 8px;
 $md-gutter-small: 16px;
 $md-gutter-medium: 24px;
 $md-gutter-large: 40px;
+$md-gutter-xlarge: 40px;