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

Author: mrwhy-orig

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);
 }

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;