From 8b97e6623b87ca0b09c9d1a34ab14525b1c0aa96 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 28 Aug 2018 07:15:58 +0300
Subject: [PATCH] (ExampleViewer) Updated style and theming compatibility

---
 src/app/app.theme.scss                        |  4 +++
 .../example-viewer/example-viewer.scss        |  7 +++--
 .../example-viewer/example-viewer.theme.scss  | 27 +++++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss

diff --git a/src/app/app.theme.scss b/src/app/app.theme.scss
index 8025cabe..32628c7f 100644
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -113,6 +113,8 @@ $typography: mat-typography-config(
 
 @import "src/app/main/documentation/components/cards/cards.theme";
 
+@import "src/app/main/angular-material-elements/example-viewer/example-viewer.theme";
+
 // Define a mixin for easier access
 @mixin components-theme($theme) {
 
@@ -159,6 +161,8 @@ $typography: mat-typography-config(
     // Docs
     @include docs-components-cards-theme($theme);
 
+    // Example Viewer
+    @include example-viewer-theme($theme);
 }
 
 // -----------------------------------------------------------------------------------------------------
diff --git a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
index 4bd5cf38..b45baaec 100644
--- a/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
+++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.scss
@@ -5,9 +5,9 @@ example-viewer {
     padding: 24px 0;
 
     .example-viewer-wrapper {
-        //border: 1px solid rgba(mat-color($foreground, secondary-text), .03);
         box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
         margin: 4px;
+
         h3 {
             margin-top: 10px;
         }
@@ -19,9 +19,8 @@ example-viewer {
         display: flex;
         justify-content: center;
         padding: 8px 20px;
-        //color: mat-color($foreground, secondary-text);
-        //background: rgba(mat-color($foreground, secondary-text), .03);
         flex: 1 1 auto;
+        border-bottom: 1px solid;
 
         .example-viewer-title {
             flex: 1 1 auto;
@@ -58,7 +57,7 @@ example-viewer {
                     padding: 0;
                     margin: 0;
                     min-height: 150px;
-                    //border-bottom: 1px solid mat-color($foreground, divider);
+                    border-bottom: 1px solid;
 
                     > pre {
                         width: 100%;
diff --git a/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss b/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss
new file mode 100644
index 00000000..a1f904f6
--- /dev/null
+++ b/src/app/main/angular-material-elements/example-viewer/example-viewer.theme.scss
@@ -0,0 +1,27 @@
+@mixin example-viewer-theme($theme) {
+
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    example-viewer {
+
+        .example-viewer-header {
+            color: map-get($foreground, secondary-text);
+            background: map-get($background, app-bar);
+            border-bottom-color: map-get($foreground, divider);
+        }
+
+        .example-viewer-source {
+
+            .tab-content {
+
+                .tab {
+
+                    .example-source {
+                        border-bottom-color: map-get($foreground, divider);
+                    }
+                }
+            }
+        }
+    }
+}