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

feat(aio): code blocks, copy bttn, a tag hover

This commit is contained in:
Stefanie Fluin 2017-03-27 15:37:11 -07:00 committed by Igor Minar
parent 5942b2b27c
commit 146b30796e
5 changed files with 38 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,7 +18,7 @@ export interface TabInfo {
selector: 'code-tabs', selector: 'code-tabs',
template: ` template: `
<md-tab-group> <md-tab-group>
<md-tab *ngFor="let tab of tabs"> <md-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
<template md-tab-label> <template md-tab-label>
<span class="{{tab.class}}">{{ tab.title }}</span> <span class="{{tab.class}}">{{ tab.title }}</span>
</template> </template>

3
aio/src/app/embedded/code/code.component.ts
View File

@ -23,8 +23,9 @@ const copiedLabel = 'Copied!';
@Component({ @Component({
selector: 'aio-code', selector: 'aio-code',
template: ` template: `
<button class="copy-button" #copyButton (click)="doCopy()">{{ buttonLabel }}</button>
<pre class="prettyprint lang-{{language}}"> <pre class="prettyprint lang-{{language}}">
<button class="material-icons copy-button" #copyButton (click)="doCopy()">content_copy</button>
<code class="animated fadeIn" #codeContainer></code> <code class="animated fadeIn" #codeContainer></code>
</pre> </pre>
` `

5
aio/src/styles/0-base/_typography.scss
View File

@ -107,7 +107,7 @@
text-align: left; text-align: left;
} }
p code { p > code {
font-family: $code-font; font-family: $code-font;
font-size: 90%; font-size: 90%;
color: $blue; color: $blue;
@ -120,6 +120,9 @@
.sidenav-content a { .sidenav-content a {
color: $blue; color: $blue;
&:hover {
color: $mediumgray;
}
} }
// } // }

7
aio/src/styles/1-layouts/_search-results.scss
View File

@ -11,12 +11,16 @@ aio-search-results {
width: 100%; width: 100%;
max-height: 40%; max-height: 40%;
position: fixed; position: fixed;
display: flex;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: $darkgray; background-color: $darkgray;
border: 24px solid $darkgray; border: 24px solid $darkgray;
@include bp(tiny) {
display: block;
max-height: 60%;
}
} }
.search-area { .search-area {
@ -43,5 +47,6 @@ aio-search-results {
@include bp(tiny) { @include bp(tiny) {
width: 100%; width: 100%;
display: block;
} }
} }

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

@ -5,8 +5,8 @@ code-tabs md-tab-body {
border-radius: 5px; border-radius: 5px;
color: $darkgray; color: $darkgray;
display: block; display: block;
padding: 10px; padding: 8px;
margin: 24px auto; margin: 16px auto;
} }
code-example header { code-example header {
@ -29,16 +29,33 @@ code-tabs.is-anti-pattern md-tab-body {
border: 0.5px solid $anti-pattern; border: 0.5px solid $anti-pattern;
} }
code-tabs div .mat-tab-body-content {
height: auto;
}
code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
overflow-y: hidden;
}
code-tabs mat-tab-body-content .fadeIn {
animation: opacity 2s ease-in;
}
aio-code pre { aio-code pre {
display: flex; display: flex;
line-height: 1.5;
margin: 0px;
padding: 0px; padding: 0px;
white-space: pre-wrap; white-space: pre-wrap;
li { }
line-height: 60%;
} .copy-button {
top: -16px;
right: -16px;
color: $lightgray;
background-color: transparent;
border: none;
&:hover {
color: $mediumgray;
}
} }
$blue-grey-50: #ECEFF1; $blue-grey-50: #ECEFF1;