Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 45dcaf5

Browse files
amitafrjelbourn
amitafr
authored and
jelbourn
committed
Add styles for component viewer, homepage, and example viewer (#35)
1 parent 45cf8a2 commit 45dcaf5

File tree

14 files changed

+354
-56
lines changed

14 files changed

+354
-56
lines changed

‎src/_app-theme.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@import '~@angular/material/core/theming/theming';
22
@import './app/pages/homepage/homepage-theme';
33
@import './app/pages/component-viewer/component-viewer-sidenav-theme';
4+
@import './app/pages/component-viewer/component-viewer-theme';
45
@import './app/shared/navbar/navbar-theme';
6+
@import './app/shared/example-viewer/example-viewer-theme';
57

68
// Styles for the docs app that are based on the current theme.
79
@mixin material-docs-app-theme($theme) {
@@ -18,4 +20,7 @@
1820
@include nav-bar-theme($theme);
1921
@include component-viewer-sidenav-theme($theme);
2022
@include home-page-theme($theme);
23+
@include component-viewer-theme($theme);
24+
@include nav-bar-theme($theme);
25+
@include example-viewer-theme($theme);
2126
}

‎src/app/pages/component-viewer/_component-viewer-theme.scss

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@mixin component-viewer-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
app-component-viewer {
9+
color: md-color($foreground, secondary-text);
10+
11+
.docs-component-viewer-tabbed-content {
12+
h1 {
13+
color: md-color($primary, 800);
14+
background: rgba(md-color($foreground, secondary-text), .03);
15+
}
16+
17+
h3, h2, h4, h5, p, ol, li{
18+
color: md-color($foreground, secondary-text);
19+
}
20+
21+
a {
22+
color: md-color($primary);
23+
}
24+
25+
table {
26+
box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
27+
}
28+
29+
table tbody th{
30+
border: 1px solid rgba(md-color($foreground, secondary-text), .03);
31+
}
32+
33+
td {
34+
color: md-color($foreground, secondary-text);
35+
border: 1px solid rgba(md-color($foreground, secondary-text), .03);
36+
}
37+
38+
th {
39+
color: md-color($foreground, secondary-text);
40+
background: rgba(md-color($foreground, secondary-text), .03);
41+
}
42+
}
43+
44+
.docs-component-viewer-header {
45+
background: md-color($primary);
46+
47+
h1 {
48+
color: md-color($primary, default-contrast);
49+
}
50+
}
51+
52+
.md-tab-label:focus {
53+
color: md-color($foreground, secondary-text);
54+
}
55+
56+
}
57+
}

‎src/app/pages/component-viewer/component-viewer.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,19 @@ <h3>{{category.name}}</h3>
1313
</nav>
1414
</md-sidenav>
1515

16-
<h1 class="docs-component-viewer-header"> {{componentDocItem.name}} </h1>
16+
<div class="docs-component-viewer-header">
17+
<h1> Component - {{componentDocItem.name}} </h1>
18+
</div>
1719

1820
<!-- TODO(jelbourn): turn this into nav tabs -->
1921
<md-tab-group class="docs-component-viewer-tabbed-content">
2022
<md-tab label="OVERVIEW">
21-
<doc-viewer documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html">
23+
<doc-viewer documentUrl="/assets/documents/overview/{{componentDocItem.id}}.html" class="docs-component-view-text-content">
2224
</doc-viewer>
2325
</md-tab>
2426

25-
<md-tab label="API">
26-
<doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html"></doc-viewer>
27+
<md-tab label="API REFERENCE">
28+
<doc-viewer documentUrl="/assets/documents/api/{{componentDocItem.id}}.html" class="docs-component-view-text-content"></doc-viewer>
2729
</md-tab>
2830

2931
<md-tab label="EXAMPLES">

‎src/app/pages/component-viewer/component-viewer.scss

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,102 @@
1+
app-component-viewer {
2+
font-weight: 400;
3+
}
4+
15
.docs-component-viewer-header {
2-
margin: 50px;
6+
padding-left: 20px;
7+
8+
h1 {
9+
font-size: 30px;
10+
font-weight: 300;
11+
margin: 0;
12+
padding: 50px;
13+
}
314
}
415

