remove unnecessary css && update app.code

src/app/app.blockviewer.component.scss

@@ -88,7 +88,7 @@
     overflow: hidden;
 }
 
-pre[class*="language-"] {
+:host ::ng-deep pre[class*="language-"] {
     margin: 0 !important;
 
     &:before, &:after {
@@ -103,31 +103,6 @@ pre[class*="language-"] {
         color: var(--text-color);
         font-size: 14px;
         padding: 0 2rem !important;
-    
-        .token {
-            &.tag,
-            &.keyword {
-                color: #2196F3 !important;
-            }
-    
-            &.attr-name,
-            &.attr-string {
-                color: #2196F3 !important;
-            }
-    
-            &.attr-value {
-                color: #4CAF50 !important;
-            }
-    
-            &.punctuation {
-                color: var(--text-color);
-            }
-    
-            &.operator,
-            &.string {
-                background: transparent;
-            }
-        }
     }
 }
 
@@ -142,7 +117,3 @@ pre[class*="language-"] {
         }
     }
 }
-::ng-deep pre{
-    margin: 0 !important;
-    padding: 0 !important;
-}

src/app/app.blockviewer.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { environment } from '../environments/environment';
+
 enum BlockView {
   PREVIEW,
   CODE
@@ -30,7 +31,8 @@ enum BlockView {
                 <ng-content></ng-content>
             </div>
             <div *ngIf="blockView == BlockView.CODE && !codeDisabled">
-                <app-code lang="markup" ngPreserveWhitespaces>{{code}}</app-code>
+                <app-code lang="markup" ngPreserveWhitespaces>{{code}}
+                </app-code>
             </div>
         </div>
     </div>

src/app/app.code.component.scss

@@ -1,68 +0,0 @@
-.p-d-flex > div,
-.box {
-	background-color: var(--surface-e);
-	text-align: center;
-	padding: 1rem;
-	border-radius: 4px;
-	box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
-}
-
-.p-d-flex > div {
-	width: 8rem;
-}
-
-i:not([class~="pi"]) {
-	background-color: var(--surface-b);
-	color: var(--primary-color);
-	font-family: Monaco, courier, monospace;
-	font-style: normal;
-	font-size: 12px;
-	padding: 2px 4px;
-	letter-spacing: .5px;
-	border-radius: 3px;
-	font-weight: 600;
-}
-
-:host ::ng-deep pre[class*="language-"] {
-	box-shadow: none;
-	border: 0 none;
-
-	&:before, &:after {
-		display: none !important;
-	}
-
-	code {
-		border-left: 0px solid var(--surface-d) !important;
-		box-shadow: none !important;
-		background: var(--surface-b) !important;
-		margin: 0 !important;
-		padding-bottom: 1.5rem;
-		color: var(--text-color);
-		font-size: 14px;
-
-		.token {
-			&.tag,
-			&.keyword {
-				color: #2196F3 !important;
-			}
-
-			&.attr-name,
-			&.attr-string {
-				color: #2196F3 !important;
-			}
-
-			&.attr-value {
-				color: #4CAF50 !important;
-			}
-
-			&.punctuation {
-				color: var(--text-color);
-			}
-
-			&.operator,
-			&.string {
-				background: transparent;
-			}
-		}
-	}
-}

src/app/app.code.component.ts

@@ -7,7 +7,6 @@ import { CommonModule } from '@angular/common';
         <pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
 </code></pre>
     `,
-    styleUrls: ['./app.code.component.scss']
 })
 export class AppCodeComponent implements AfterViewInit {
 

src/app/demo/view/documentation.component.html

@@ -14,7 +14,8 @@
             <p>Sakai has no direct dependency other than PrimeNG. More information about dependencies is available at <a href="https://www.primefaces.org/why-primeng-templates/">Why PrimeNG Templates</a> article.</p>
 
 <app-code  ngPreserveWhitespaces ngNonBindable lang="markup">
-npm install -g @angular/cli</app-code>
+npm install -g @angular/cli
+</app-code>
 
             <p>Once CLI is ready in your system, extract the contents of the Sakai zip file distribution, cd to the directory,
             install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
@@ -22,7 +23,8 @@ npm install -g @angular/cli</app-code>
 <app-code ngPreserveWhitespaces ngNonBindable lang="markup">
 cd sakai-ng
 npm install
-ng serve</app-code>
+ng serve
+</app-code>
 
             <p>The application should run at http://localhost:4200/, you may now start with the development of your application.</p>
 
@@ -39,7 +41,8 @@ Run 'ng test' to execute the unit tests via [Karma](https://karma-runner.github.
 
 Run 'ng e2e' to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-Run 'ng help' for more options.</app-code>
+Run 'ng help' for more options.
+</app-code>
 
             <h5>Structure</h5>
             <p>Sakai consists of 2 main parts; the application layout, layout resources. <i>app.component.html</i> inside app folder is the html template for the base layout,
@@ -78,7 +81,8 @@ Run 'ng help' for more options.</app-code>
     &lt;app-config&gt;&lt;/app-config&gt;
 
     &lt;div *ngIf=&quot;menuActiveMobile&quot; class=&quot;layout-mask p-component-overlay&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;</app-code>
+&lt;/div&gt;
+</app-code>
 
             <h5>Menu</h5>
             <p>Menu is a separate component defined in app.menu.component.ts file based on PrimeNG MenuModel API. In order to define the menuitems,
@@ -115,8 +119,14 @@ export class AppMenuComponent implements OnInit, AfterViewInit &#123;
                     &#123;label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree']&#125;,
                     &#123;label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel']&#125;,
                     &#123;label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay']&#125;,
-                    &#123;label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media']&#125;,
+                    &#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'],
-                    &#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu']&#125;,
+                        children:[
+                            &#123;label: '', component: 'PersonalDemoComponent'&#125;,
+                            &#123;label: 'seat', component: 'SeatDemoComponent'&#125;,
+                            &#123;label: 'payment', component: 'PaymentDemoComponent'&#125;,
+                            &#123;label: 'confirmation', component: 'ConfirmationDemoComponent'&#125;,
+                        ]
+                    &#125;,
                     &#123;label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message']&#125;,
                     &#123;label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file']&#125;,
                     &#123;label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts']&#125;,

src/assets/demo/documentation.scss

@@ -0,0 +1,28 @@
+pre[class*="language-"] {
+    &:before, &:after {
+        display: none !important;
+    }
+
+    code {
+        border-left: 6px solid var(--surface-border) !important;
+        box-shadow: none !important;
+        background: var(--surface-ground) !important;
+        margin: 1em 0;
+        color: var(--text-color);
+        font-size: 14px;
+    }
+}
+
+i:not([class~="pi"]) {
+    background-color: transparent;
+    color: #2196f3;
+    font-family: Monaco, courier, monospace;
+    font-style: normal;
+    font-size: 12px;
+    font-weight: 500;
+    padding: 0 4px;
+    letter-spacing: .5px;
+    font-weight: 600;
+    margin: 0 2px;
+    display: inline-flex;
+}

src/styles.scss

@@ -9,64 +9,3 @@
 @import "assets/demo/flags/flags.css";
 @import "assets/demo/badges.scss";
 @import "assets/demo/documentation.scss";
-
-.docs {
-    i:not([class~="pi"]) {
-        background-color: transparent;
-        color: #2196f3;
-        font-family: Monaco, courier, monospace;
-        font-style: normal;
-        font-size: 12px;
-        font-weight: 500;
-        padding: 0 4px;
-        letter-spacing: .5px;
-        font-weight: 600;
-        margin: 0 2px;
-        display: inline-flex;
-    }
-
-    a {
-        font-weight: 500;
-    }
-}
-
-pre[class*="language-"] {
-    &:before, &:after {
-        display: none !important;
-    }
-
-    code {
-        border-left: 6px solid var(--surface-border) !important;
-        box-shadow: none !important;
-        background: var(--surface-ground) !important;
-        margin: 1em 0;
-        color: var(--text-color);
-        font-size: 14px;
-    }
-
-    .token {
-        &.tag,
-        &.keyword {
-            color: #2196F3 !important;
-        }
-
-        &.attr-name,
-        &.attr-string {
-            color: #2196F3 !important;
-        }
-
-        &.attr-value {
-            color: #4CAF50 !important;
-        }
-
-        &.punctuation {
-            color: var(--text-color);
-        }
-
-        &.operator,
-        &.variable,
-        &.string {
-            background: transparent;
-        }
-    }
-}