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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: polymer_1.2.3/bower_components/iron-flex-layout/demo/index.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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 | « polymer_1.2.3/bower_components/iron-flex-layout/demo/demo-snippet.html ('k') | polymer_1.2.3/bower_components/iron-flex-layout/index.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: polymer_1.2.3/bower_components/iron-flex-layout/demo/index.html
diff --git a/polymer_1.2.3/bower_components/iron-flex-layout/demo/index.html b/polymer_1.2.3/bower_components/iron-flex-layout/demo/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..c5127b2f02d9308434d76311b9d5d0713ffae126
--- /dev/null
+++ b/polymer_1.2.3/bower_components/iron-flex-layout/demo/index.html
@@ -0,0 +1,428 @@
+<!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>
+
+ <title>iron-flex-layout demo</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+ <link rel="import" href="../../paper-styles/demo-pages.html">
+ <link rel="import" href="demo-snippet.html">
+ <link rel="import" href="../iron-flex-layout.html">
+
+ <style>
+ .container {
+ background-color: #ccc;
+ padding: 5px;
+ margin: 0;
+ }
+ .container > div {
+ padding: 15px;
+ margin: 5px;
+ background-color: white;
+ min-height: 20px;
+ }
+
+ demo-snippet {
+ width: 100%;
+ }
+
+ .vertical-section {
+ padding: 0 !important;
+ }
+ </style>
+
+</head>
+<body unresolved class="fullbleed">
+
+ <h4>Horizontal and vertical layout</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex {
+ @apply(--layout-horizontal);
+ }
+ </style>
+
+ <div class="container flex">
+ <div>one</div>
+ <div>two</div>
+ <div>three</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Flexible children</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-horizontal {
+ @apply(--layout-horizontal);
+ }
+ .flexchild {
+ @apply(--layout-flex);
+ }
+ </style>
+
+ <div class="container flex-horizontal">
+ <div>one</div>
+ <div class="flexchild">two (flex)</div>
+ <div>three</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Flexible children in vertical layouts</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-vertical {
+ @apply(--layout-vertical);
+ height: 220px;
+ }
+ .flexchild-vertical {
+ @apply(--layout-flex);
+ }
+ </style>
+
+ <div class="container flex-vertical">
+ <div>one</div>
+ <div class="flexchild-vertical">two (flex)</div>
+ <div>three</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Flex ratios</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-horizontal-with-ratios {
+ @apply(--layout-horizontal);
+ }
+ .flexchild {
+ @apply(--layout-flex);
+ }
+ .flex2child {
+ @apply(--layout-flex-2);
+ }
+ .flex3child {
+ @apply(--layout-flex-3);
+ }
+ </style>
+
+ <div class="container flex-horizontal-with-ratios">
+ <div class="flex3child">one</div>
+ <div class="flexchild">two</div>
+ <div class="flex2child">three</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Cross-axis stretch alignment (default)</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-stretch-align {
+ @apply(--layout-horizontal);
+ height: 120px;
+ }
+ </style>
+
+ <div class="container flex-stretch-align">
+ <div>stretch</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Cross-axis center alignment</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-center-align {
+ @apply(--layout-horizontal);
+ @apply(--layout-center);
+ height: 120px;
+ }
+ </style>
+
+ <div class="container flex-center-align">
+ <div>center</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Cross-axis start alignment</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-start-align {
+ @apply(--layout-horizontal);
+ @apply(--layout-start);
+ height: 120px;
+ }
+ </style>
+
+ <div class="container flex-start-align">
+ <div>start</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Cross-axis end alignment</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-end-align {
+ @apply(--layout-horizontal);
+ @apply(--layout-end);
+ height: 120px;
+ }
+ </style>
+
+ <div class="container flex-end-align">
+ <div>end</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Justification, start justified</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-start-justified {
+ @apply(--layout-horizontal);
+ @apply(--layout-start-justified);
+ }
+ </style>
+
+ <div class="container flex-start-justified">
+ <div>start-justified</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Justification, start justified</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-center-justified {
+ @apply(--layout-horizontal);
+ @apply(--layout-center-justified);
+ }
+ </style>
+
+ <div class="container flex-center-justified">
+ <div>center-justified</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Justification, end justified</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-end-justified {
+ @apply(--layout-horizontal);
+ @apply(--layout-end-justified);
+ }
+ </style>
+
+ <div class="container flex-end-justified">
+ <div>end-justified</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Justification, equal space between elements</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-equal-justified {
+ @apply(--layout-horizontal);
+ @apply(--layout-justified);
+ }
+ </style>
+
+ <div class="container flex-equal-justified">
+ <div>justified</div>
+ <div>justified</div>
+ <div>justified</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Justification, equal space around each element</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-equal-around-justified {
+ @apply(--layout-horizontal);
+ @apply(--layout-around-justified);
+ }
+ </style>
+
+ <div class="container flex-equal-around-justified">
+ <div>around-justified</div>
+ <div>around-justified</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Self alignment</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-self-align {
+ @apply(--layout-horizontal);
+ @apply(--layout-justified);
+ height: 120px;
+ }
+ .flex-self-align div {
+ @apply(--layout-flex);
+ }
+ .child1 {
+ @apply(--layout-self-start);
+ }
+ .child2 {
+ @apply(--layout-self-center);
+ }
+ .child3 {
+ @apply(--layout-self-end);
+ }
+ .child4 {
+ @apply(--layout-self-stretch);
+ }
+ </style>
+
+ <div class="container flex-self-align">
+ <div class="child1">one</div>
+ <div class="child2">two</div>
+ <div class="child3">three</div>
+ <div class="child4">four</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Wrapping</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-wrap {
+ @apply(--layout-horizontal);
+ @apply(--layout-wrap);
+ width: 200px;
+ }
+ </style>
+
+ <div class="container flex-wrap">
+ <div>one</div>
+ <div>two</div>
+ <div>three</div>
+ <div>four</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>Reversed layouts</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .flex-reversed {
+ @apply(--layout-horizontal-reverse);
+ }
+ </style>
+
+ <div class="container flex-reversed">
+ <div>one</div>
+ <div>two</div>
+ <div>three</div>
+ <div>four</div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+
+ <h4>General purpose ruls</h4>
+ <div class="vertical-section">
+ <demo-snippet>
+ <template>
+ <style is="custom-style">
+ .general {
+ width: 100%;
+ }
+ .general > div {
+ background-color: #ccc;
+ padding: 4px;
+ margin: 12px;
+ }
+ .block {
+ @apply(--layout-block);
+ }
+ .invisible {
+ @apply(--layout-invisible);
+ }
+ .relative {
+ @apply(--layout-relative);
+ }
+ .fit {
+ @apply(--layout-fit);
+ }
+ </style>
+
+ <div class="general">
+ <div>Before <span>[A Span]</span> After</div>
+ <div>Before <span class="block">[A Block Span]</span> After</div>
+ <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
+ <div class="relative" style="height: 100px;">
+ <div class="fit" style="background-color: #000;color: white">Fit</div>
+ </div>
+ </div>
+ </template>
+ </demo-snippet>
+ </div>
+</body>
+</html>
« no previous file with comments | « polymer_1.2.3/bower_components/iron-flex-layout/demo/demo-snippet.html ('k') | polymer_1.2.3/bower_components/iron-flex-layout/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698