systrace/catapult/third_party/polymer/components/paper-styles/demo/index.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!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="../color.html">
     <link rel="import" href="../typography.html">
     <link rel="import" href="../default-theme.html">
     <link rel="import" href="../demo-pages.html">
   </head>

   <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>
   <style is="custom-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-body2);
     }

     .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-12dp {
       @apply(--shadow-elevation-12dp);
     }

     .shadow-16dp {
       @apply(--shadow-elevation-16dp);
     }
   </style>

   <body unresolved>
     <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-12dp">12dp</div>
       <div class="shadow shadow-16dp">16dp</div>
     </section>

     <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>
	<!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="../color.html">
	<link rel="import" href="../typography.html">
	<link rel="import" href="../default-theme.html">
	<link rel="import" href="../demo-pages.html">
	</head>

	<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>
	<style is="custom-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-body2);
	}

	.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-12dp {
	@apply(--shadow-elevation-12dp);
	}

	.shadow-16dp {
	@apply(--shadow-elevation-16dp);
	}
	</style>

	<body unresolved>
	<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-12dp">12dp</div>
	<div class="shadow shadow-16dp">16dp</div>
	</section>

	<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>