third_party/polymer/v0_8/components/paper-styles/classes/typography.html - Issue 1082403004: Import Polymer 0.8 and several key elements.

Side by Side Diff: third_party/polymer/v0_8/components/paper-styles/classes/typography.html

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Also remove polymer/explainer Created 5 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/v0_8/components/paper-styles/classes/shadow-layout.html ('k') | third_party/polymer/v0_8/components/paper-styles/color.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 -->

	10 <!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->

	11 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,30 0italic,400italic,500,500italic,700,700italic">

	12 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata:400,7 00">

	13

	14 <!--

	15 Typographic styles are provided matching the Material Design standard styles:

	16 http://www.google.com/design/spec/style/typography.html#typography-standard-styl es

	17

	18 To make use of them, apply a `paper-font-<style>` class to elements, matching

	19 the font style you wish it to inherit.

	20

	21 <header class="paper-font-display2">Hey there!</header>

	22

	23 Note that these are English/Latin centric styles. You may need to further adjust

	24 line heights and weights for CJK typesetting. See the notes in the Material

	25 Design typography section.

	26 -->

	27 <style>

	28

	29 .paper-font-display4,

	30 .paper-font-display3,

	31 .paper-font-display2,

	32 .paper-font-display1,

	33 .paper-font-headline,

	34 .paper-font-title,

	35 .paper-font-subhead,

	36 .paper-font-body2,

	37 .paper-font-body1,

	38 .paper-font-caption,

	39 .paper-font-menu,

	40 .paper-font-button {

	41 font-family: 'Roboto', 'Noto', sans-serif;

	42 -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */

	43 }

	44

	45 .paper-font-code2,

	46 .paper-font-code1 {

	47 font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;

	48 -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */

	49 }

	50

	51 /* Opt for better kerning for headers & other short labels. */

	52 .paper-font-display4,

	53 .paper-font-display3,

	54 .paper-font-display2,

	55 .paper-font-display1,

	56 .paper-font-headline,

	57 .paper-font-title,

	58 .paper-font-subhead,

	59 .paper-font-menu,

	60 .paper-font-button {

	61 text-rendering: optimizeLegibility;

	62 }

	63

	64 /*

	65 "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display

	66 styles. All other styles should exist as single lines."

	67 */

	68 .paper-font-display4,

	69 .paper-font-display3,

	70 .paper-font-title,

	71 .paper-font-caption,

	72 .paper-font-menu,

	73 .paper-font-button {

	74 white-space: nowrap;

	75 overflow: hidden;

	76 text-overflow: ellipsis;

	77 }

	78

	79 .paper-font-display4 {

	80 font-size: 112px;

	81 font-weight: 300;

	82 letter-spacing: -.044em;

	83 line-height: 120px;

	84 }

	85

	86 .paper-font-display3 {

	87 font-size: 56px;

	88 font-weight: 400;

	89 letter-spacing: -.026em;

	90 line-height: 60px;

	91 }

	92

	93 .paper-font-display2 {

	94 font-size: 45px;

	95 font-weight: 400;

	96 letter-spacing: -.018em;

	97 line-height: 48px;

	98 }

	99

	100 .paper-font-display1 {

	101 font-size: 34px;

	102 font-weight: 400;

	103 letter-spacing: -.01em;

	104 line-height: 40px;

	105 }

	106

	107 .paper-font-headline {

	108 font-size: 24px;

	109 font-weight: 400;

	110 letter-spacing: -.012em;

	111 line-height: 32px;

	112 }

	113

	114 .paper-font-title {

	115 font-size: 20px;

	116 font-weight: 500;

	117 line-height: 28px;

	118 }

	119

	120 .paper-font-subhead {

	121 font-size: 16px;

	122 font-weight: 400;

	123 line-height: 24px;

	124 }

	125

	126 .paper-font-body2 {

	127 font-size: 14px;

	128 font-weight: 500;

	129 line-height: 24px;

	130 }

	131

	132 .paper-font-body1 {

	133 font-size: 14px;

	134 font-weight: 400;

	135 line-height: 20px;

	136 }

	137

	138 .paper-font-caption {

	139 font-size: 12px;

	140 font-weight: 400;

	141 letter-spacing: 0.011em;

	142 line-height: 20px;

	143 }

	144

	145 .paper-font-menu {

	146 font-size: 13px;

	147 font-weight: 500;

	148 line-height: 24px;

	149 }

	150

	151 .paper-font-button {

	152 font-size: 14px;

	153 font-weight: 500;

	154 letter-spacing: 0.018em;

	155 line-height: 24px;

	156 text-transform: uppercase;

	157 }

	158

	159 .paper-font-code2 {

	160 font-size: 14px;

	161 font-weight: 700;

	162 line-height: 20px;

	163 }

	164

	165 .paper-font-code1 {

	166 font-size: 14px;

	167 font-weight: 700;

	168 line-height: 20px;

	169 }

	170

	171 </style>

OLD	NEW