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

Tiyding up the typography style names

master
Matt Gaunt 2014-12-16 15:33:41 +00:00
parent fee311669b
commit 07715fd2db
4 changed files with 91 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/styleguide/layout/demo.html
View File

@ -236,7 +236,7 @@
</div>
<!-- Middle row, subtitle -->
<div class="wsk-layout__header-row">
<span class="Typography--title">
<span class="wsk-typography--title">
Multi-row layout demo
</span>
</div>

2
app/styleguide/list/demo.html
View File

@ -47,7 +47,7 @@
<p>
<div class="List">
<p class="Typography-Body-2">Contacts</p>
<p class="wsk-typography-Body-2">Contacts</p>
<div class="wsk-list--styled-view">
<ul>
<li>

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

@ -269,165 +269,165 @@ dt {
* Class Name Styles
*/
.Typography--display-4 {
.wsk-typography--display-4 {
@include typo-display-4();
}
.Typography--display-4--colorContrast {
.wsk-typography--display-4--colorContrast {
@include typo-display-4($colorContrast: true);
}
.Typography--display-3 {
.wsk-typography--display-3 {
@include typo-display-3();
}
.Typography--display-3--colorContrast {
.wsk-typography--display-3--colorContrast {
@include typo-display-3($colorContrast: true);
}
.Typography--display-2 {
.wsk-typography--display-2 {
@include typo-display-2();
}
.Typography--display-2--colorContrast {
.wsk-typography--display-2--colorContrast {
@include typo-display-2($colorContrast: true);
}
.Typography--display-1 {
.wsk-typography--display-1 {
@include typo-display-1();
}
.Typography--display-1--colorContrast {
.wsk-typography--display-1--colorContrast {
@include typo-display-1($colorContrast: true);
}
.Typography--headline {
.wsk-typography--headline {
@include typo-headline();
}
.Typography--headline--colorContrast {
.wsk-typography--headline--colorContrast {
@include typo-headline($colorContrast: true);
}
.Typography--title {
.wsk-typography--title {
@include typo-title();
}
.Typography--title--colorContrast {
.wsk-typography--title--colorContrast {
@include typo-title($colorContrast: true);
}
.Typography--subhead {
.wsk-typography--subhead {
@include typo-subhead();
}
.Typography--subhead--colorContrast {
.wsk-typography--subhead--colorContrast {
@include typo-subhead($colorContrast: true);
}
.Typography--body-2 {
.wsk-typography--body-2 {
@include typo-body-2();
}
.Typography--Body-2--colorContrast {
.wsk-typography--Body-2--colorContrast {
@include typo-body-2($colorContrast: true);
}
.Typography--body-1 {
.wsk-typography--body-1 {
@include typo-body-1();
}
.Typography--body-1--colorContrast {
.wsk-typography--body-1--colorContrast {
@include typo-body-1($colorContrast: true);
}
.Typography--body-2--forcePreferredFont {
.wsk-typography--body-2--forcePreferredFont {
@include typo-body-2($usePreferred: true);
}
.Typography--Body-2--forcePreferredFont--colorContrast {
.wsk-typography--Body-2--forcePreferredFont--colorContrast {
@include typo-body-2($colorContrast: true, $usePreferred: true);
}
.Typography--body-1--forcePreferredFont {
.wsk-typography--body-1--forcePreferredFont {
@include typo-body-1($usePreferred: true);
}
.Typography--body-1--forcePreferredFont--colorContrast {
.wsk-typography--body-1--forcePreferredFont--colorContrast {
@include typo-body-1($colorContrast: true, $usePreferred: true);
}
.Typography--caption {
.wsk-typography--caption {
@include typo-caption();
}
.Typography--caption--forcePreferredFont {
.wsk-typography--caption--forcePreferredFont {
@include typo-caption($usePreferred: true);
}
.Typography--caption--colorContrast {
.wsk-typography--caption--colorContrast {
@include typo-caption($colorContrast: true);
}
.Typography--caption--forcePreferredFont--colorContrast {
.wsk-typography--caption--forcePreferredFont--colorContrast {
@include typo-caption($colorContrast: true, $usePreferred: true);
}
.Typography--menu {
.wsk-typography--menu {
@include typo-menu();
}
.Typography--menu--colorContrast {
.wsk-typography--menu--colorContrast {
@include typo-menu($colorContrast: true);
}
.Typography--button {
.wsk-typography--button {
@include typo-button();
}
.Typography--button--colorContrast {
.wsk-typography--button--colorContrast {
@include typo-button($colorContrast: true);
}
.Typography--textLeft {
.wsk-typography--textLeft {
text-align: left
}
.Typography--textRight {
.wsk-typography--textRight {
text-align: right
}
.Typography--textCenter {
.wsk-typography--textCenter {
text-align: center
}
.Typography--textJustify {
.wsk-typography--textJustify {
text-align: justify
}
.Typography--textNowrap {
.wsk-typography--textNowrap {
white-space: nowrap
}
.Typography--textLowercase {
.wsk-typography--textLowercase {
text-transform: lowercase
}
.Typography--textUppercase {
.wsk-typography--textUppercase {
text-transform: uppercase
}
.Typography--textCapitalize {
.wsk-typography--textCapitalize {
text-transform: capitalize
}
.Typography--tableStriped > tbody > tr:nth-child(odd) > td,
.Typography--tableStriped > tbody > tr:nth-child(odd) > th {
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9
}
.Typography--tableStriped > tbody > tr:nth-child(odd) > td,
.Typography--tableStriped > tbody > tr:nth-child(odd) > th {
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > td,
.wsk-typography--tableStriped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9
}

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

@ -20,59 +20,59 @@
<table>
<tr>
<th>Display 4</th>
<td class='Typography--display-4'>Light 112px</td>
<td class="wsk-typography--display-4">Light 112px</td>
</tr>
<tr>
<th>Display 3</th>
<td class='Typography--display-3'>Regular 56px</td>
<td class="wsk-typography--display-3">Regular 56px</td>
</tr>
<tr>
<th>Display 2</th>
<td class='Typography--display-2'>Regular 45px</td>
<td class="wsk-typography--display-2">Regular 45px</td>
</tr>
<tr>
<th>Display 1</th>
<td class='Typography--display-1'>Regular 34px</td>
<td class="wsk-typography--display-1">Regular 34px</td>
</tr>
<tr>
<th>Headline</th>
<td class='Typography--headline'>Regular 24px</td>
<td class="wsk-typography--headline">Regular 24px</td>
</tr>
<tr>
<th>Title</th>
<td class='Typography--title'>Medium 20px</td>
<td class="wsk-typography--title">Medium 20px</td>
</tr>
<tr>
<th>Subhead</th>
<td class='Typography--subhead'>Regular 16px (Device), Regular 15px (Desktop)</td>
<td class="wsk-typography--subhead">Regular 16px (Device), Regular 15px (Desktop)</td>
</tr>
<tr>
<th>Body 2</th>
<td class='Typography--body-2'>Medium 14px (Device), Medium 13px (Desktop)</td>
<td class="wsk-typography--body-2">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Body 1</th>
<td class='Typography--body-1'>Regular 14px (Device), Regular 13px (Desktop)</td>
<td class="wsk-typography--body-1">Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th>Body 2 (force preferred font)</th>
<td class='Typography--body-2--forcePreferredFont'>Medium 14px (Device), Medium 13px (Desktop)</td>
<td class="wsk-typography--body-2--forcePreferredFont">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Body 1 (force preferred font)</th>
<td class='Typography--body-1--forcePreferredFont'>Regular 14px (Device), Regular 13px (Desktop)</td>
<td class="wsk-typography--body-1--forcePreferredFont">Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th>Caption</th>
<td class='Typography--caption'>Regular 12px</td>
<td class="wsk-typography--caption">Regular 12px</td>
</tr>
<tr>
<th>Menu</th>
<td class='Typography--menu'>Medium 14px (Device), Medium 13px (Desktop)</td>
<td class="wsk-typography--menu">Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Button</th>
<td class='Typography--button'>Medium (All Caps) 14px</td>
<td class="wsk-typography--button">Medium (All Caps) 14px</td>
</tr>
</table>
</div>
@ -112,13 +112,13 @@
<p>&lt;p&gt;</p>
<p class="Typography--body-2">&lt;p class="Typography-Body-2"&gt;</p>
<p class="wsk-typography--body-2">&lt;p class="wsk-typography-Body-2"&gt;</p>
<p class="Typography--caption">&lt;p class="Typography-Caption"&gt;</p>
<p class="wsk-typography--caption">&lt;p class="wsk-typography-Caption"&gt;</p>
<p class="Typography--menu">&lt;p class="Typography-Menu"&gt;</p>
<p class="wsk-typography--menu">&lt;p class="wsk-typography-Menu"&gt;</p>
<p class="Typography--button">&lt;p class="Typography-Button"&gt;</p>
<p class="wsk-typography--button">&lt;p class="wsk-typography-Button"&gt;</p>
<h3>Subtitles</h3>
@ -150,16 +150,16 @@
<h2>Alignment</h2>
<p class="Typography--textLeft">Left aligned text.</p>
<p class="Typography--textCenter">Center aligned text.</p>
<p class="Typography--textRight">Right aligned text.</p>
<p class="Typography--textJustify">Justified text.</p>
<p class="Typography--textNowrap">No wrap text.</p>
<p class="wsk-typography--textLeft">Left aligned text.</p>
<p class="wsk-typography--textCenter">Center aligned text.</p>
<p class="wsk-typography--textRight">Right aligned text.</p>
<p class="wsk-typography--textJustify">Justified text.</p>
<p class="wsk-typography--textNowrap">No wrap text.</p>
<h2>Transformations</h2>
<p class="Typography--textLowercase">Lowercased text.</p>
<p class="Typography--textUppercase">Uppercased text.</p>
<p class="Typography--textCapitalize">Capitalized text.</p>
<p class="wsk-typography--textLowercase">Lowercased text.</p>
<p class="wsk-typography--textUppercase">Uppercased text.</p>
<p class="wsk-typography--textCapitalize">Capitalized text.</p>
<h2>Addresses</h2>
@ -221,7 +221,7 @@
<h3>Striped Table</h3>
<table class="Typography--tableStriped">
<table class="wsk-typography--tableStriped">
<thead>
<tr>
<th>#</th>
@ -257,57 +257,57 @@
<div class="PreviewBlock">
<div class="PreviewBlock--white">
<p class="Typography--caption--colorContrast">Caption</p>
<p class="wsk-typography--caption--colorContrast">Caption</p>
<p class="Typography--body-2--colorContrast">Body</p>
<p class="wsk-typography--body-2--colorContrast">Body</p>
<p class="Typography--subhead--colorContrast">Subhead</p>
<p class="wsk-typography--subhead--colorContrast">Subhead</p>
<p class="Typography--title--colorContrast">Title</p>
<p class="wsk-typography--title--colorContrast">Title</p>
<p class="Typography--display-1--colorContrast">Display</p>
<p class="wsk-typography--display-1--colorContrast">Display</p>
</div>
</div>
<div class="PreviewBlock">
<div class="PreviewBlock--black">
<p class="Typography--caption--colorContrast">Caption</p>
<p class="wsk-typography--caption--colorContrast">Caption</p>
<p class="Typography--body-2--colorContrast">Body</p>
<p class="wsk-typography--body-2--colorContrast">Body</p>
<p class="Typography--subhead--colorContrast">Subhead</p>
<p class="wsk-typography--subhead--colorContrast">Subhead</p>
<p class="Typography--title--colorContrast">Title</p>
<p class="wsk-typography--title--colorContrast">Title</p>
<p class="Typography--display-1--colorContrast">Display</p>
<p class="wsk-typography--display-1--colorContrast">Display</p>
</div>
</div>
<div class="PreviewBlock">
<div class="PreviewBlock--img-1">
<p class="Typography--caption--colorContrast">Caption</p>
<p class="wsk-typography--caption--colorContrast">Caption</p>
<p class="Typography--body-2--colorContrast">Body</p>
<p class="wsk-typography--body-2--colorContrast">Body</p>
<p class="Typography--subhead--colorContrast">Subhead</p>
<p class="wsk-typography--subhead--colorContrast">Subhead</p>
<p class="Typography--title--colorContrast">Title</p>
<p class="wsk-typography--title--colorContrast">Title</p>
<p class="Typography--display-1--colorContrast">Display</p>
<p class="wsk-typography--display-1--colorContrast">Display</p>
</div>
</div>
<div class="PreviewBlock">
<div class="PreviewBlock--img-2">
<p class="Typography--caption--colorContrast">Caption</p>
<p class="wsk-typography--caption--colorContrast">Caption</p>
<p class="Typography--body-2--colorContrast">Body</p>
<p class="wsk-typography--body-2--colorContrast">Body</p>
<p class="Typography--subhead--colorContrast">Subhead</p>
<p class="wsk-typography--subhead--colorContrast">Subhead</p>
<p class="Typography--title--colorContrast">Title</p>
<p class="wsk-typography--title--colorContrast">Title</p>
<p class="Typography--display-1--colorContrast">Display</p>
<p class="wsk-typography--display-1--colorContrast">Display</p>
</div>
</div>