feat(aio): code block styles with header

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

View File

@ -16,7 +16,7 @@ import { Component, ElementRef, OnInit } from '@angular/core';
selector: 'code-example',
template: `
<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 {

View File

@ -165,7 +165,7 @@ describe('CodeComponent', () => {
@Component({
selector: 'aio-host-comp',
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 {

View File

@ -26,7 +26,7 @@ code-example header {
color: $offwhite;
font-size: 16px;
padding: 10px;
margin: -10px;
margin: -17px;
}
code-example.is-anti-pattern header {
@ -57,7 +57,7 @@ aio-code pre {
white-space: pre-wrap;
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 {
color: $darkred;
}
@ -87,6 +93,7 @@ code ol {
&:hover {
color: $mediumgray;
}
@media (max-width: 480px) {
top: 0;
bottom: 0;
@ -102,6 +109,7 @@ code ol {
.code-tab-group div.mat-tab-body-content {
height: auto;
transform: none;
}
$blue-grey-50: #ECEFF1;
@ -175,7 +183,7 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
/* PRINT COLORS */
@media print {
@media print {
border: none;
box-shadow: none;
@ -212,4 +220,13 @@ code-example.code-shell, code-example[language=sh], code-example[language=bash]
.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;
}