516
.docs-component-viewer-tabbed-content {
6-
margin: 50px;
17+
margin: 50px 70px;
718

819
md-tab {
920
margin: 30px;
1021
}
1122
}
23+
24+
.docs-component-viewer-tabbed-content .docs-component-view-text-content {
25+
26+
h1 {
27+
display:inline-block;
28+
font-size: 20px;
29+
font-weight: 400;
30+
padding: 5px;
31+
}
32+
33+
h3, h2 {
34+
font-size: 20px;
35+
font-weight: 400;
36+
margin-bottom: 30px;
37+
margin-top: 80px;
38+
}
39+
40+
h4 {
41+
margin-top: 40px;
42+
}
43+
44+
h5 {
45+
font-size: 16px;
46+
}
47+
48+
.md-tab-body-wrapper h2 {
49+
margin-top: 0px;
50+
}
51+
52+
p {
53+
font-size: 16px;
54+
line-height: 28px;
55+
}
56+
57+
a {
58+
text-decoration: none;
59+
}
60+
61+
table {
62+
border-collapse: collapse;
63+
border-radius: 2px;
64+
border-spacing: 0;
65+
margin: 0 0 32px 0;
66+
width: 100%;
67+
}
68+
69+
table tbody th {
70+
max-width: 100px;
71+
padding: 13px 32px;
72+
text-align: left;
73+
}
74+
75+
td {
76+
font-weight: 400;
77+
padding: 8px 30px;
78+
79+
p {
80+
margin: 0;
81+
}
82+
}
83+
84+
th {
85+
font-size: 16px;
86+
font-weight: 400;
87+
padding: 13px 32px;
88+
text-align: left;
89+
}
90+
}
91+
92+
.md-tab-header {
93+
border: none;
94+
margin-bottom: 30px;
95+
}
96+
97+
.docs-component-viewer-tabbed-content .md-tab-header .md-tab-label {
98+
font-weight: 400;
99+
margin: 0 10px;
100+
min-width: 0px;
101+
padding: 0 5px;
102+
}

‎src/app/pages/component-viewer/component-viewer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {DocumentationItems, DocItem} from '../../shared/documentation-items/docu
44

55

