honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(aio): code block styles with header

Browse Source
This commit is contained in:
Stefanie Fluin 2017-04-03 11:16:33 -07:00 committed by Pete Bacon Darwin
parent 38d75d410e
commit 2798c1bbec
3 changed files with 57 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/embedded/code/code-example.component.ts
View File

@ -16,7 +16,7 @@ import { Component, ElementRef, OnInit } from '@angular/core';
selector: 'code-example', selector: 'code-example',
template: ` template: `
<header *ngIf="title">{{title}}</header> <header *ngIf="title">{{title}}</header>
<aio-code [code]="code" [language]="language" [linenums]="linenums"></aio-code> <aio-code [ngClass]="{'headed-code':title, 'simple-code':!title}" [code]="code" [language]="language" [linenums]="linenums"></aio-code>
` `
}) })
export class CodeExampleComponent implements OnInit { // implements AfterViewInit { export class CodeExampleComponent implements OnInit { // implements AfterViewInit {

2
aio/src/app/embedded/code/code.component.spec.ts
View File

@ -165,7 +165,7 @@ describe('CodeComponent', () => {
@Component({ @Component({
selector: 'aio-host-comp', selector: 'aio-host-comp',
template: ` template: `
<aio-code [code]="code" [language]="language" [linenums]="linenums"></aio-code> <aio-code md-no-ink [code]="code" [language]="language" [linenums]="linenums"></aio-code>
` `
}) })
class HostComponent { class HostComponent {

93
aio/src/styles/2-modules/_code.scss
View File

@ -26,7 +26,7 @@ code-example header {
color: $offwhite; color: $offwhite;
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
margin: -10px; margin: -17px;
} }
code-example.is-anti-pattern header { code-example.is-anti-pattern header {
@ -57,7 +57,7 @@ aio-code pre {
white-space: pre-wrap; white-space: pre-wrap;
code span, code ol li { code span, code ol li {
line-height: 18px; line-height: 24px;
} }
} }
@ -72,6 +72,12 @@ code ol {
} }
} }
aio-code.headed-code {
pre.prettyprint {
margin-top: 32px;
}
}
.code-missing { .code-missing {
color: $darkred; color: $darkred;
} }
@ -87,6 +93,7 @@ code ol {
&:hover { &:hover {
color: $mediumgray; color: $mediumgray;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -102,6 +109,7 @@ code ol {
.code-tab-group div.mat-tab-body-content { .code-tab-group div.mat-tab-body-content {
height: auto; height: auto;
transform: none;
} }
$blue-grey-50: #ECEFF1; $blue-grey-50: #ECEFF1;
@ -175,41 +183,50 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
/* PRINT COLORS */ /* PRINT COLORS */
@media print { @media print {
border: none; border: none;
box-shadow: none; box-shadow: none;
ol { ol {
background: $white; background: $white;
}
.kwd {
color: $darkgray;
}
.typ,
.tag {
color: $darkred;
}
.str,
.atv {
color: $blue;
}
.atn {
color: $blue;
}
.com {
color: $mediumgray;
}
.lit {
color: $blue;
}
.pun {
color: $blue-grey-700;
}
.pln {
color: $green-800;
}
.dec {
color: $blue;
}
} }
.kwd {
color: $darkgray;
}
.typ,
.tag {
color: $darkred;
}
.str,
.atv {
color: $blue;
}
.atn {
color: $blue;
}
.com {
color: $mediumgray;
}
.lit {
color: $blue;
}
.pun {
color: $blue-grey-700;
}
.pln {
color: $green-800;
}
.dec {
color: $blue;
}
}
// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-list, code-tabs md-tab-gropu *.mat-tab-body-content {
transform: none !important;
}
[role="tabpanel"] {
transition: none;
}