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

Fix styling page (closes #671) (Closes #689)

master
Alexander Surma 2015-07-03 22:01:16 +01:00 committed by Addy Osmani
parent 997b8e4b73
commit ed28a9a1ec
2 changed files with 64 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/_assets/main.css
View File

@ -1029,10 +1029,11 @@ code[class*=language-], pre[class*=language-] {
} }
} }
/*Styles page*/ /*Styles page*/
.styles .docs-layout-content .content.nope { .styles a {
max-width: 640px; color: #00BCD4;
width: 100%; }
margin: 0 auto; .styles .styles__content h2 {
text-transform: none;
} }
.styles .typo-styles { .styles .typo-styles {
margin-bottom: 40px; margin-bottom: 40px;
@ -1047,7 +1048,7 @@ code[class*=language-], pre[class*=language-] {
border-radius: 16px; border-radius: 16px;
line-height: 32px; line-height: 32px;
text-align: center; text-align: center;
font-weight: 300; font-weight: 500;
margin-top: 5px; margin-top: 5px;
} }
.styles .typo-styles dd { .styles .typo-styles dd {
@ -1063,6 +1064,7 @@ code[class*=language-], pre[class*=language-] {
} }
.styles .typo-styles .typo-styles__desc .typo-styles__name { .styles .typo-styles .typo-styles__desc .typo-styles__name {
margin-right: 8px; margin-right: 8px;
font-weight: 400;
} }
.styles .download-btn { .styles .download-btn {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
@ -1071,13 +1073,16 @@ code[class*=language-], pre[class*=language-] {
font-weight: 300; font-weight: 300;
margin-bottom: 20px; margin-bottom: 20px;
} }
.styles .download-btn.download-btn--customizer .material-icons {
margin-top: -2px;
}
.styles .download-btn > * { .styles .download-btn > * {
margin-right: 8px; margin-right: 8px;
} }
.styles .styles__ribbon { .styles .styles__ribbon {
background-color: #4A148C; background-color: #4A148C;
width: 100vw; width: 100vw;
margin: 40px 0; margin: 80px 0;
margin-left: -40px; margin-left: -40px;
height: 320px; height: 320px;
display: flex; display: flex;
@ -1093,14 +1098,14 @@ code[class*=language-], pre[class*=language-] {
} }
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__image { .styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__image {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 48px;
border: 0; border: 0;
} }
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption { .styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption {
color: white; color: white;
text-transform: uppercase; text-transform: uppercase;
font-size: 16px; font-size: 16px;
font-weight: 300; font-weight: 500;
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
@ -1113,6 +1118,7 @@ code[class*=language-], pre[class*=language-] {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
vertical-align: middle; vertical-align: middle;
margin-top: -1px;
} }
.styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption.ribbon__caption--split > .material-icons { .styles .styles__ribbon > .ribbon__imagecontainer > .ribbon__caption.ribbon__caption--split > .material-icons {
float: right; float: right;
@ -1136,6 +1142,9 @@ code[class*=language-], pre[class*=language-] {
width: 100vw; width: 100vw;
max-width: none; max-width: none;
} }
.styles .content ul {
font-size: 13px;
}
.styles .content li:before { .styles .content li:before {
font-size: 16px; font-size: 16px;
} }
@ -1152,6 +1161,16 @@ code[class*=language-], pre[class*=language-] {
max-width: 960px; max-width: 960px;
margin: 0 auto; margin: 0 auto;
} }
.styles .styles__download {
display: flex;
}
.styles .styles__download a {
font-weight: 500;
margin-right: 16px;
}
.styles .styles__content a .customizer {
border: 0;
}
@media (max-width: 850px) { @media (max-width: 850px) {
.started .docs-layout .docs-text-styling pre[class*=language-markup] { .started .docs-layout .docs-text-styling pre[class*=language-markup] {

64
docs/_pages/styles.md
View File

@ -67,10 +67,13 @@ include_prefix: ../
</dd> </dd>
</dl> </dl>
<a class="download-btn download-btn--font" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LRjU4U1NSeXdjd1U/RobotoTTF.zip"> <div class="styles__download">
<i class="material-icons">file_download</i> <a class="download-btn download-btn--font" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LRjU4U1NSeXdjd1U/RobotoTTF.zip">
<strong>Download Roboto Font</strong> 1.21 MB (.zip) <i class="material-icons">file_download</i>
</a> Download Roboto Font
</a>
<span class="download__size">1.21 MB (.zip)</span>
</div>
<div class="code-with-text"> <div class="code-with-text">
To embed Roboto into your web page, copy the code as the first element in the <code>&lt;head&gt;</code> of your HTML document. To embed Roboto into your web page, copy the code as the first element in the <code>&lt;head&gt;</code> of your HTML document.
@ -88,11 +91,11 @@ include_prefix: ../
</div> </div>
<div class="styles__content mdl-grid mdl-grid--no-spacing"> <div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Icons</h3> <h3>Icons</h3>
<p>Material Design Icons are the official open-source icons featured in the Google Material Design specification. What’s included:</p> <p>Material Design Icons are the official open-source icons featured in the Google Material Design specification. What’s included:</p>
</div> </div>
<div class="mdl-cell mdl-cell--8-col right-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<ul> <ul>
<li>SVG versions of all icons in both 24px and 48px flavours</li> <li>SVG versions of all icons in both 24px and 48px flavours</li>
<li>SVG and CSS sprites of all icons</li> <li>SVG and CSS sprites of all icons</li>
@ -101,17 +104,19 @@ include_prefix: ../
<li>Hi-dpi version of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)</li> <li>Hi-dpi version of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)</li>
</ul> </ul>
</div> </div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Getting Started</h3> <h3>Getting Started</h3>
<p>You have a few options for getting the icons.</p> <p>You have a few options for getting the icons.</p>
<h3>Download the Zip</h3> <h3>Download the Zip</h3>
<p>Grab the latest stable zip archive (~57MB) of all icons of the bleeding-edge version from master.</p> <p>Grab the latest stable zip archive (~57MB) of all icons of the bleeding-edge version from master.</p>
<a class="download-btn download-btn--icons" href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip"> <div class="styles__download">
<i class="material-icons">file_download</i> <a class="download-btn download-btn--icons" href="https://github.com/google/material-design-icons/releases/download/2.0.0/material-design-icons-2.0.0.zip">
<strong>Download</strong> <i class="material-icons">file_download</i>
</a> Download
</a>
</div>
</div> </div>
<div class="mdl-cell mdl-cell--8-col right-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<h3>Bower</h3> <h3>Bower</h3>
<div class="code-with-text"> <div class="code-with-text">
Install the icons using the <strong>Bower</strong> package manager. Install the icons using the <strong>Bower</strong> package manager.
@ -134,14 +139,14 @@ include_prefix: ../
</ul> </ul>
<p>Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.</p> <p>Decide on the icon resolution required for your project and copy, then reference the icons you wish to use.</p>
</div> </div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Spritesheets</h3> <h3>Spritesheets</h3>
<p>Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.</p> <p>Material Design icons come with SVG and CSS sprites for each category of icon we include. These can be found in the sprites directory, under svg-sprite and css-sprite.</p>
<h3>Using CSS Sprites</h3> <h3>Using CSS Sprites</h3>
<p>To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g. to use one of the play icons in css-sprite-av.</p> <p>To use a CSS spritesheet, reference the stylesheet for the icon category you wish to use, then include the icon definition in your markup. E.g. to use one of the play icons in css-sprite-av.</p>
<p>That’s it! Don’t forget to publish the corresponding CSS and SVG/PNG files when deploying your project.</p> <p>That’s it! Don’t forget to publish the corresponding CSS and SVG/PNG files when deploying your project.</p>
</div> </div>
<div class="mdl-cell mdl-cell--8-col right-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text"> <div class="code-with-text">
Reference the stylesheet: Reference the stylesheet:
<pre class="language-markup"><code>&lt;link href="css-sprite/sprite-av-black.css" rel="stylesheet"&gt;</code></pre> <pre class="language-markup"><code>&lt;link href="css-sprite/sprite-av-black.css" rel="stylesheet"&gt;</code></pre>
@ -155,11 +160,11 @@ include_prefix: ../
<pre class="language-markup"><code>&lt;div class="icon icon-ic_play-circle_outline_black_24dp"&gt;&lt;/div&gt;</code></pre> <pre class="language-markup"><code>&lt;div class="icon icon-ic_play-circle_outline_black_24dp"&gt;&lt;/div&gt;</code></pre>
</div> </div>
</div> </div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Using SVG Sprites</h3> <h3>Using SVG Sprites</h3>
<p>Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.</p> <p>Similarly, to use an SVG spritesheet, reference the stylesheet for the icon category, then include the icon definition in your markup.</p>
</div> </div>
<div class="mdl-cell mdl-cell--8-col right-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<div class="code-with-text"> <div class="code-with-text">
E.g: to use one of the play icons in <code>svg-sprite-av</code>, reference the stylesheet: E.g: to use one of the play icons in <code>svg-sprite-av</code>, reference the stylesheet:
<pre class="language-markup"><code>&lt;link href="svg-sprite/svg-sprite-av.css" rel="stylesheet"&gt;</code></pre> <pre class="language-markup"><code>&lt;link href="svg-sprite/svg-sprite-av.css" rel="stylesheet"&gt;</code></pre>
@ -181,7 +186,7 @@ include_prefix: ../
<h3>Polymer Icons</h3> <h3>Polymer Icons</h3>
<p>If you wish to use the icon set with Polymer, we recommend consuming them via the <strong>&lt;iron-icons&gt;-element</strong>. <p>If you wish to use the icon set with Polymer, we recommend consuming them via the <strong>&lt;iron-icons&gt;-element</strong>.
<h3>License</h3> <h3>License</h3>
All icons are released under <strong>Attribution 4.0 International license</strong>. <p>All icons are released under <strong>Attribution 4.0 International license</strong>.</p>
</div> </div>
</div> </div>
<div class="styles__ribbon styles__ribbon--colors"> <div class="styles__ribbon styles__ribbon--colors">
@ -193,20 +198,25 @@ include_prefix: ../
</a> </a>
</div> </div>
<div class="styles__content mdl-grid mdl-grid--no-spacing"> <div class="styles__content mdl-grid mdl-grid--no-spacing">
<div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet left-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--5-col-desktop left-col">
<h3>Color palette</h3> <h3>Color palette</h3>
<p>If you’re using the extended color palette, use the first color as the primary color in your app and the other colors as accents.</p> <p>If you’re using the extended color palette, use the first color as the primary color in your app and the other colors as accents.</p>
<p><strong>See all colors and their accessibility ratios</strong>. This resource includes info on the appropriate contrast ratios and alpha values when using white or black text on a colored background.</p> <p><strong>See all colors and their accessibility ratios</strong>. This resource includes info on the appropriate contrast ratios and alpha values when using white or black text on a colored background.</p>
<a class="download-btn download-btn--swatches" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LSGx6b0w3WWpMQ1k/color_swatches.zip"> <div class="styles__download">
<i class="material-icons">file_download</i> <a class="download-btn download-btn--swatches" href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B0J8hsRkk91LSGx6b0w3WWpMQ1k/color_swatches.zip">
<strong>Download color swatches</strong> 0.02 MB (.zip) <i class="material-icons">file_download</i>
</a> Download color swatches
<a class="download-btn download-btn--customizer" href="../customize/index.html"> </a>
<i class="material-icons">arrow_forward</i> <span class="download__size">0.02 MB (.zip)</span>
<strong>Try the custom CSS Theme Builder</strong> </div>
</a> <div class="styles__download">
<a class="download-btn download-btn--customizer" href="../customize/index.html">
<i class="material-icons">arrow_forward</i>
Try the custom CSS Theme Builder
</a>
</div>
</div> </div>
<div class="mdl-cell mdl-cell--8-col right-col"> <div class="mdl-cell mdl-cell--8-col mdl-cell--7-col-desktop right-col">
<a href="../customize/index.html"><img class="customizer" src="../assets/customizer.png"></a> <a href="../customize/index.html"><img class="customizer" src="../assets/customizer.png"></a>
</div> </div>
</div> </div>