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

feat(aio): overall margin, code, alert styles

This commit is contained in:
Stefanie Fluin 2017-03-28 17:15:02 -07:00 committed by Igor Minar
parent f518e3a75f
commit 43a9619e57
18 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/app/embedded/api/api-list.component.scss
View File

@ -413,7 +413,7 @@ p {
} }
.api-doc-code { .api-doc-code {
border-bottom: 0px; border-bottom: 0;
:hover { :hover {
border-bottom: none; border-bottom: none;

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

@ -17,7 +17,7 @@ export interface TabInfo {
@Component({ @Component({
selector: 'code-tabs', selector: 'code-tabs',
template: ` template: `
<md-tab-group> <md-tab-group class="code-tab-group">
<md-tab style="overflow-y: hidden;" *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>

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

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

1
aio/src/app/layout/top-menu/top-menu.component.ts
View File

@ -8,6 +8,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
<li><a class="nav-link" href="overview" title="Angular Documentation">Docs</a></li> <li><a class="nav-link" href="overview" title="Angular Documentation">Docs</a></li>
<li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url" [title]="node.title">{{ node.title }}</a></li> <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url" [title]="node.title">{{ node.title }}</a></li>
</ul>`, </ul>`,
styleUrls: ['top-menu.component.scss'] styleUrls: ['top-menu.component.scss']
}) })
export class TopMenuComponent { export class TopMenuComponent {

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

@ -13,7 +13,7 @@
display:inline-block; display:inline-block;
font-size: 36px; font-size: 36px;
font-weight: 400; font-weight: 400;
margin: 12px 0px; margin: 8px 0px;
} }
h1:after { h1:after {
@ -21,21 +21,20 @@
display: block; display: block;
height: 1px; height: 1px;
width: 40%; width: 40%;
margin: 30px 0px 10px; margin: 32px 0px 10px;
background: $lightgray; background: $lightgray;
} }
h2 { h2 {
font-size: 30px; font-size: 30px;
font-weight: 500; font-weight: 500;
margin: 48px 0px 32px; margin: 32px 0px 24px;
} }
h3 { h3 {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
margin: 12px 0px; margin: 24px 0px;
text-transform: uppercase;
} }
h4 { h4 {
@ -52,7 +51,7 @@
} }
.mat-tab-body-wrapper h2 { .mat-tab-body-wrapper h2 {
margin-top: 0px; margin-top: 0;
} }
p, ol, ul, ol, li, input, a { p, ol, ul, ol, li, input, a {
@ -77,6 +76,10 @@
text-transform: uppercase; text-transform: uppercase;
} }
strong {
font-weight: 500;
}
table { table {
border-collapse: collapse; border-collapse: collapse;
border-radius: 2px; border-radius: 2px;
@ -118,6 +121,11 @@
border-radius: 4px; border-radius: 4px;
} }
code {
font-family: $code-font;
font-size: 90%;
}
.sidenav-content a { .sidenav-content a {
color: $blue; color: $blue;
&:hover { &:hover {

5
aio/src/styles/1-layouts/_content-layout.scss
View File

@ -1,6 +1,5 @@
.sidenav-content { .sidenav-content {
padding: 1rem 3rem; padding: 1rem 3rem 3rem;
height: 100vh;
margin: auto; margin: auto;
} }
@ -25,7 +24,7 @@
.l-sub-section { .l-sub-section {
color: $blue; color: $blue;
margin: 0px 0px 10px 0px; margin: 0 0 10px 0px;
padding: 10px; padding: 10px;
background: $offwhite; background: $offwhite;
border-left: 4px solid $blue; border-left: 4px solid $blue;

4
aio/src/styles/1-layouts/_footer.scss
View File

@ -1,8 +1,10 @@
footer { footer {
position: relative; position: relative;
line-height: 24px;
} }
footer .footer { footer .footer {
flex: 1;
padding: 20px; padding: 20px;
z-index: 10; z-index: 10;
background-color: $blue; background-color: $blue;
@ -20,7 +22,7 @@ footer .footer {
} }
} }
p { p {
margin: 0px 0px 5px; margin: 0 0 5px;
} }
} }

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

@ -26,7 +26,7 @@ aio-search-results {
.search-area { .search-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0px 10px; margin: 0 10px;
h2 { h2 {
font-size: 16px; font-size: 16px;
margin: 10px 0px 5px; margin: 10px 0px 5px;

2
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -34,7 +34,7 @@ aio-nav-menu.top-menu .vertical-menu-item {
outline: none; outline: none;
&:hover { &:hover {
text-shadow: 0px 0px 5px #ffffff; text-shadow: 0 0 5px #ffffff;
background-color: $lightgray; background-color: $lightgray;
} }

10
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -10,20 +10,20 @@ aio-top-menu ul {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
list-style-position: inside; list-style-position: inside;
padding: 0px; padding: 0;
margin: 0px; margin: 0;
} }
aio-top-menu li { aio-top-menu li {
list-style-type: none; list-style-type: none;
padding: 0px; padding: 0;
} }
md-toolbar.mat-toolbar { md-toolbar.mat-toolbar {
position: relative; position: relative;
z-index: 10; z-index: 10;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.30); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
padding: 0 16px 0px 0px; padding: 0 16px 0 0;
} }
.search-container { .search-container {

10
aio/src/styles/2-modules/_alert.scss
View File

@ -1,7 +1,6 @@
.alert { .alert {
display: flex; padding: 16px;
padding: 0px 10px; margin: 24px 0px;
margin: 20px 0px;
font-size: 14px; font-size: 14px;
color: $darkgray; color: $darkgray;
&.is-critical { &.is-critical {
@ -18,4 +17,9 @@
border-left: 10px solid $blue; border-left: 10px solid $blue;
background-color: rgba($blue, 0.05); background-color: rgba($blue, 0.05);
} }
p {
margin: 0;
padding: 8px 16px;
}
} }

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

@ -43,11 +43,26 @@ code-tabs mat-tab-body-content .fadeIn {
aio-code pre { aio-code pre {
display: flex; display: flex;
padding: 0px; padding: 0;
white-space: pre-wrap; white-space: pre-wrap;
} }
.lang-ts .copy-button { code ol {
font-family: $main-font;
color: $lightgray;
li {
margin: 0;
font-family: $code-font;
font-size: 90%;
}
}
.prettyprint {
position: relative;
}
.copy-button {
top: -16px; top: -16px;
right: -16px; right: -16px;
color: $lightgray; color: $lightgray;
@ -58,8 +73,8 @@ aio-code pre {
} }
} }
.lang- .copy-button { .code-tab-group div.mat-tab-body-content {
visibility: hidden; height: auto;
} }
$blue-grey-50: #ECEFF1; $blue-grey-50: #ECEFF1;
@ -73,36 +88,6 @@ $blue-grey-700: #455A64;
$blue-grey-800: #37474F; $blue-grey-800: #37474F;
$blue-grey-900: #263238; $blue-grey-900: #263238;
$pink-50: #FCE4EC;
$pink-100: #F8BBD0;
$pink-200: #F48FB1;
$pink-300: #F06292;
$pink-400: #EC407A;
$pink-500: #E91E63;
$pink-600: #D81B60;
$pink-700: #C2185B;
$pink-800: #AD1457;
$pink-900: #880E4F;
$pink-A100: #FF80AB;
$pink-A200: #FF4081;
$pink-A400: #F50057;
$pink-A700: #C51162;
$teal-50: #E0F2F1;
$teal-100: #B2DFDB;
$teal-200: #80CBC4;
$teal-300: #4DB6AC;
$teal-400: #26A69A;
$teal-500: #009688;
$teal-600: #00897B;
$teal-700: #00796B;
$teal-800: #00695C;
$teal-900: #004D40;
$teal-A100: #A7FFEB;
$teal-A200: #64FFDA;
$teal-A400: #1DE9B6;
$teal-A700: #00BFA5;
$white: #FFFFFF; $white: #FFFFFF;
/* /*
@ -126,33 +111,33 @@ $white: #FFFFFF;
outline: 1px solid rgba($blue-grey-700, .56); outline: 1px solid rgba($blue-grey-700, .56);
} }
.kwd { .kwd {
color: $pink-600; color: $darkgray;
} }
.typ, .typ,
.tag { .tag {
color: $pink-600; color: $darkred;
} }
.str, .str,
.atv { .atv {
color: $teal-700; color: $blue;
} }
.atn { .atn {
color: $teal-700; color: $blue;
} }
.com { .com {
color: $teal-700; color: $mediumgray;
} }
.lit { .lit {
color: $teal-700; color: $blue;
} }
.pun { .pun {
color: $blue-grey-700; color: $blue-grey-700;
} }
.pln { .pln {
color: $blue-grey-700; color: $green-800;
} }
.dec { .dec {
color: $teal-700; color: $blue;
} }
@ -170,32 +155,32 @@ $white: #FFFFFF;
} }
.kwd { .kwd {
color: $pink-600; color: $darkgray;
} }
.typ, .typ,
.tag { .tag {
color: $pink-600; color: $darkred;
} }
.str, .str,
.atv { .atv {
color: $teal-700; color: $blue;
} }
.atn { .atn {
color: $teal-700; color: $blue;
} }
.com { .com {
color: $teal-700; color: $mediumgray;
} }
.lit { .lit {
color: $teal-700; color: $blue;
} }
.pun { .pun {
color: $blue-grey-700; color: $blue-grey-700;
} }
.pln { .pln {
color: $blue-grey-700; color: $green-800;
} }
.dec { .dec {
color: $teal-700; color: $blue;
} }
} }

2
aio/src/styles/2-modules/_filetree.scss
View File

@ -2,7 +2,7 @@
background: $offwhite; background: $offwhite;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2);
border: 4px solid $lightgray; border: 4px solid $lightgray;
margin: 0px 0px 5px 0px; margin: 0 0 5px 0;
padding: 10px; padding: 10px;
.file { .file {

4
aio/src/styles/2-modules/_hamburger.scss
View File

@ -10,8 +10,8 @@
.hamburger.mat-button { .hamburger.mat-button {
transition: color 0.2s; transition: color 0.2s;
height: 100%; height: 100%;
margin: 0px; margin: 0;
padding: 0px; padding: 0;
} }
.hamburger.mat-button:hover { .hamburger.mat-button:hover {

4
aio/src/styles/2-modules/_images.scss
View File

@ -4,8 +4,8 @@
background: $white; background: $white;
padding: 20px; padding: 20px;
display: inline-block; display: inline-block;
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .2); box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
margin: 0px 0px 10px 0px; margin: 0 0 10px 0;
img { img {
border-radius: 4px; border-radius: 4px;

2
aio/src/styles/2-modules/_table.scss
View File

@ -15,7 +15,7 @@ table {
color: $darkgray; color: $darkgray;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
padding: 0px 24px; padding: 0 24px;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
} }

1
aio/src/styles/_constants.scss
View File

@ -16,6 +16,7 @@ $mediumgray: #7E7E7E;
$darkgray: #333; $darkgray: #333;
$black: #0A1014; $black: #0A1014;
$codegreen: #17ff0b; $codegreen: #17ff0b;
$green-800: #2E7D32;
$orange: #FF9800; $orange: #FF9800;
$anti-pattern: $brightred; $anti-pattern: $brightred;

2
aio/src/styles/_mixins.scss
View File

@ -54,6 +54,6 @@
background-color: $bgcolor; background-color: $bgcolor;
border-radius: 5px; border-radius: 5px;
padding: 20px; padding: 20px;
margin: 0px auto; // was 24 margin: 0 auto; // was 24
border: 0.5px solid $lightgray; border: 0.5px solid $lightgray;
} }