jekyll-polymer-magazine 0.1.0

data/assets/bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html

@@ -0,0 +1,307 @@
+<!--
+@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
+-->
+
+<script>
+  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
+</script>
+
+<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;
+    bottom: 0;
+  }
+
+  html /deep/ .fixed-bottom {
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  html /deep/ .fixed-left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+</style>

data/assets/bower_components/iron-flex-layout/demo/index.html

@@ -0,0 +1,396 @@
+<!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="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+  <link rel="import" href="../iron-flex-layout.html">
+
+  <style is="custom-style" include="demo-pages-shared-styles">
+    demo-snippet {
+      --demo-snippet-demo: {
+        padding: 0;
+      }
+    }
+    .container {
+      background-color: #ccc;
+      padding: 5px;
+      margin: 0;
+    }
+    .container > div {
+      padding: 15px;
+      margin: 5px;
+      background-color: white;
+      min-height: 20px;
+    }
+
+    .vertical-section-container {
+      max-width: 700px
+    }
+  </style>
+
+</head>
+<body unresolved class="fullbleed">
+  <div class="vertical-section-container centered">
+    <h4>Horizontal and vertical layout</h4>
+    <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>
+
+    <h4>Flexible children</h4>
+    <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>
+
+    <h4>Flexible children in vertical layouts</h4>
+    <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>
+
+    <h4>Flex ratios</h4>
+    <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>
+
+    <h4>Cross-axis stretch alignment (default)</h4>
+    <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>
+
+    <h4>Cross-axis center alignment</h4>
+    <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>
+
+    <h4>Cross-axis start alignment</h4>
+    <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>
+
+    <h4>Cross-axis end alignment</h4>
+    <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>
+
+    <h4>Justification, start justified</h4>
+    <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>
+
+    <h4>Justification, start justified</h4>
+    <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>
+
+    <h4>Justification, end justified</h4>
+    <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>
+
+    <h4>Justification, equal space between elements</h4>
+    <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>
+
+    <h4>Justification, equal space around each element</h4>
+    <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>
+
+    <h4>Self alignment</h4>
+    <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>
+
+    <h4>Wrapping</h4>
+    <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>
+
+    <h4>Reversed layouts</h4>
+    <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>
+
+    <h4>General purpose rules</h4>
+    <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>