Skip to content

Commit 1c24278

Browse files
jelbournjelbourn
committed
style(demo): prefix css w/ demo- & use roboto
1 parent a1f9270 commit 1c24278

File tree

10 files changed

+90
-79
lines changed

10 files changed

+90
-79
lines changed

‎src/demo-app/button/button-demo.html

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,61 @@
1-
<section>
1+
<div class="demo-button">
2+
<section>
23
<button md-button>flat</button>
34
<button md-raised-button>raised</button>
45
<button md-fab>
5-
<i class="material-icons md-24">check circle</i>
6+
<i class="material-icons md-24">check circle</i>
67
</button>
78
<button md-mini-fab>
8-
<i class="material-icons md-24">check circle</i>
9+
<i class="material-icons md-24">check circle</i>
910
</button>
10-
</section>
11+
</section>
1112

12-
<section>
13+
<section>
1314
<a href="http://www.google.com" md-button color="primary">link</a>
1415
<a href="http://www.google.com" md-raised-button>link</a>
1516
<a href="http://www.google.com" md-fab>
16-
<i class="material-icons md-24">check circle</i>
17+
<i class="material-icons md-24">check circle</i>
1718
</a>
1819
<a href="http://www.google.com" md-mini-fab>
19-
<i class="material-icons md-24">check circle</i>
20+
<i class="material-icons md-24">check circle</i>
2021
</a>
21-
</section>
22+
</section>
2223

23-
<section>
24+
<section>
2425
<button md-button color="primary">primary</button>
2526
<button md-button color="accent">accent</button>
2627
<button md-button color="warn">warn</button>
27-
</section>
28+
</section>
2829

29-
<section>
30+
<section>
3031
<button md-raised-button color="primary">primary</button>
3132
<button md-raised-button color="accent">accent</button>
3233
<button md-raised-button color="warn">warn</button>
33-
</section>
34+
</section>
3435

35-
<section>
36+
<section>
3637
<button md-fab color="primary">
37-
<i class="material-icons md-24">home</i>
38+
<i class="material-icons md-24">home</i>
3839
</button>
3940
<button md-fab color="accent">
40-
<i class="material-icons md-24">favorite</i>
41+
<i class="material-icons md-24">favorite</i>
4142
</button>
4243
<button md-fab color="warn">
43-
<i class="material-icons md-24">feedback</i>
44+
<i class="material-icons md-24">feedback</i>
4445
</button>
45-
</section>
46+
</section>
4647

47-
<section>
48+
<section>
4849
<div>
49-
<span>isDisabled: {{isDisabled}}</span>
50-
<button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
50+
<span>isDisabled: {{isDisabled}}</span>
51+
<button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
5152
</div>
5253
<button md-button [disabled]="isDisabled">off</button>
5354
<button md-button color="primary" [disabled]="isDisabled">off</button>
5455
<a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
5556
<button md-raised-button color="primary" [disabled]="isDisabled">off</button>
5657
<button md-mini-fab [disabled]="isDisabled">
57-
<i class="material-icons md-24">check circle</i>
58+
<i class="material-icons md-24">check circle</i>
5859
</button>
59-
</section>
60-
60+
</section>
61+
</div>

‎src/demo-app/button/button-demo.scss

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11

