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> </div>
<!-- Middle row, subtitle --> <!-- Middle row, subtitle -->
<div class="wsk-layout__header-row"> <div class="wsk-layout__header-row">
<span class="Typography--title"> <span class="wsk-typography--title">
Multi-row layout demo Multi-row layout demo
</span> </span>
</div> </div>

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

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

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

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

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

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