mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-13 08:08:10 -07:00
I_changed_another_theme
This commit is contained in:
+40
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "paper-styles",
|
||||
"version": "1.0.7",
|
||||
"description": "Common (global) styles for Material Design elements.",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-component",
|
||||
"polymer",
|
||||
"style"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-styles.git"
|
||||
},
|
||||
"main": "paper-styles.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/polymerelements/paper-styles/",
|
||||
"ignore": [
|
||||
"/.*"
|
||||
],
|
||||
"dependencies": {
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"font-roboto": "PolymerElements/font-roboto#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.7",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.7",
|
||||
"commit": "c65f5ce6b898bb756fca35cedaa53c3e8011abeb"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-styles"
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
# paper-styles
|
||||
|
||||
Material design CSS styles.
|
||||
+31
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "paper-styles",
|
||||
"version": "1.0.7",
|
||||
"description": "Common (global) styles for Material Design elements.",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-component",
|
||||
"polymer",
|
||||
"style"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-styles.git"
|
||||
},
|
||||
"main": "paper-styles.html",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/polymerelements/paper-styles/",
|
||||
"ignore": [
|
||||
"/.*"
|
||||
],
|
||||
"dependencies": {
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"font-roboto": "PolymerElements/font-roboto#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<link rel="import" href="../paper-styles-classes.html">
|
||||
|
||||
<!--
|
||||
A set of base styles that are applied to the document and standard elements that
|
||||
match the Material Design spec.
|
||||
-->
|
||||
<style>
|
||||
/*
|
||||
Note that there is a lot of style duplication here. The hope is that the Polymer
|
||||
0.8 styling solution will allow for inheritance of properties so that we can
|
||||
eventually avoid it.
|
||||
*/
|
||||
|
||||
/* Mixins */
|
||||
|
||||
/* [paper-font] */
|
||||
body {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
}
|
||||
|
||||
/* [paper-font=display2] */
|
||||
h1 {
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
/* [paper-font=display1] */
|
||||
h2 {
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.01em;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/* [paper-font=headline] */
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.012em;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
/* [paper-font=subhead] */
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* [paper-font=body2] */
|
||||
h5, h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
/* [paper-font=button] */
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Overrides */
|
||||
|
||||
body, a {
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, a {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,302 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<style>
|
||||
|
||||
/*******************************
|
||||
Flex Layout
|
||||
*******************************/
|
||||
|
||||
html /deep/ .layout.horizontal,
|
||||
html /deep/ .layout.horizontal-reverse,
|
||||
html /deep/ .layout.vertical,
|
||||
html /deep/ .layout.vertical-reverse {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
html /deep/ .layout.inline {
|
||||
display: -ms-inline-flexbox;
|
||||
display: -webkit-inline-flex;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
html /deep/ .layout.horizontal {
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
html /deep/ .layout.horizontal-reverse {
|
||||
-ms-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .layout.vertical {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
html /deep/ .layout.vertical-reverse {
|
||||
-ms-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .layout.wrap {
|
||||
-ms-flex-wrap: wrap;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
html /deep/ .layout.wrap-reverse {
|
||||
-ms-flex-wrap: wrap-reverse;
|
||||
-webkit-flex-wrap: wrap-reverse;
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
html /deep/ .flex-auto {
|
||||
-ms-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
html /deep/ .flex-none {
|
||||
-ms-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
html /deep/ .flex,
|
||||
html /deep/ .flex-1 {
|
||||
-ms-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
html /deep/ .flex-2 {
|
||||
-ms-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
html /deep/ .flex-3 {
|
||||
-ms-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
html /deep/ .flex-4 {
|
||||
-ms-flex: 4;
|
||||
-webkit-flex: 4;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
html /deep/ .flex-5 {
|
||||
-ms-flex: 5;
|
||||
-webkit-flex: 5;
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
html /deep/ .flex-6 {
|
||||
-ms-flex: 6;
|
||||
-webkit-flex: 6;
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
html /deep/ .flex-7 {
|
||||
-ms-flex: 7;
|
||||
-webkit-flex: 7;
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
html /deep/ .flex-8 {
|
||||
-ms-flex: 8;
|
||||
-webkit-flex: 8;
|
||||
flex: 8;
|
||||
}
|
||||
|
||||
html /deep/ .flex-9 {
|
||||
-ms-flex: 9;
|
||||
-webkit-flex: 9;
|
||||
flex: 9;
|
||||
}
|
||||
|
||||
html /deep/ .flex-10 {
|
||||
-ms-flex: 10;
|
||||
-webkit-flex: 10;
|
||||
flex: 10;
|
||||
}
|
||||
|
||||
html /deep/ .flex-11 {
|
||||
-ms-flex: 11;
|
||||
-webkit-flex: 11;
|
||||
flex: 11;
|
||||
}
|
||||
|
||||
html /deep/ .flex-12 {
|
||||
-ms-flex: 12;
|
||||
-webkit-flex: 12;
|
||||
flex: 12;
|
||||
}
|
||||
|
||||
/* alignment in cross axis */
|
||||
|
||||
html /deep/ .layout.start {
|
||||
-ms-flex-align: start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .layout.center,
|
||||
html /deep/ .layout.center-center {
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
html /deep/ .layout.end {
|
||||
-ms-flex-align: end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* alignment in main axis */
|
||||
|
||||
html /deep/ .layout.start-justified {
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .layout.center-justified,
|
||||
html /deep/ .layout.center-center {
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
html /deep/ .layout.end-justified {
|
||||
-ms-flex-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
html /deep/ .layout.around-justified {
|
||||
-ms-flex-pack: around;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
html /deep/ .layout.justified {
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* self alignment */
|
||||
|
||||
html /deep/ .self-start {
|
||||
-ms-align-self: flex-start;
|
||||
-webkit-align-self: flex-start;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
html /deep/ .self-center {
|
||||
-ms-align-self: center;
|
||||
-webkit-align-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
html /deep/ .self-end {
|
||||
-ms-align-self: flex-end;
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
html /deep/ .self-stretch {
|
||||
-ms-align-self: stretch;
|
||||
-webkit-align-self: stretch;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/*******************************
|
||||
Other Layout
|
||||
*******************************/
|
||||
|
||||
html /deep/ .block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE 10 support for HTML5 hidden attr */
|
||||
html /deep/ [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html /deep/ .invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
html /deep/ .relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html /deep/ .fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.fullbleed {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
html /deep/ .scroll {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fixed-bottom,
|
||||
.fixed-left,
|
||||
.fixed-right,
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
botttom: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
html /deep/ .fixed-left {
|
||||
top: 0;
|
||||
botttom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<style>
|
||||
.shadow-transition {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.shadow-elevation-2dp {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.shadow-elevation-3dp {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-4dp {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-6dp {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-8dp {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.shadow-elevation-16dp {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? -->
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata:400,700">
|
||||
|
||||
<!--
|
||||
Typographic styles are provided matching the Material Design standard styles:
|
||||
http://www.google.com/design/spec/style/typography.html#typography-standard-styles
|
||||
|
||||
To make use of them, apply a `paper-font-<style>` class to elements, matching
|
||||
the font style you wish it to inherit.
|
||||
|
||||
<header class="paper-font-display2">Hey there!</header>
|
||||
|
||||
Note that these are English/Latin centric styles. You may need to further adjust
|
||||
line heights and weights for CJK typesetting. See the notes in the Material
|
||||
Design typography section.
|
||||
-->
|
||||
<style>
|
||||
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-display2,
|
||||
.paper-font-display1,
|
||||
.paper-font-headline,
|
||||
.paper-font-title,
|
||||
.paper-font-subhead,
|
||||
.paper-font-body2,
|
||||
.paper-font-body1,
|
||||
.paper-font-caption,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
}
|
||||
|
||||
.paper-font-code2,
|
||||
.paper-font-code1 {
|
||||
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
|
||||
}
|
||||
|
||||
/* Opt for better kerning for headers & other short labels. */
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-display2,
|
||||
.paper-font-display1,
|
||||
.paper-font-headline,
|
||||
.paper-font-title,
|
||||
.paper-font-subhead,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
"Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
|
||||
styles. All other styles should exist as single lines."
|
||||
*/
|
||||
.paper-font-display4,
|
||||
.paper-font-display3,
|
||||
.paper-font-title,
|
||||
.paper-font-caption,
|
||||
.paper-font-menu,
|
||||
.paper-font-button {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.paper-font-display4 {
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.044em;
|
||||
line-height: 120px;
|
||||
}
|
||||
|
||||
.paper-font-display3 {
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.026em;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.paper-font-display2 {
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.paper-font-display1 {
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.01em;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.paper-font-headline {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.012em;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.paper-font-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.paper-font-subhead {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-body2 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-body1 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-caption {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.011em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-menu {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.paper-font-button {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.paper-font-code2 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.paper-font-code1 {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
+333
@@ -0,0 +1,333 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
:root {
|
||||
|
||||
/* Material Design color palette for Google products */
|
||||
|
||||
--google-red-100: #f4c7c3;
|
||||
--google-red-300: #e67c73;
|
||||
--google-red-500: #db4437;
|
||||
--google-red-700: #c53929;
|
||||
|
||||
--google-blue-100: #c6dafc;
|
||||
--google-blue-300: #7baaf7;
|
||||
--google-blue-500: #4285f4;
|
||||
--google-blue-700: #3367d6;
|
||||
|
||||
--google-green-100: #b7e1cd;
|
||||
--google-green-300: #57bb8a;
|
||||
--google-green-500: #0f9d58;
|
||||
--google-green-700: #0b8043;
|
||||
|
||||
--google-yellow-100: #fce8b2;
|
||||
--google-yellow-300: #f7cb4d;
|
||||
--google-yellow-500: #f4b400;
|
||||
--google-yellow-700: #f09300;
|
||||
|
||||
--google-grey-100: #f5f5f5;
|
||||
--google-grey-300: #e0e0e0;
|
||||
--google-grey-500: #9e9e9e;
|
||||
--google-grey-700: #616161;
|
||||
|
||||
/* Material Design color palette from online spec document */
|
||||
|
||||
--paper-red-50: #ffebee;
|
||||
--paper-red-100: #ffcdd2;
|
||||
--paper-red-200: #ef9a9a;
|
||||
--paper-red-300: #e57373;
|
||||
--paper-red-400: #ef5350;
|
||||
--paper-red-500: #f44336;
|
||||
--paper-red-600: #e53935;
|
||||
--paper-red-700: #d32f2f;
|
||||
--paper-red-800: #c62828;
|
||||
--paper-red-900: #b71c1c;
|
||||
--paper-red-a100: #ff8a80;
|
||||
--paper-red-a200: #ff5252;
|
||||
--paper-red-a400: #ff1744;
|
||||
--paper-red-a700: #d50000;
|
||||
|
||||
--paper-pink-50: #fce4ec;
|
||||
--paper-pink-100: #f8bbd0;
|
||||
--paper-pink-200: #f48fb1;
|
||||
--paper-pink-300: #f06292;
|
||||
--paper-pink-400: #ec407a;
|
||||
--paper-pink-500: #e91e63;
|
||||
--paper-pink-600: #d81b60;
|
||||
--paper-pink-700: #c2185b;
|
||||
--paper-pink-800: #ad1457;
|
||||
--paper-pink-900: #880e4f;
|
||||
--paper-pink-a100: #ff80ab;
|
||||
--paper-pink-a200: #ff4081;
|
||||
--paper-pink-a400: #f50057;
|
||||
--paper-pink-a700: #c51162;
|
||||
|
||||
--paper-purple-50: #f3e5f5;
|
||||
--paper-purple-100: #e1bee7;
|
||||
--paper-purple-200: #ce93d8;
|
||||
--paper-purple-300: #ba68c8;
|
||||
--paper-purple-400: #ab47bc;
|
||||
--paper-purple-500: #9c27b0;
|
||||
--paper-purple-600: #8e24aa;
|
||||
--paper-purple-700: #7b1fa2;
|
||||
--paper-purple-800: #6a1b9a;
|
||||
--paper-purple-900: #4a148c;
|
||||
--paper-purple-a100: #ea80fc;
|
||||
--paper-purple-a200: #e040fb;
|
||||
--paper-purple-a400: #d500f9;
|
||||
--paper-purple-a700: #aa00ff;
|
||||
|
||||
--paper-deep-purple-50: #ede7f6;
|
||||
--paper-deep-purple-100: #d1c4e9;
|
||||
--paper-deep-purple-200: #b39ddb;
|
||||
--paper-deep-purple-300: #9575cd;
|
||||
--paper-deep-purple-400: #7e57c2;
|
||||
--paper-deep-purple-500: #673ab7;
|
||||
--paper-deep-purple-600: #5e35b1;
|
||||
--paper-deep-purple-700: #512da8;
|
||||
--paper-deep-purple-800: #4527a0;
|
||||
--paper-deep-purple-900: #311b92;
|
||||
--paper-deep-purple-a100: #b388ff;
|
||||
--paper-deep-purple-a200: #7c4dff;
|
||||
--paper-deep-purple-a400: #651fff;
|
||||
--paper-deep-purple-a700: #6200ea;
|
||||
|
||||
--paper-indigo-50: #e8eaf6;
|
||||
--paper-indigo-100: #c5cae9;
|
||||
--paper-indigo-200: #9fa8da;
|
||||
--paper-indigo-300: #7986cb;
|
||||
--paper-indigo-400: #5c6bc0;
|
||||
--paper-indigo-500: #3f51b5;
|
||||
--paper-indigo-600: #3949ab;
|
||||
--paper-indigo-700: #303f9f;
|
||||
--paper-indigo-800: #283593;
|
||||
--paper-indigo-900: #1a237e;
|
||||
--paper-indigo-a100: #8c9eff;
|
||||
--paper-indigo-a200: #536dfe;
|
||||
--paper-indigo-a400: #3d5afe;
|
||||
--paper-indigo-a700: #304ffe;
|
||||
|
||||
--paper-blue-50: #e3f2fd;
|
||||
--paper-blue-100: #bbdefb;
|
||||
--paper-blue-200: #90caf9;
|
||||
--paper-blue-300: #64b5f6;
|
||||
--paper-blue-400: #42a5f5;
|
||||
--paper-blue-500: #2196f3;
|
||||
--paper-blue-600: #1e88e5;
|
||||
--paper-blue-700: #1976d2;
|
||||
--paper-blue-800: #1565c0;
|
||||
--paper-blue-900: #0d47a1;
|
||||
--paper-blue-a100: #82b1ff;
|
||||
--paper-blue-a200: #448aff;
|
||||
--paper-blue-a400: #2979ff;
|
||||
--paper-blue-a700: #2962ff;
|
||||
|
||||
--paper-light-blue-50: #e1f5fe;
|
||||
--paper-light-blue-100: #b3e5fc;
|
||||
--paper-light-blue-200: #81d4fa;
|
||||
--paper-light-blue-300: #4fc3f7;
|
||||
--paper-light-blue-400: #29b6f6;
|
||||
--paper-light-blue-500: #03a9f4;
|
||||
--paper-light-blue-600: #039be5;
|
||||
--paper-light-blue-700: #0288d1;
|
||||
--paper-light-blue-800: #0277bd;
|
||||
--paper-light-blue-900: #01579b;
|
||||
--paper-light-blue-a100: #80d8ff;
|
||||
--paper-light-blue-a200: #40c4ff;
|
||||
--paper-light-blue-a400: #00b0ff;
|
||||
--paper-light-blue-a700: #0091ea;
|
||||
|
||||
--paper-cyan-50: #e0f7fa;
|
||||
--paper-cyan-100: #b2ebf2;
|
||||
--paper-cyan-200: #80deea;
|
||||
--paper-cyan-300: #4dd0e1;
|
||||
--paper-cyan-400: #26c6da;
|
||||
--paper-cyan-500: #00bcd4;
|
||||
--paper-cyan-600: #00acc1;
|
||||
--paper-cyan-700: #0097a7;
|
||||
--paper-cyan-800: #00838f;
|
||||
--paper-cyan-900: #006064;
|
||||
--paper-cyan-a100: #84ffff;
|
||||
--paper-cyan-a200: #18ffff;
|
||||
--paper-cyan-a400: #00e5ff;
|
||||
--paper-cyan-a700: #00b8d4;
|
||||
|
||||
--paper-teal-50: #e0f2f1;
|
||||
--paper-teal-100: #b2dfdb;
|
||||
--paper-teal-200: #80cbc4;
|
||||
--paper-teal-300: #4db6ac;
|
||||
--paper-teal-400: #26a69a;
|
||||
--paper-teal-500: #009688;
|
||||
--paper-teal-600: #00897b;
|
||||
--paper-teal-700: #00796b;
|
||||
--paper-teal-800: #00695c;
|
||||
--paper-teal-900: #004d40;
|
||||
--paper-teal-a100: #a7ffeb;
|
||||
--paper-teal-a200: #64ffda;
|
||||
--paper-teal-a400: #1de9b6;
|
||||
--paper-teal-a700: #00bfa5;
|
||||
|
||||
--paper-green-50: #e8f5e9;
|
||||
--paper-green-100: #c8e6c9;
|
||||
--paper-green-200: #a5d6a7;
|
||||
--paper-green-300: #81c784;
|
||||
--paper-green-400: #66bb6a;
|
||||
--paper-green-500: #4caf50;
|
||||
--paper-green-600: #43a047;
|
||||
--paper-green-700: #388e3c;
|
||||
--paper-green-800: #2e7d32;
|
||||
--paper-green-900: #1b5e20;
|
||||
--paper-green-a100: #b9f6ca;
|
||||
--paper-green-a200: #69f0ae;
|
||||
--paper-green-a400: #00e676;
|
||||
--paper-green-a700: #00c853;
|
||||
|
||||
--paper-light-green-50: #f1f8e9;
|
||||
--paper-light-green-100: #dcedc8;
|
||||
--paper-light-green-200: #c5e1a5;
|
||||
--paper-light-green-300: #aed581;
|
||||
--paper-light-green-400: #9ccc65;
|
||||
--paper-light-green-500: #8bc34a;
|
||||
--paper-light-green-600: #7cb342;
|
||||
--paper-light-green-700: #689f38;
|
||||
--paper-light-green-800: #558b2f;
|
||||
--paper-light-green-900: #33691e;
|
||||
--paper-light-green-a100: #ccff90;
|
||||
--paper-light-green-a200: #b2ff59;
|
||||
--paper-light-green-a400: #76ff03;
|
||||
--paper-light-green-a700: #64dd17;
|
||||
|
||||
--paper-lime-50: #f9fbe7;
|
||||
--paper-lime-100: #f0f4c3;
|
||||
--paper-lime-200: #e6ee9c;
|
||||
--paper-lime-300: #dce775;
|
||||
--paper-lime-400: #d4e157;
|
||||
--paper-lime-500: #cddc39;
|
||||
--paper-lime-600: #c0ca33;
|
||||
--paper-lime-700: #afb42b;
|
||||
--paper-lime-800: #9e9d24;
|
||||
--paper-lime-900: #827717;
|
||||
--paper-lime-a100: #f4ff81;
|
||||
--paper-lime-a200: #eeff41;
|
||||
--paper-lime-a400: #c6ff00;
|
||||
--paper-lime-a700: #aeea00;
|
||||
|
||||
--paper-yellow-50: #fffde7;
|
||||
--paper-yellow-100: #fff9c4;
|
||||
--paper-yellow-200: #fff59d;
|
||||
--paper-yellow-300: #fff176;
|
||||
--paper-yellow-400: #ffee58;
|
||||
--paper-yellow-500: #ffeb3b;
|
||||
--paper-yellow-600: #fdd835;
|
||||
--paper-yellow-700: #fbc02d;
|
||||
--paper-yellow-800: #f9a825;
|
||||
--paper-yellow-900: #f57f17;
|
||||
--paper-yellow-a100: #ffff8d;
|
||||
--paper-yellow-a200: #ffff00;
|
||||
--paper-yellow-a400: #ffea00;
|
||||
--paper-yellow-a700: #ffd600;
|
||||
|
||||
--paper-amber-50: #fff8e1;
|
||||
--paper-amber-100: #ffecb3;
|
||||
--paper-amber-200: #ffe082;
|
||||
--paper-amber-300: #ffd54f;
|
||||
--paper-amber-400: #ffca28;
|
||||
--paper-amber-500: #ffc107;
|
||||
--paper-amber-600: #ffb300;
|
||||
--paper-amber-700: #ffa000;
|
||||
--paper-amber-800: #ff8f00;
|
||||
--paper-amber-900: #ff6f00;
|
||||
--paper-amber-a100: #ffe57f;
|
||||
--paper-amber-a200: #ffd740;
|
||||
--paper-amber-a400: #ffc400;
|
||||
--paper-amber-a700: #ffab00;
|
||||
|
||||
--paper-orange-50: #fff3e0;
|
||||
--paper-orange-100: #ffe0b2;
|
||||
--paper-orange-200: #ffcc80;
|
||||
--paper-orange-300: #ffb74d;
|
||||
--paper-orange-400: #ffa726;
|
||||
--paper-orange-500: #ff9800;
|
||||
--paper-orange-600: #fb8c00;
|
||||
--paper-orange-700: #f57c00;
|
||||
--paper-orange-800: #ef6c00;
|
||||
--paper-orange-900: #e65100;
|
||||
--paper-orange-a100: #ffd180;
|
||||
--paper-orange-a200: #ffab40;
|
||||
--paper-orange-a400: #ff9100;
|
||||
--paper-orange-a700: #ff6500;
|
||||
|
||||
--paper-deep-orange-50: #ff5722;
|
||||
--paper-deep-orange-100: #fbe9e7;
|
||||
--paper-deep-orange-200: #ffccbc;
|
||||
--paper-deep-orange-300: #ff8a65;
|
||||
--paper-deep-orange-400: #ff7043;
|
||||
--paper-deep-orange-500: #ff5722;
|
||||
--paper-deep-orange-600: #f4511e;
|
||||
--paper-deep-orange-700: #e64a19;
|
||||
--paper-deep-orange-800: #d84315;
|
||||
--paper-deep-orange-900: #bf360c;
|
||||
--paper-deep-orange-a100: #ff9e80;
|
||||
--paper-deep-orange-a200: #ff6e40;
|
||||
--paper-deep-orange-a400: #ff3d00;
|
||||
--paper-deep-orange-a700: #dd2c00;
|
||||
|
||||
--paper-brown-50: #efebe9;
|
||||
--paper-brown-100: #d7ccc8;
|
||||
--paper-brown-200: #bcaaa4;
|
||||
--paper-brown-300: #a1887f;
|
||||
--paper-brown-400: #8d6e63;
|
||||
--paper-brown-500: #795548;
|
||||
--paper-brown-600: #6d4c41;
|
||||
--paper-brown-700: #5d4037;
|
||||
--paper-brown-800: #4e342e;
|
||||
--paper-brown-900: #3e2723;
|
||||
|
||||
--paper-grey-50: #fafafa;
|
||||
--paper-grey-100: #f5f5f5;
|
||||
--paper-grey-200: #eeeeee;
|
||||
--paper-grey-300: #e0e0e0;
|
||||
--paper-grey-400: #bdbdbd;
|
||||
--paper-grey-500: #9e9e9e;
|
||||
--paper-grey-600: #757575;
|
||||
--paper-grey-700: #616161;
|
||||
--paper-grey-800: #424242;
|
||||
--paper-grey-900: #212121;
|
||||
|
||||
--paper-blue-grey-50: #eceff1;
|
||||
--paper-blue-grey-100: #cfd8dc;
|
||||
--paper-blue-grey-200: #b0bec5;
|
||||
--paper-blue-grey-300: #90a4ae;
|
||||
--paper-blue-grey-400: #78909c;
|
||||
--paper-blue-grey-500: #607d8b;
|
||||
--paper-blue-grey-600: #546e7a;
|
||||
--paper-blue-grey-700: #455a64;
|
||||
--paper-blue-grey-800: #37474f;
|
||||
--paper-blue-grey-900: #263238;
|
||||
|
||||
/* opacity for dark text on a light background */
|
||||
--dark-divider-opacity: 0.12;
|
||||
--dark-disabled-opacity: 0.26; /* or hint text */
|
||||
--dark-secondary-opacity: 0.54; /* or icon */
|
||||
--dark-primary-opacity: 0.87;
|
||||
|
||||
/* opacity for light text on a dark background */
|
||||
--light-divider-opacity: 0.12;
|
||||
--light-disabled-opacity: 0.3; /* or hint text */
|
||||
--light-secondary-opacity: 0.7; /* or icon */
|
||||
--light-primary-opacity: 1.0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
:root {
|
||||
|
||||
--dark-primary-color: #303f9f;
|
||||
|
||||
--default-primary-color: #3f51b5;
|
||||
|
||||
--light-primary-color: #c5cae9;
|
||||
|
||||
--text-primary-color: #ffffff;
|
||||
|
||||
--accent-color: #ff4081;
|
||||
|
||||
--primary-background-color: #ffffff;
|
||||
|
||||
--primary-text-color: #212121;
|
||||
|
||||
--secondary-text-color: #757575;
|
||||
|
||||
--disabled-text-color: #bdbdbd;
|
||||
|
||||
--divider-color: #e0e0e0;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
|
||||
<link rel="import" href="color.html">
|
||||
<link rel="import" href="typography.html">
|
||||
<link rel="import" href="shadow.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
background-color: var(--paper-grey-50);
|
||||
}
|
||||
|
||||
.horizontal-section-container {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-justified);
|
||||
@apply(--layout-wrap);
|
||||
}
|
||||
|
||||
.vertical-section-container {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--center-justified);
|
||||
}
|
||||
|
||||
.horizontal-section {
|
||||
background-color: white;
|
||||
padding: 24px;
|
||||
margin-right: 24px;
|
||||
min-width: 200px;
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.vertical-section {
|
||||
background-color: white;
|
||||
padding: 24px;
|
||||
margin: 0 24px 24px 24px;
|
||||
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.centered {
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--google-grey-700);
|
||||
}
|
||||
|
||||
/* TODO: remove this hack and use horizontal-section-container instead */
|
||||
body > div.layout.horizontal.center-justified {
|
||||
@apply(--layout-wrap);
|
||||
}
|
||||
|
||||
</style>
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
|
||||
*/
|
||||
body {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
section > div {
|
||||
padding: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
+358
@@ -0,0 +1,358 @@
|
||||
<!doctype html>
|
||||
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>paper-styles demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../paper-styles.html">
|
||||
<link rel="import" href="../demo-pages.html">
|
||||
|
||||
<style>
|
||||
|
||||
.redlines {
|
||||
background: linear-gradient(0deg, transparent, transparent 3.5px, rgba(255,0,0,0.2) 3.5px, rgba(255,0,0,0.2) 4px);
|
||||
background-size: 100% 4px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- FIXME remove when https://github.com/Polymer/polymer/issues/1415 is resolved -->
|
||||
<dom-module id="x-demo">
|
||||
|
||||
<style>
|
||||
|
||||
.paper-font-display4 {
|
||||
@apply(--paper-font-display4);
|
||||
}
|
||||
|
||||
.paper-font-display3 {
|
||||
@apply(--paper-font-display3);
|
||||
}
|
||||
|
||||
.paper-font-display2 {
|
||||
@apply(--paper-font-display2);
|
||||
}
|
||||
|
||||
.paper-font-display1 {
|
||||
@apply(--paper-font-display1);
|
||||
}
|
||||
|
||||
.paper-font-headline {
|
||||
@apply(--paper-font-headline);
|
||||
}
|
||||
|
||||
.paper-font-title {
|
||||
@apply(--paper-font-title);
|
||||
}
|
||||
|
||||
.paper-font-subhead {
|
||||
@apply(--paper-font-subhead);
|
||||
}
|
||||
|
||||
.paper-font-body2 {
|
||||
@apply(--paper-font-body1);
|
||||
}
|
||||
|
||||
.paper-font-body1 {
|
||||
@apply(--paper-font-body1);
|
||||
}
|
||||
|
||||
.paper-font-caption {
|
||||
@apply(--paper-font-caption);
|
||||
}
|
||||
|
||||
.paper-font-menu {
|
||||
@apply(--paper-font-menu);
|
||||
}
|
||||
|
||||
.paper-font-button {
|
||||
@apply(--paper-font-button);
|
||||
}
|
||||
|
||||
.mobile-app {
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
height: 144px;
|
||||
padding: 16px;
|
||||
|
||||
background: var(--default-primary-color);
|
||||
color: var(--text-primary-color);
|
||||
@apply(--paper-font-display1);
|
||||
}
|
||||
|
||||
.item, .disabled-item {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
border: 1px solid;
|
||||
border-color: var(--divider-color);
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.item .primary {
|
||||
color: var(--primary-text-color);
|
||||
|
||||
@apply(--paper-font-body2);
|
||||
}
|
||||
|
||||
.item .secondary {
|
||||
color: var(--secondary-text-color);
|
||||
|
||||
@apply(--paper-font-body1);
|
||||
}
|
||||
|
||||
.disabled-item {
|
||||
color: var(--disabled-text-color);
|
||||
|
||||
@apply(--paper-font-body2);
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
right: 16px;
|
||||
top: -28px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
|
||||
background: var(--accent-color);
|
||||
color: var(--text-primary-color);
|
||||
@apply(--paper-font-display1);
|
||||
}
|
||||
|
||||
.shadow {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
margin: 16px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.shadow-2dp {
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.shadow-3dp {
|
||||
@apply(--shadow-elevation-3dp);
|
||||
}
|
||||
|
||||
.shadow-4dp {
|
||||
@apply(--shadow-elevation-4dp);
|
||||
}
|
||||
|
||||
.shadow-6dp {
|
||||
@apply(--shadow-elevation-6dp);
|
||||
}
|
||||
|
||||
.shadow-8dp {
|
||||
@apply(--shadow-elevation-8dp);
|
||||
}
|
||||
|
||||
.shadow-16dp {
|
||||
@apply(--shadow-elevation-16dp);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<h1>paper-styles</h1>
|
||||
|
||||
<section id="default-theme">
|
||||
<h2>default-theme.html</h2>
|
||||
|
||||
<section class="mobile-app">
|
||||
<div class="toolbar">
|
||||
Title
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="fab">+</div>
|
||||
<div class="primary">Primary text</div>
|
||||
<div class="secondary">Secondary text</div>
|
||||
</div>
|
||||
<div class="disabled-item">
|
||||
Disabled
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="typography">
|
||||
<h2>typography.html</h2>
|
||||
<p>
|
||||
Grumpy wizards make toxic brew for the evil Queen and Jack.
|
||||
</p>
|
||||
<section class="redlines paragraph">
|
||||
<div class="paper-font-display4">Display 4</div>
|
||||
<div class="paper-font-display3">Display 3</div>
|
||||
<div class="paper-font-display2">Display 2</div>
|
||||
<div class="paper-font-display1">Display 1</div>
|
||||
<div class="paper-font-headline">Headline</div>
|
||||
<div class="paper-font-title">Title</div>
|
||||
<div class="paper-font-subhead">Subhead</div>
|
||||
<div class="paper-font-body2">Body 2</div>
|
||||
<div class="paper-font-body1">Body 1</div>
|
||||
<div class="paper-font-caption">Caption</div>
|
||||
<div class="paper-font-menu">Menu</div>
|
||||
<div class="paper-font-button">Button</div>
|
||||
</section>
|
||||
|
||||
<h3>Paragraphs</h3>
|
||||
|
||||
<h4>body2</h4>
|
||||
<section class="paper-font-body2 redlines">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
|
||||
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
|
||||
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
|
||||
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
|
||||
faucibus in leo.
|
||||
</p>
|
||||
<p>
|
||||
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
|
||||
interdum neque magna, eget dapibus est auctor et. Donec accumsan
|
||||
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
|
||||
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
|
||||
sollicitudin tellus quam non sapien.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h4>body1</h4>
|
||||
<section class="paper-font-body1 redlines">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||
tincidunt dui sit amet mi auctor, ac gravida magna aliquam. Fusce quis
|
||||
purus elementum, tempus nisi vel, volutpat nulla. Vestibulum mollis
|
||||
dictum tellus, vulputate porttitor arcu. Curabitur imperdiet risus id
|
||||
egestas accumsan. Donec lectus felis, dignissim id iaculis sit amet,
|
||||
faucibus in leo.
|
||||
</p>
|
||||
<p>
|
||||
Mauris id urna ac ante ultrices commodo a imperdiet elit. Vivamus
|
||||
interdum neque magna, eget dapibus est auctor et. Donec accumsan
|
||||
libero nec augue scelerisque, ac egestas ante tincidunt. Proin
|
||||
sollicitudin, mi eget sagittis mollis, arcu orci scelerisque turpis, a
|
||||
sollicitudin tellus quam non sapien.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="shadow">
|
||||
<h2>shadow.html</h2>
|
||||
<div class="shadow shadow-2dp">2dp</div>
|
||||
<div class="shadow shadow-3dp">3dp</div>
|
||||
<div class="shadow shadow-4dp">4dp</div>
|
||||
<div class="shadow shadow-6dp">6dp</div>
|
||||
<div class="shadow shadow-8dp">8dp</div>
|
||||
<div class="shadow shadow-16dp">16dp</div>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
document.addEventListener('HTMLImportsLoaded', function() {
|
||||
Polymer({
|
||||
is: 'x-demo',
|
||||
enableCustomStyleProperties: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<x-demo></x-demo>
|
||||
|
||||
<section id="demo-page">
|
||||
<h2>demo-pages.html</h2>
|
||||
|
||||
<h3>Horizontal sections</h3>
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Column 1</h4>
|
||||
<div class="horizontal-section">
|
||||
<div>Oxygen</div>
|
||||
<div>Carbon</div>
|
||||
<div>Hydrogen</div>
|
||||
<div>Nitrogen</div>
|
||||
<div>Calcium</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Column 2</h4>
|
||||
<div class="horizontal-section">
|
||||
<div>Oxygen</div>
|
||||
<div>Carbon</div>
|
||||
<div>Hydrogen</div>
|
||||
<div>Nitrogen</div>
|
||||
<div>Calcium</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Column 3</h4>
|
||||
<div class="horizontal-section">
|
||||
<div>Oxygen</div>
|
||||
<div>Carbon</div>
|
||||
<div>Hydrogen</div>
|
||||
<div>Nitrogen</div>
|
||||
<div>Calcium</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Vertical sections</h3>
|
||||
<div class="vertical-section-container">
|
||||
<div>
|
||||
<h4>Section 1</h4>
|
||||
<div class="vertical-section">
|
||||
<div>Oxygen</div>
|
||||
<div>Carbon</div>
|
||||
<div>Hydrogen</div>
|
||||
<div>Nitrogen</div>
|
||||
<div>Calcium</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vertical-section-container centered">
|
||||
<h4>Section 2 (centered)</h4>
|
||||
<div class="vertical-section">
|
||||
<div>Oxygen</div>
|
||||
<div>Carbon</div>
|
||||
<div>Hydrogen</div>
|
||||
<div>Nitrogen</div>
|
||||
<div>Calcium</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
||||
|
||||
<link rel="import" href="classes/typography.html">
|
||||
<link rel="import" href="classes/shadow.html">
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
|
||||
|
||||
<link rel="import" href="color.html">
|
||||
<link rel="import" href="default-theme.html">
|
||||
<link rel="import" href="shadow.html">
|
||||
<link rel="import" href="typography.html">
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
:root {
|
||||
|
||||
--shadow-transition: {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
};
|
||||
|
||||
--shadow-none: {
|
||||
box-shadow: none;
|
||||
};
|
||||
|
||||
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
|
||||
|
||||
--shadow-elevation-2dp: {
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
};
|
||||
|
||||
--shadow-elevation-3dp: {
|
||||
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 8px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-4dp: {
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-6dp: {
|
||||
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 5px -1px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-8dp: {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12),
|
||||
0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
--shadow-elevation-16dp: {
|
||||
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0 6px 30px 5px rgba(0, 0, 0, 0.12),
|
||||
0 8px 10px -5px rgba(0, 0, 0, 0.4);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
+238
@@ -0,0 +1,238 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../font-roboto/roboto.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
:root {
|
||||
|
||||
/* Shared Styles */
|
||||
|
||||
/*
|
||||
Unfortunately, we can't use nested rules
|
||||
See https://github.com/Polymer/polymer/issues/1399
|
||||
*/
|
||||
--paper-font-common-base: {
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-code: {
|
||||
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
};
|
||||
|
||||
--paper-font-common-expensive-kerning: {
|
||||
text-rendering: optimizeLegibility;
|
||||
};
|
||||
|
||||
--paper-font-common-nowrap: {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
};
|
||||
|
||||
/* Material Font Styles */
|
||||
|
||||
--paper-font-display4: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 112px;
|
||||
font-weight: 300;
|
||||
letter-spacing: -.044em;
|
||||
line-height: 120px;
|
||||
};
|
||||
|
||||
--paper-font-display3: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 56px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.026em;
|
||||
line-height: 60px;
|
||||
};
|
||||
|
||||
--paper-font-display2: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.018em;
|
||||
line-height: 48px;
|
||||
};
|
||||
|
||||
--paper-font-display1: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
font-size: 34px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.01em;
|
||||
line-height: 40px;
|
||||
};
|
||||
|
||||
--paper-font-headline: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -.012em;
|
||||
line-height: 32px;
|
||||
};
|
||||
|
||||
--paper-font-title: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
};
|
||||
|
||||
--paper-font-subhead: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-body2: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-body1: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-caption: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.011em;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-menu: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
};
|
||||
|
||||
--paper-font-button: {
|
||||
/* @apply(--paper-font-common-base) */
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* @apply(--paper-font-common-expensive-kerning); */
|
||||
text-rendering: optimizeLegibility;
|
||||
/* @apply(--paper-font-common-nowrap); */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.018em;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
};
|
||||
|
||||
--paper-font-code2: {
|
||||
/* @apply(--paper-font-common-code); */
|
||||
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
--paper-font-code1: {
|
||||
/* @apply(--paper-font-common-code); */
|
||||
font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo', monospace;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user