google/material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding images to the typography demo

Browse Source
This commit is contained in:
Matt Gaunt 2014-09-03 17:37:42 +01:00
parent c768f17d92
commit 64db8062d4
6 changed files with 200 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/material-styleguide.html
View File

@ -32,15 +32,15 @@
<link rel="stylesheet" href="styleguide/styleguide.css">
</head>
<body>
<h1>Buttons</h1>
<iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
<h1>Shadows</h1>
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
<h1>Palette</h1>
<iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
<!-- Script to handle sizing the iFrames -->
<script>
sizeIframes();

48
app/styleguide/typography/_typography.scss
View File

@ -212,46 +212,94 @@ a {
@include typo-display-4();
}
.display-4.colorContrast {
@include typo-display-4($colorContrast:true);
}
.display-3 {
@include typo-display-3();
}
.display-3.colorContrast {
@include typo-display-3($colorContrast:true);
}
.display-2 {
@include typo-display-2();
}
.display-2.colorContrast {
@include typo-display-2($colorContrast:true);
}
.display-1 {
@include typo-display-1();
}
.display-1.colorContrast {
@include typo-display-1($colorContrast:true);
}
.headline {
@include typo-headline();
}
.headline.colorContrast {
@include typo-headline($colorContrast:true);
}
.title {
@include typo-title();
}
.title.colorContrast {
@include typo-title($colorContrast:true);
}
.subhead {
@include typo-subhead();
}
.subhead.colorContrast {
@include typo-subhead($colorContrast:true);
}
.body-2 {
@include typo-body-2();
}
.body-2.colorContrast {
@include typo-body-2($colorContrast:true);
}
.body-1 {
@include typo-body-1();
}
.body-1.colorContrast {
@include typo-body-1($colorContrast:true);
}
.caption {
@include typo-caption();
}
.caption.colorContrast {
@include typo-caption($colorContrast:true);
}
.menu {
@include typo-menu();
}
.menu.colorContrast {
@include typo-menu($colorContrast:true);
}
.button {
@include typo-button();
}
.button.colorContrast {
@include typo-button($colorContrast:true);
}

58
app/styleguide/typography/demo.html
View File

@ -18,6 +18,8 @@
<h2>Typography</h2>
<h3>Scale &amp; Basic Styles</h3>
<div class="preview-block">
<table>
<tr>
<th>Display 4</th>
@ -68,7 +70,11 @@
<td class='button'>Medium (All Caps) 14px</td>
</tr>
</table>
</div>
<h3>HTML Elements</h3>
<div class="preview-block">
<h1>&lt;h1&gt;</h1>
<h2>&lt;h2&gt;</h2>
<h3>&lt;h3&gt;</h3>
@ -85,5 +91,57 @@
<p class="menu">&lt;p class="menu"&gt;</p>
<p class="button">&lt;p class="button"&gt;</p>
</div>
<h3>Color Contrasts</h3>
<div class="preview-block preview-block-white">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-black">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-img-1">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-img-2">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
</body>
</html>

31
app/styleguide/typography/demo.scss
View File

@ -2,8 +2,37 @@
@import 'typography';
table th {
@include typo-caption($colorContrast: true);
padding-right: 80px;
@include typo-body-1();
vertical-align: top;
text-align: left;
}
.preview-block-white {
background-color: white;
color: black;
}
.preview-block-black {
background-color: black;
color: white;
}
.preview-block-white, .preview-block-black, .preview-block-img-1, .preview-block-img-2 {
width: 360px;
height: 272px;
box-sizing: border-box;
}
.preview-block-img-1 {
background-image: url(images/img-1.png);
color: white;
}
.preview-block-img-2 {
background-image: url(images/img-2.png);
color: white;
}

BIN
app/styleguide/typography/images/img-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
app/styleguide/typography/images/img-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB