remove unnecessary css && update app.code

This commit is contained in:
Çetin 2021-12-23 12:02:33 +03:00
parent 6d82b10cd3
commit bbab294d80
7 changed files with 49 additions and 168 deletions

View File

@ -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;
}
}
}
}
@ -141,8 +116,4 @@ pre[class*="language-"] {
margin-left: 0;
}
}
}
::ng-deep pre{
margin: 0 !important;
padding: 0 !important;
}

View File

@ -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>

View File

@ -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;
}
}
}
}

View File

@ -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 {

View File

@ -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']&#125;,
&#123;label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'],
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;,

View File

@ -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;
}

View File

@ -8,65 +8,4 @@
@import "../node_modules/@fullcalendar/timegrid/main.min.css";
@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;
}
}
}
@import "assets/demo/documentation.scss";