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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/polymer/components/core-animated-pages/demos/news.html

Issue 582873003: Polymer elements added to third_party/polymer. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/components/core-animated-pages/demos/quiz1.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/polymer/components/core-animated-pages/demos/news.html
diff --git a/third_party/polymer/components/core-animated-pages/demos/news.html b/third_party/polymer/components/core-animated-pages/demos/news.html
new file mode 100644
index 0000000000000000000000000000000000000000..1ba5086c8040c5e799040304b538bc6958c116dc
--- /dev/null
+++ b/third_party/polymer/components/core-animated-pages/demos/news.html
@@ -0,0 +1,246 @@
+<!doctype html>
+<html>
+<head>
+
+ <script src="../../platform/platform.js"></script>
+
+ <link href="../../core-icons/core-icons.html" rel="import">
+ <link href="../../core-icons/social-icons.html" rel="import">
+ <link href="../../core-toolbar/core-toolbar.html" rel="import">
+
+ <link href="../../paper-shadow/paper-shadow.html" rel="import">
+
+ <link href="../core-animated-pages.html" rel="import">
+
+ <style shim-shadowdom>
+ body {
+ font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ margin: 0;
+ }
+
+ .fit {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 420px;
+ }
+
+ .toolbar {
+ background: #8d3efc;
+ /* FIXME */
+ color: #fff !important;
+ fill: #fff;
+ }
+
+ .toolbar-2 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: #000;
+ color: #fff;
+ text-align: center;
+ font-size: 48px;
+ }
+
+ body /deep/ .toolbar-2 {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: 0;
+ width: 420px;
+ background: #000;
+ color: #fff;
+ text-align: center;
+ font-size: 48px;
+ }
+
+ .container {
+ background-color: #e7e7e7;
+ padding: 16px;
+ }
+
+ .card {
+ position: relative;
+ background-color: #fff;
+ border-radius: 2px;
+ }
+
+ .card-top {
+ background: #f2da2f;
+ height: 240px;
+ }
+
+ .card-top-2 {
+ background: #99f8b7;
+ height: 240px;
+ }
+
+ .card-bottom {
+ padding: 24px;
+ }
+
+ .headline {
+ font-size: 24px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .icon {
+ position: relative;
+ background: #000;
+ color: #fff;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ }
+
+ .icon::after {
+ content: 'T';
+ font-size: 24px;
+ position: absolute;
+ top: 7px;
+ left: 13px;
+ }
+
+ .source-container {
+ margin-top: 16px;
+ }
+
+ .two-lines {
+ margin-left: 16px;
+ }
+
+ .source {
+ font-size: 14px;
+ }
+
+ .time {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 12px;
+ }
+
+ .tiles-container {
+ margin-top: 16px;
+ }
+
+ .tile {
+ position: relative;
+ display: inline-block;
+ width: 85px;
+ height: 85px;
+ background: #fff;
+ border-radius: 2px;
+ }
+
+ </style>
+
+</head>
+<body unresolved>
+
+ <polymer-element name="shadow-div" noscript>
+ <template>
+ <style>
+ :host {
+ display: block;
+ }
+ </style>
+ <paper-shadow target="{{}}" z="1"></paper-shadow>
+ <content></content>
+ </template>
+ </polymer-element>
+
+ <core-animated-pages class="fit" selected="0" transitions="cross-fade-all hero-transition">
+
+ <section id="first">
+
+ <core-toolbar class="tall toolbar">
+ <core-icon icon="menu"></core-icon>
+ <div flex>Highlights</div>
+ <core-icon icon="social:share"></core-icon>
+ <core-icon icon="bookmark"></core-icon>
+ <core-icon icon="more-vert"></core-icon>
+ </core-toolbar>
+
+ <div class="container" hero-p>
+
+ <shadow-div class="card" hero-p onclick="stuff()">
+ <div class="card-top"></div>
+ <div class="card-bottom" hero-p>
+ <div class="headline">Google's Craziest Offices</div>
+ <div class="source-container" hero-p layout horizontal center>
+ <div class="icon" hero-id="icon-header" hero></div>
+ <div class="two-lines">
+ <div class="source">The New York Times</div>
+ <div class="time">36 minutes ago</div>
+ </div>
+ </div>
+ </div>
+ </shadow-div>
+
+ <div class="tiles-container" layout horizontal justified>
+
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+
+ </div>
+
+ </div>
+
+ </section>
+
+ <section id="second">
+
+ <core-toolbar class="tall" hero-p>
+
+ <core-toolbar class="tall toolbar-2" hero-id="icon-header" hero>
+ <div flex class="middle">T</div>
+ </core-toolbar>
+ </core-toolbar>
+
+ <div class="container">
+
+ <shadow-div class="card" onclick="stuff()">
+ <div class="card-top-2"></div>
+ <div class="card-bottom">
+ <div class="headline">Some long overflowing headline</div>
+ <div class="source-container" layout horizontal center>
+ <div class="icon" style="background:red;"></div>
+ <div class="two-lines">
+ <div class="source">The New York Times</div>
+ <div class="time">36 minutes ago</div>
+ </div>
+ </div>
+ </div>
+ </shadow-div>
+
+ <div class="tiles-container" layout horizontal justified>
+
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+ <shadow-div class="tile"></shadow-div>
+
+ </div>
+
+ </div>
+
+ </section>
+
+ </core-animated-pages>
+
+ <script>
+
+ function stuff(e) {
+ var p = document.querySelector('core-animated-pages');
+ p.selected = p.selected ? 0 : 1;
+ }
+
+ </script>
+
+</body>
+</html>
« no previous file with comments | « third_party/polymer/components/core-animated-pages/demos/nested-animated-pages.html ('k') | third_party/polymer/components/core-animated-pages/demos/quiz1.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698