Skip to content

Commit

Permalink
feat(docs): new highlightjs themes (#252)
Browse files Browse the repository at this point in the history
  • Loading branch information
Margar1ta authored and pimenovoleg committed Sep 19, 2019
1 parent e7bc7fa commit e36b37c
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 174 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,6 @@
$divider: mc-color($foreground, divider);
$hint-text: mc-color($foreground, hint-text);

.docs-example-source-shadow {
background: linear-gradient(0deg, rgba($divider,1) 0%, rgba($divider,0.5) 50%, rgba($divider,0) 100%);
}

.docs-example-numbers {
background-color: fade_out($divider, 0.5);
color: $hint-text;
}

.docs-example-source {
background-color: $divider;

}

.docs-example-viewer__lost-example {
border: 1px solid $error-border;
background-color: $error-background;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<mc-tab-group mc-light-tabs (selectedTabChange)="setNumbers()">
<mc-tab *ngFor="let tabName of getExampleTabNames()" [label]="tabName">
<div class="docs-example-source-wrapper">
<pre class="docs-example-numbers">{{numbers}}</pre>
<pre class="docs-example-numbers hljs-numbers">{{numbers}}</pre>
<span class="docs-example-source_copy">
<i class="mc mc-copy_16"
(click)="copyCode($event)"
Expand All @@ -21,9 +21,9 @@
mcTrigger="manual"
mcPlacement="bottom"></i>
</span>
<pre class="docs-example-source">
<pre class="docs-example-source hljs">
<doc-viewer #viewer [documentUrl]="exampleTabs[tabName]" class="docs-example-source-viewer"></doc-viewer>
<div class="docs-example-source-shadow {{showSource ? shadowHide : null}}"></div>
<div class="hljs-shadow {{showSource ? shadowHide : null}}"></div>
</pre>
</div>
</mc-tab>
Expand Down
14 changes: 0 additions & 14 deletions packages/docs/src/app/shared/example-viewer/example-viewer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,6 @@
padding: 20px 0 0;
}

.docs-example-source-shadow {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
height: 44px;
width: 100%;
opacity: 1;

&_hidden {
opacity: 0;
}
}

.docs-example-source__show {
text-align: center;
padding: 8px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export class ExampleViewer {

/** Whether the source for the example is being displayed. */
showSource = false;
shadowHide = 'docs-example-source-shadow_hidden';
shadowHide = 'hljs-shadow_hidden';
numbers = '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n';
mcTooltipDelay = 3000;
/** String key of the currently displayed example. */
Expand Down
145 changes: 57 additions & 88 deletions packages/docs/src/highlightjs/material-dark.scss
Original file line number Diff line number Diff line change
@@ -1,124 +1,93 @@
/*
Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme (c) Kelby Gassmanl <[email protected]>
*/
Darcula color scheme from the JetBrains family of IDEs
*/
@mixin material-dark(){
.hljs {
display: block;
overflow-x: auto;
padding: 1em;
background: #2B2B2D;
color: #CDD3D8;
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
font: 300 100%/1 Roboto Mono, monospace;
font-size: 14px;
padding: 0.5em;
background: #2b2b2b;
color: #bababa;
}

.hljs > *::selection {
background-color: #3e4451;
.hljs-numbers {
background-color: #313335;
color: #485965;
}

.hljs-comment {
color: #656565;
font-style: italic;
}
.hljs-shadow {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
height: 44px;
width: 100%;
opacity: 1;
background: linear-gradient(0deg, rgba(#2b2b2b,1) 0%, rgba(#2b2b2b,0.5) 50%, rgba(#2b2b2b,0) 100%);

.hljs-selector-tag {
color: #C792EA;
&_hidden {
opacity: 0;
}
}

.hljs-string,
.hljs-subst {
color: #9ccc65;
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}

.hljs-bullet,
.hljs-quote,
.hljs-link,
.hljs-number,
.hljs-regexp,
.hljs-variable,
.hljs-template-variable {
color: #F77669;
.hljs-literal {
color: #6896ba;
}

.hljs-keyword {
color: #C792EA;
}

.hljs-function > .hljs-title {
color: #75A5FF;
.hljs-code,
.hljs-selector-class {
color: #a6e22e;
}

.hljs-tag {
color: #ce93d8;
.hljs-emphasis {
font-style: italic;
}

.hljs-name {
color: #4dd0e1;
.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-attribute,
.hljs-name,
.hljs-variable {
color: #cb7832;
}

.hljs-type {
color: #da4939;
.hljs-params {
color: #b9b9b9;
}

.hljs-attribute {
color: #80CBBF;
.hljs-string {
color: #6a8759;
}

.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-link {
color: #C792EA;
}

.hljs-params {
color: #EEFFF7;
}


.hljs-meta {
color: #75A5FF;
}

.hljs-title {
color: #75A5FF;
}

.hljs-section {
color: #ffc66d;
}

.hljs-symbol,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-template-tag,
.hljs-template-variable,
.hljs-addition {
background-color: #144212;
color: #e6e1dc;
display: inline-block;
width: 100%;
color: #e0c46c;
}

.hljs-deletion {
background-color: #600;
color: #e6e1dc;
display: inline-block;
width: 100%;
}

.hljs-selector-class {
color: #FFCB68;
}

.hljs-selector-id {
color: #F77669;
}

.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: bold;
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #7f7f7f;
}

.hljs-link {
text-decoration: underline;
}
}
Loading

0 comments on commit e36b37c

Please sign in to comment.