2-
// Helps fonts on OSX looks more consistent with other systems
3-
// Isn't currently in button styles due to performance concerns
4-
* {
5-
-webkit-font-smoothing: antialiased;
6-
-moz-osx-font-smoothing: grayscale;
7-
}
8-
9-
button, a, {
10-
margin: 8px;
11-
text-transform: uppercase;
12-
}
13-
14-
15-
section {
16-
background-color: #f7f7f7;
17-
margin: 8px;
2+
.demo-button {
3+
button, a {
4+
margin: 8px;
5+
text-transform: uppercase;
6+
}
7+
8+
section {
9+
background-color: #f7f7f7;
10+
margin: 8px;
11+
}
1812
}
1913

‎src/demo-app/card/card-demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="card-container">
1+
<div class="demo-card-container">
22
<md-card>
33
<md-card-title-group>
44
<md-card-title>Card with title</md-card-title>
@@ -40,11 +40,11 @@
4040
</md-card-content>
4141
</md-card>
4242

43-
<md-card class="blue md-card-flat">
43+
<md-card class="demo-card-blue md-card-flat">
4444
<md-card-title>Easily customizable</md-card-title>
4545
<md-card-actions>
4646
<button md-button>First</button>
4747
<button md-button>Second</button>
4848
</md-card-actions>
4949
</md-card>
50-
</div>
50+
</div>

‎src/demo-app/card/card-demo.scss

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
1-
md-card {
2-
margin: 0 16px 16px 0;
3-
width: 350px;
4-
}
5-
6-
.card-container {
1+
.demo-card-container {
72
display: flex;
83
flex-flow: column nowrap;
9-
}
104

11-
.blue {
12-
background-color: #B0BECC;
13-
}
5+
md-card {
6+
margin: 0 16px 16px 0;
7+
width: 350px;
8+
}
149

15-
.blue md-card-actions {
16-
display: flex;
17-
flex-direction: column;
10+
img {
11+
background-color: gray;
12+
}
1813
}
1914

20-
img {
21-
background-color: gray;
15+
.demo-card-blue {
16+
background-color: #B0BECC;
17+
18+
md-card-actions {
19+
display: flex;
20+
flex-direction: column;
21+
}
2222
}

‎src/demo-app/demo-app.html

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
<h1 class="title">Angular Material2 Demos</h1>
2-
<ul>
3-
<li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
4-
<li><a [routerLink]="['CardDemo']">Card demo</a></li>
5-
<li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
6-
<li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
7-
<li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
8-
<li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
9-
</ul>
10-
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
11-
{{root.dir.toUpperCase()}}
12-
</button>
13-
<div #root="$implicit" dir="ltr">
14-
<router-outlet></router-outlet>
1+
<div class="demo-root">
2+
<h1>Angular Material2 Demos</h1>
3+
<ul>
4+
<li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
5+
<li><a [routerLink]="['CardDemo']">Card demo</a></li>
6+
<li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
7+
<li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
8+
<li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
9+
<li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
10+
</ul>
11+
<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
12+
{{root.dir.toUpperCase()}}
13+
</button>
14+
<div #root="$implicit" dir="ltr" class="demo-content">
15+
<router-outlet></router-outlet>
16+
</div>
1517
</div>

‎src/demo-app/demo-app.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
.demo-root {
2+
font-family: Roboto, 'Helvetica Neue', sans-serif;
3+
padding: 20px;
4+
5+
// Helps fonts on OSX looks more consistent with other systems
6+
// Isn't currently in button styles due to performance concerns
7+
* {
8+
-webkit-font-smoothing: antialiased;
9+
-moz-osx-font-smoothing: grayscale;
10+
}
11+
}
112

213
.demo-content {
314
padding: 15px;

‎src/demo-app/progress-circle/progress-circle-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<h1>Determinate</h1>
2-
<div class="demo-progress-circle-container">
2+
<div class="demo-progress-circle">
33
<md-progress-circle mode="determinate"
44
[value]="progressValue"
55
class="md-primary"></md-progress-circle>
@@ -13,7 +13,7 @@ <h1>Determinate</h1>
1313

1414

1515
<h1>Indeterminate</h1>
16-
<div class="demo-progress-circle-container">
16+
<div class="demo-progress-circle">
1717
<md-progress-circle mode="indeterminate"></md-progress-circle>
1818
<md-progress-circle mode="indeterminate"
1919
class="md-accent"></md-progress-circle>

‎src/demo-app/progress-circle/progress-circle-demo.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.demo-progress-circle-container {
1+
.demo-progress-circle {
22
width: 100%;
33

44
md-progress-circle,
55
md-spinner {
66
display: inline-block;
77
}
88

9-
}
9+
}

‎src/demo-app/sidenav/sidenav-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<md-sidenav-layout>
1+
<md-sidenav-layout class="demo-sidenav-layout">
22
<md-sidenav #start (open)="myinput.focus()" mode="side">
33
Start Side Drawer
44
<br>
@@ -19,7 +19,7 @@
1919
<button md-button (click)="end.close()">Close</button>
2020
</md-sidenav>
2121

22-
<div class="content">
22+
<div class="demo-sidenav-content">
2323
<h1>My Content</h1>
2424

2525
<div>

‎src/demo-app/sidenav/sidenav-demo.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
2-
md-sidenav-layout {
1+
.demo-sidenav-layout {
32
border: 3px solid black;
43

54
md-sidenav {
65
padding: 10px;
76
}
87
}
8+
9+
.demo-sidenav-content {
10+
padding: 15px;
11+
}

0 commit comments

Comments
 (0)