feat(stark-ui): improve example viewer styling

ISSUES CLOSED: #515
NationalBankBelgium · Jul 18, 2018 · bad3746 · bad3746
1 parent 913a7b6
commit bad3746
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 78 deletions.
diff --git a/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss b/showcase/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -2,13 +2,23 @@ example-viewer {
   .example-viewer-wrapper {
     background-color: #fff;
     margin: 4px;
+    .stark-pretty-print {
+      pre[class*="language-"] {
+        padding: 1em;
+        margin: 0;
+        border-radius: 0;
+      }
+    }
+    .mat-tab-body-wrapper {
+      border-bottom: 1px solid #555;
+    }
   }
   .example-viewer-title {
     color: #fff;
     background-color: mat-color(map-get($base-theme, primary-palette), 700);
   }
   .mat-tab-body {
-    background-color: mat-color($mat-light-theme-background, card);
+    background-color: #272822;
   }
   .example-viewer-body {
     background-color: mat-color($mat-light-theme-background, card);
@@ -22,80 +32,4 @@ example-viewer {
     border-bottom: 1px solid mat-color($mat-light-theme-foreground, divider);
     overflow-x: scroll;
   }
-
-  .hljs {
-    display: block;
-    overflow-x: auto;
-    padding: 1em;
-    background: #fafafa;
-    color: #37474f;
-    -webkit-font-smoothing: antialiased;
-    text-size-adjust: 100%;
-    font: 300 100%/1 Roboto Mono, monospace;
-    font-size: 14px;
-  }
-  .hljs > *::selection,
-  .hljs-section {
-    background-color: #d6edea;
-  }
-  .hljs-comment {
-    color: #b0bec5;
-    font-style: italic;
-  }
-  .hljs-tag,
-  .hljs-selector-tag,
-  .hljs-regexp,
-  .hljs-meta {
-    color: #9c27b0;
-  }
-  .hljs-string,
-  .hljs-subst {
-    color: #0d904f;
-  }
-  .hljs-number,
-  .hljs-variable,
-  .hljs-template-variable {
-    color: #80cbc4;
-  }
-  .hljs-name,
-  .hljs-keyword,
-  .hljs-type,
-  .hljs-attribute {
-    color: #3b78e7;
-  }
-  .hljs-title,
-  .hljs-function > .hljs-title,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-built_in,
-  .hljs-builtin-name,
-  .hljs-link {
-    color: #6182b8;
-  }
-  .hljs-params {
-    color: #d81b60;
-  }
-  .hljs-addition {
-    color: #3b78e7;
-    display: inline-block;
-    width: 100%;
-  }
-  .hljs-deletion {
-    color: #e53935;
-    display: inline-block;
-    width: 100%;
-  }
-  .hljs-selector-id,
-  .hljs-selector-class {
-    color: #8796b0;
-  }
-  .hljs-emphasis {
-    font-style: italic;
-  }
-  .hljs-strong {
-    font-weight: bold;
-  }
-  .hljs-link {
-    text-decoration: underline;
-  }
 }
diff --git a/showcase/src/app/shared/example-viewer/example-viewer.component.html b/showcase/src/app/shared/example-viewer/example-viewer.component.html
@@ -18,7 +18,6 @@
 			</mat-tab>
 		</mat-tab-group>
 	</div>
-
 	<div class="example-viewer-body">
 		<ng-content></ng-content>
 	</div>