Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(67)

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

Issue 1162963002: Revert "Rename polymer and cr_elements v0_8 to v1_0" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 6 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
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698