66
@Component({
7-
selector: 'app-components',
7+
selector: 'app-component-viewer',
88
templateUrl: './component-viewer.html',
99
styleUrls: ['./component-viewer.scss', './component-viewer-sidenav.scss'],
1010
encapsulation: ViewEncapsulation.None,

‎src/app/pages/homepage/_homepage-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
app-homepage {
99
.docs-header-background {
10-
background: url('assets/img/homepage/material_splash.svg') repeat-x bottom center, md-color($primary);
10+
background: url('assets/img/homepage/material_splash.svg') repeat-x center center, md-color($primary);
1111
}
1212

1313
.docs-header-headline {
@@ -19,7 +19,7 @@
1919
}
2020

2121
.docs-homepage-row {
22-
color: md-color($primary, 800);
22+
color: md-color($foreground, secondary-text);
2323
}
2424
}
2525
}

‎src/app/pages/homepage/homepage.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="docs-header-section">
33
<div class="docs-header-headline">
44
<h1>Angular Material</h1>
5-
Material Design components for Angular 2 apps
5+
<h2> Material Design components for Angular 2 apps</h2>
66
</div>
77
<div class="docs-header-start">
88
<a md-raised-button routerLink="components">Get started</a>

‎src/app/pages/homepage/homepage.scss

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,63 @@
11
// The margin between two sections
2-
$margin-promotion-sections: 32px;
2+
$margin-promotion-sections: 60px;
33

44
.docs-header-background {
5-
height: 560px;
5+
height: 500px;
6+
margin-bottom: 40px;
67
}
78

89
.docs-header-section {
910
text-align: center;
1011
padding-top: 160px;
1112
}
1213

14+
.docs-header-headline {
15+
h1 {
16+
font-size: 30px;
17+
font-weight: 400;
18+
line-height: 40px;
19+
margin: 15px 0 15px 0;
20+
}
21+
22+
h2 {
23+
font-size: 18px;
24+
font-weight: 300;
25+
line-height: 28px;
26+
margin: 15px 0 25px 0;
27+
}
28+
}
29+
1330
.docs-homepage-promo {
14-
padding: 16px;
31+
align-items: center;
1532
display: flex;
1633
flex-direction: column;
17-
align-items: center;
34+
padding: 16px;
35+
36+
h2 {
37+
font-size: 25px;
38+
font-weight: 400;
39+
margin: 0 0 16px 0;
40+
padding: 0;
41+
}
42+
43+
p {
44+
font-size: 16px;
45+
font-weight: 400;
46+
line-height: 28px;
47+
margin: 0 0 24px 0;
48+
padding: 0;
49+
}
1850
}
1951

52+
2053
.docs-homepage-row {
2154
display: flex;
2255
max-width: 920px;
2356
margin: $margin-promotion-sections 0;
2457
}
2558

2659
.docs-homepage-row img {
27-
max-width: 100%;
60+
max-width: 90%;
2861
}
2962

3063
.docs-homepage-reverse-row {
@@ -52,5 +85,3 @@ $margin-promotion-sections: 32px;
5285
flex-direction: column;
5386
justify-content: center;
5487
}
55-
56-

‎src/app/shared/example-viewer/_example-viewer-theme.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@mixin example-viewer-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
example-viewer {
9+
.docs-example-viewer-wrapper {
10+
border: 1px solid rgba(md-color($foreground, secondary-text), .03);
11+
box-shadow: 0 2px 2px rgba(0,0,0,0.24), 0 0 2px rgba(0,0,0,0.12);
12+
}
13+
14+
.docs-example-viewer-title {
15+
color: md-color($foreground, secondary-text);
16+
background: rgba(md-color($foreground, secondary-text), .03);
17+
}
18+
}
19+
}

‎src/app/shared/example-viewer/example-viewer.html

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
1-
<div class="docs-example-viewer-title">
2-
<span>{{example}}</span>
1+
<div class="docs-example-viewer-wrapper">
2+
<div class="docs-example-viewer-title">
3+
<div class="docs-example-viewer-title-spacer">{{example}}</div>
34

4-
<div class="docs-example-viewer-title-spacer"></div>
5+
<button md-icon-button type="button" (click)="toggleSourceView()">
6+
<md-icon>
7+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
8+
<path fill="none" d="M0 0h24v24H0V0z"></path>
9+
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
10+
</svg>
11+
</md-icon>
12+
</button>
513

6-
<button md-icon-button type="button" (click)="toggleSourceView()">S</button>
714
<plunker-button [example]="example"></plunker-button>
815
</div>
916

10-
<div class="docs-example-viewer-source" *ngIf="showSource">
11-
<md-tab-group>
12-
<!-- TODO(jelbourn): don't hard-code the html + ts + css structure -->
13-
<md-tab *ngFor="let extension of ['HTML', 'TS', 'SCSS']" [label]="extension">
14-
<pre><doc-viewer [documentUrl]="exampleFileUrl(extension)"></doc-viewer></pre>
15-
</md-tab>
16-
</md-tab-group>
17-
</div>
17+
<div class="docs-example-viewer-source" *ngIf="showSource">
18+
<md-tab-group>
19+
<!-- TODO(jelbourn): don't hard-code the html + ts + css structure -->
20+
<md-tab *ngFor="let extension of ['HTML', 'TS', 'SCSS']" [label]="extension">
21+
<pre><doc-viewer [documentUrl]="exampleFileUrl(extension)"></doc-viewer></pre>
22+
</md-tab>
23+
</md-tab-group>
24+
</div>
1825

19-
<div class="docs-example-viewer-body">
20-
<template [portalHost]="selectedPortal"></template>
26+
<div class="docs-example-viewer-body">
27+
<template [portalHost]="selectedPortal"></template>
28+
</div>
2129
</div>

0 commit comments

Comments
 (0)