feat(layout): added layout elements

package.json

@@ -141,6 +141,7 @@
         "server-dev:checkbox": "npm run server-dev -- --env.component checkbox",
         "server-dev:icon": "npm run server-dev -- --env.component icon",
         "server-dev:input": "npm run server-dev -- --env.component input",
+        "server-dev:flex-layout": "npm run server-dev -- --env.component flex-layout",
         "server-dev:layout": "npm run server-dev -- --env.component layout",
         "server-dev:link": "npm run server-dev -- --env.component link",
         "server-dev:list": "npm run server-dev -- --env.component list",

src/lib-dev/flex-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/flex-layout/styles.scss

@@ -0,0 +1,37 @@
+@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;
+    height: 80px;
+}
+
+.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/flex-layout/template.html

@@ -0,0 +1,101 @@
+<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>
+
+<h2>Other Flex Values</h2>
+<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>
+
+<h2>Layout Gap</h2>
+
+<div class="colorNested layout-column">
+    <div class="layout-row">
+        <div class="flex layout-margin">
+            <h3>Card title #1</h3>
+            <p>Some content</p>
+        </div>
+        <div class="flex layout-margin">
+            <h3>Card title #2</h3>
+                <p>Some content</p>
+        </div>
+    </div>
+    <div class="layout-row">
+        <div class="flex layout-margin">
+            <h3>Card title #1</h3>
+            <p>Some content</p>
+        </div>
+        <div class="flex layout-margin">
+            <h3>Card title #2</h3>
+            <p>Some content</p>
+        </div>
+    </div>
+</div>

src/lib-dev/layout/module.ts

@@ -2,6 +2,10 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { McIconModule } from '../../lib/icon';
+import { McLayoutModule } from '../../lib/layout';
+import { McNavbarModule } from '../../lib/navbar/';
+
 
 @Component({
     selector: 'app',
@@ -17,7 +21,10 @@ export class DemoComponent {}
         DemoComponent
     ],
     imports: [
-        BrowserModule
+        BrowserModule,
+        McLayoutModule,
+        McNavbarModule,
+        McIconModule
     ],
     bootstrap: [
         DemoComponent

src/lib-dev/layout/styles.scss

@@ -1,37 +1,26 @@
-@import '../../lib/core/visual/prebuilt/default-visual';
-
-@include mosaic-visual();
+@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
 
-.colorNested > div div  {
-    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
-    opacity: 0.9;
-    color: white;
-    text-align: center;
-    height: 80px;
-}
+@import '../../lib/core/theming/prebuilt/default-theme';
+@import '../../lib/core/visual/prebuilt/default-visual';
 
-.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;
+.mc-layout-header,
+.mc-layout-footer {
+    background: #7dbcea;
+    color: #fff;
 }
 
-.colorNested > div div:nth-child(5)  {
-    background-color: #deb867;
+.mc-layout-sidebar {
+    background: #3ba0e9;
+    color: #fff;
 }
 
-.colorNested > div div:nth-child(6) {
-    background-color: #FF5722;
+.mc-layout-content {
+    background: rgba(16, 142, 233, 1);
+    color: #fff;
+    min-height: 120px;
 }
 
-.colorNested > div div:nth-child(7)  {
-    background-color: #03A9F4;
+.mc-layout:last-child {
+    margin: 0;
 }