feat(visual): added flex layout

* without media-q

commitlint.config.js

@@ -27,7 +27,7 @@ module.exports = {
                 'progress-bar',
                 'datepicker',
                 'timepicker',
-                'layout'
+                'visual'
             ]
         ]
     }

package.json

@@ -147,7 +147,8 @@
         "server-dev:typography": "npm run server-dev -- --env.component typography",
         "server-dev:badge": "npm run server-dev -- --env.component badge",
         "server-dev:checkbox": "npm run server-dev -- --env.component checkbox",
-        "server-dev:navbar": "npm run server-dev -- --env.component navbar"
+        "server-dev:navbar": "npm run server-dev -- --env.component navbar",
+        "server-dev:layout": "npm run server-dev -- --env.component layout"
     },
     "lint-staged": {
         "linters": {

src/lib-dev/layout/module.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+
+@Component({
+    selector: 'app',
+    template: require('./template.html'),
+    styleUrls: ['./styles.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DemoComponent {}
+
+
+@NgModule({
+    declarations: [
+        DemoComponent
+    ],
+    imports: [
+        BrowserModule
+    ],
+    bootstrap: [
+        DemoComponent
+    ]
+})
+export class DemoModule {}
+
+platformBrowserDynamic()
+    .bootstrapModule(DemoModule)
+    .catch((error) => console.error(error));
+

src/lib-dev/layout/styles.scss

@@ -0,0 +1,36 @@
+@import '../../lib/core/visual/prebuilt/default-visual';
+
+@include mosaic-visual();
+
+.colorNested > div div  {
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
+    opacity: 0.9;
+    color: white;
+    text-align: center;
+}
+
+.colorNested > div div:nth-child(1) {
+    background-color: #009688;
+}
+.colorNested > div div:nth-child(2) {
+    background-color: #3949ab;
+}
+.colorNested > div div:nth-child(3) {
+    background-color: #9c27b0;
+}
+
+.colorNested > div div:nth-child(4) {
+    background-color: #8bc34a;
+}
+
+.colorNested > div div:nth-child(5)  {
+    background-color: #deb867;
+}
+
+.colorNested > div div:nth-child(6) {
+    background-color: #FF5722;
+}
+
+.colorNested > div div:nth-child(7)  {
+    background-color: #03A9F4;
+}

src/lib-dev/layout/template.html

@@ -0,0 +1,76 @@
+<h2>Layout</h2>
+
+<div class="colorNested">
+    <div class="layout-row">
+        <div class="flex">
+            class="flex"
+        </div>
+        <div class="flex">
+            class="flex"
+        </div>
+    </div>
+</div>
+
+<h2>Flex Percent Values</h2>
+<div class="colorNested">
+    <div class="layout-row layout-wrap">
+    <div class="flex-30">
+        class="flex-30"
+    </div>
+    <div class="flex-45">
+        class="flex-45"
+    </div>
+    <div class="flex-25">
+        class="flex-25"
+    </div>
+    <div class="flex-33">
+        class="flex-33"
+    </div>
+    <div class="flex-66">
+        class="flex-66"
+    </div>
+    <div class="flex-50">
+        class="flex-50"
+    </div>
+    <div class="flex">
+        class="flex"
+    </div>
+</div>
+</div>
+
+<h1>Other Flex Values</h1>
+<div class="colorNested">
+    <div class="layout-wrap layout-row">
+        <div class="flex-none">
+            class=flex-none
+        </div>
+        <div class="flex">
+            class=flex
+        </div>
+        <div class="flex-grow">
+            class="flex-grow"
+        </div>
+        <div class="flex-auto">
+            class="flex-auto"
+        </div>
+        <div class="flex-auto">
+            class="flex-auto"
+        </div>
+        <div class="flex-initial">
+            class="flex-initial"
+        </div>
+    </div>
+</div>
+
+<h2>Flex Offset Attribute</h2>
+
+<div class="colorNested">
+    <div class="layout-row">
+        <div class="flex flex-offset-33">
+            class="flex flex-offset-33"
+        </div>
+        <div class="flex">
+            class="flex"
+        </div>
+    </div>
+</div>

src/lib/core/styles/common/_rtl.scss

@@ -0,0 +1,30 @@
+// mixin definition ; sets LTR and RTL within the same style call
+// @see https://css-tricks.com/almanac/properties/d/direction/
+
+@mixin rtl($prop, $ltr-value, $rtl-value) {
+    #{$prop}: $ltr-value;
+
+    [dir=rtl] & {
+        #{$prop}: $rtl-value;
+    }
+}
+
+@mixin rtl-prop($ltr-prop, $rtl-prop, $value, $reset-value) {
+    #{$ltr-prop}: $value;
+
+    [dir=rtl] & {
+        #{$ltr-prop}: $reset-value;
+        #{$rtl-prop}: $value;
+    }
+}
+
+// To reverse padding (top left bottom right) -> (top right bottom left)
+@function rtl-value($list) {
+    @if length($list) == 4 {
+        @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2)
+    }
+    @if length($list) == 5 {
+        @return nth($list, 1) nth($list, 4) nth($list, 3) nth($list, 2) nth($list, 5)
+    }
+    @return $list;
+}

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

@@ -1,6 +1,14 @@
 @import './body';
+@import './layout';
+@import './layout-media';
+
 
 @mixin mosaic-visual() {
 
     // include specific mixins
+
+    @include layouts_for_breakpoint();
+    @include layout-padding-margin();
+
+    @include media-print();
 }

src/lib/core/visual/_layout-media.scss

@@ -0,0 +1,11 @@
+
+
+@mixin media-print {
+
+    @media print {
+
+        .hide-print:not(.show-print):not(.show) {
+            display: none !important;
+        }
+    }
+}