fix(visual): added mixin for body&html

.stylelintrc

@@ -14,7 +14,6 @@
             "ignore": ["after-comment", "first-nested"]
         }],
         "selector-type-case": "lower",
-        "selector-pseudo-element-colon-notation": "single",
         "max-nesting-depth": 4,
         "number-leading-zero": ["always", {
             "message": "zero before dot"

src/lib/core/visual/_all-visual.scss

@@ -7,6 +7,7 @@
 
     // include specific mixins
 
+    @include body_html();
     @include layouts_for_breakpoint();
     @include layout-padding-margin();
 

src/lib/core/visual/_body.scss

@@ -2,45 +2,48 @@
 @import '../styles/common/size';
 
 
-// HTML & Body reset
-html, body {
-    @include square(100%);
-}
-
-// Document
-//
-// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
-// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
-// 3. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
-//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box; // 1
-}
-
-html {
-    -webkit-text-size-adjust: 100%; // 2
-    -ms-text-size-adjust: 100%; // 2
-
-    -ms-overflow-style: scrollbar; // 3
-
-    -moz-osx-font-smoothing: grayscale;
-
-    // Helps fonts on OSX looks more consistent with other systems
-    // Isn't currently in button styles due to performance concerns
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
-    -webkit-touch-callout: none;
-}
-
-// Body
-//
-// 1. remove the margin in all browsers.
-
-body {
-    font-family: map-get(map-get($fonts, 'base'), font-family);
-    margin: 0; // 1
+@mixin body_html() {
+
+    // HTML & Body reset
+    html, body {
+        @include square(100%);
+    }
+
+    // Document
+    //
+    // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
+    // 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
+    // 3. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
+    //    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
+    // 4. Change the default tap highlight to be completely transparent in iOS.
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box; // 1
+    }
+
+    html {
+        -webkit-text-size-adjust: 100%; // 2
+        -ms-text-size-adjust: 100%; // 2
+
+        -ms-overflow-style: scrollbar; // 3
+
+        -moz-osx-font-smoothing: grayscale;
+
+        // Helps fonts on OSX looks more consistent with other systems
+        // Isn't currently in button styles due to performance concerns
+        -webkit-font-smoothing: antialiased;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
+        -webkit-touch-callout: none;
+    }
+
+    // Body
+    //
+    // 1. remove the margin in all browsers.
+
+    body {
+        font-family: map-get(map-get($fonts, 'base'), font-family);
+        margin: 0; // 1
+    }
 }

src/lib/core/visual/_layout.scss

@@ -112,7 +112,9 @@
         display: -ms-flexbox;
         display: flex;
     }
+
     .layout#{$name}-column {  flex-direction: column;     }
+
     .layout#{$name}-row    {  flex-direction: row;        }
 }