third_party/polymer/v1_0/components-chromium/paper-styles/typography.html

   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.github.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/CONTRIBUTORS.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/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="../font-roboto/roboto.html">
  13
  14 <style is="custom-style">
  15
  16   :root {
  17
  18     /* Shared Styles */
  19
  20     /*
  21     Unfortunately, we can't use nested rules
  22     See https://github.com/Polymer/polymer/issues/1399
  23     */
  24     --paper-font-common-base: {
  25       font-family: 'Roboto', 'Noto', sans-serif;
  26       -webkit-font-smoothing: antialiased;
  27     };
  28
  29     --paper-font-common-code: {
  30       font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
  31       -webkit-font-smoothing: antialiased;
  32     };
  33
  34     --paper-font-common-expensive-kerning: {
  35       text-rendering: optimizeLegibility;
  36     };
  37
  38     --paper-font-common-nowrap: {
  39       white-space: nowrap;
  40       overflow: hidden;
  41       text-overflow: ellipsis;
  42     };
  43
  44     /* Material Font Styles */
  45
  46     --paper-font-display4: {
  47       /* @apply(--paper-font-common-base) */
  48       font-family: 'Roboto', 'Noto', sans-serif;
  49       -webkit-font-smoothing: antialiased;
  50       /* @apply(--paper-font-common-expensive-kerning); */
  51       text-rendering: optimizeLegibility;
  52       /* @apply(--paper-font-common-nowrap); */
  53       white-space: nowrap;
  54       overflow: hidden;
  55       text-overflow: ellipsis;
  56
  57       font-size: 112px;
  58       font-weight: 300;
  59       letter-spacing: -.044em;
  60       line-height: 120px;
  61     };
  62
  63     --paper-font-display3: {
  64       /* @apply(--paper-font-common-base) */
  65       font-family: 'Roboto', 'Noto', sans-serif;
  66       -webkit-font-smoothing: antialiased;
  67       /* @apply(--paper-font-common-expensive-kerning); */
  68       text-rendering: optimizeLegibility;
  69       /* @apply(--paper-font-common-nowrap); */
  70       white-space: nowrap;
  71       overflow: hidden;
  72       text-overflow: ellipsis;
  73
  74       font-size: 56px;
  75       font-weight: 400;
  76       letter-spacing: -.026em;
  77       line-height: 60px;
  78     };
  79
  80     --paper-font-display2: {
  81       /* @apply(--paper-font-common-base) */
  82       font-family: 'Roboto', 'Noto', sans-serif;
  83       -webkit-font-smoothing: antialiased;
  84       /* @apply(--paper-font-common-expensive-kerning); */
  85       text-rendering: optimizeLegibility;
  86
  87       font-size: 45px;
  88       font-weight: 400;
  89       letter-spacing: -.018em;
  90       line-height: 48px;
  91     };
  92
  93     --paper-font-display1: {
  94       /* @apply(--paper-font-common-base) */
  95       font-family: 'Roboto', 'Noto', sans-serif;
  96       -webkit-font-smoothing: antialiased;
  97       /* @apply(--paper-font-common-expensive-kerning); */
  98       text-rendering: optimizeLegibility;
  99
 100       font-size: 34px;
 101       font-weight: 400;
 102       letter-spacing: -.01em;
 103       line-height: 40px;
 104     };
 105
 106     --paper-font-headline: {
 107       /* @apply(--paper-font-common-base) */
 108       font-family: 'Roboto', 'Noto', sans-serif;
 109       -webkit-font-smoothing: antialiased;
 110       /* @apply(--paper-font-common-expensive-kerning); */
 111       text-rendering: optimizeLegibility;
 112
 113       font-size: 24px;
 114       font-weight: 400;
 115       letter-spacing: -.012em;
 116       line-height: 32px;
 117     };
 118
 119     --paper-font-title: {
 120       /* @apply(--paper-font-common-base) */
 121       font-family: 'Roboto', 'Noto', sans-serif;
 122       -webkit-font-smoothing: antialiased;
 123       /* @apply(--paper-font-common-expensive-kerning); */
 124       text-rendering: optimizeLegibility;
 125       /* @apply(--paper-font-common-nowrap); */
 126       white-space: nowrap;
 127       overflow: hidden;
 128       text-overflow: ellipsis;
 129
 130       font-size: 20px;
 131       font-weight: 500;
 132       line-height: 28px;
 133     };
 134
 135     --paper-font-subhead: {
 136       /* @apply(--paper-font-common-base) */
 137       font-family: 'Roboto', 'Noto', sans-serif;
 138       -webkit-font-smoothing: antialiased;
 139       /* @apply(--paper-font-common-expensive-kerning); */
 140       text-rendering: optimizeLegibility;
 141
 142       font-size: 16px;
 143       font-weight: 400;
 144       line-height: 24px;
 145     };
 146
 147     --paper-font-body2: {
 148       /* @apply(--paper-font-common-base) */
 149       font-family: 'Roboto', 'Noto', sans-serif;
 150       -webkit-font-smoothing: antialiased;
 151
 152       font-size: 14px;
 153       font-weight: 500;
 154       line-height: 24px;
 155     };
 156
 157     --paper-font-body1: {
 158       /* @apply(--paper-font-common-base) */
 159       font-family: 'Roboto', 'Noto', sans-serif;
 160       -webkit-font-smoothing: antialiased;
 161
 162       font-size: 14px;
 163       font-weight: 400;
 164       line-height: 20px;
 165     };
 166
 167     --paper-font-caption: {
 168       /* @apply(--paper-font-common-base) */
 169       font-family: 'Roboto', 'Noto', sans-serif;
 170       -webkit-font-smoothing: antialiased;
 171       /* @apply(--paper-font-common-nowrap); */
 172       white-space: nowrap;
 173       overflow: hidden;
 174       text-overflow: ellipsis;
 175
 176       font-size: 12px;
 177       font-weight: 400;
 178       letter-spacing: 0.011em;
 179       line-height: 20px;
 180     };
 181
 182     --paper-font-menu: {
 183       /* @apply(--paper-font-common-base) */
 184       font-family: 'Roboto', 'Noto', sans-serif;
 185       -webkit-font-smoothing: antialiased;
 186       /* @apply(--paper-font-common-expensive-kerning); */
 187       text-rendering: optimizeLegibility;
 188       /* @apply(--paper-font-common-nowrap); */
 189       white-space: nowrap;
 190       overflow: hidden;
 191       text-overflow: ellipsis;
 192
 193       font-size: 13px;
 194       font-weight: 500;
 195       line-height: 24px;
 196     };
 197
 198     --paper-font-button: {
 199       /* @apply(--paper-font-common-base) */
 200       font-family: 'Roboto', 'Noto', sans-serif;
 201       -webkit-font-smoothing: antialiased;
 202       /* @apply(--paper-font-common-expensive-kerning); */
 203       text-rendering: optimizeLegibility;
 204       /* @apply(--paper-font-common-nowrap); */
 205       white-space: nowrap;
 206       overflow: hidden;
 207       text-overflow: ellipsis;
 208
 209       font-size: 14px;
 210       font-weight: 500;
 211       letter-spacing: 0.018em;
 212       line-height: 24px;
 213       text-transform: uppercase;
 214     };
 215
 216     --paper-font-code2: {
 217       /* @apply(--paper-font-common-code); */
 218       font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
 219       -webkit-font-smoothing: antialiased;
 220
 221       font-size: 14px;
 222       font-weight: 700;
 223       line-height: 20px;
 224     };
 225
 226     --paper-font-code1: {
 227       /* @apply(--paper-font-common-code); */
 228       font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
 229       -webkit-font-smoothing: antialiased;
 230
 231       font-size: 14px;
 232       font-weight: 500;
 233       line-height: 20px;
 234     };
 235
 236   }
 237
 238 </style>