RubyGems - jekyll-polymer-magazine - Versions diffs - 0.1.0 - Mend

jekyll-polymer-magazine 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (994) hide show

data/assets/bower_components/app-layout/app-header-layout/demo/scrolling-region.html ADDED

@@ -0,0 +1,87 @@
+<!--
+@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
+-->
+<!doctype html>
+<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>app-header-layout demo</title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../../font-roboto/roboto.html">
+  <link rel="import" href="../../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../app-header/app-header.html">
+  <link rel="import" href="../../app-scroll-effects/app-scroll-effects.html">
+  <link rel="import" href="../../app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../demo/sample-content.html">
+  <link rel="import" href="../app-header-layout.html">
+  <style is="custom-style">
+    html, body {
+      height: 100%;
+    }
+    body {
+      margin: 0;
+      font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #666;
+    }
+    app-header-layout {
+      position: absolute;
+      top: 100px;
+      right: 100px;
+      bottom: 100px;
+      left: 100px;
+      height: calc(100% - 200px);
+      background-color: #eee;
+      overflow: hidden;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+    }
+    app-header {
+      background-color: #4285f4;
+      color: #fff;
+    }
+    app-header paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+  </style>
+</head>
+<body>
+  <!-- app-header-layout provides a scroller -->
+  <app-header-layout has-scrolling-region>
+    <app-header effects="waterfall" condenses reveals>
+      <app-toolbar>
+        <paper-icon-button icon="menu"></paper-icon-button>
+        <div main-title></div>
+        <paper-icon-button icon="search"></paper-icon-button>
+      </app-toolbar>
+      <app-toolbar></app-toolbar>
+      <app-toolbar>
+        <div spacer main-title>My Drive</div>
+      </app-toolbar>
+    </app-header>
+    <sample-content size="100"></sample-content>
+  </app-header-layout>
+</body>
+</html>

data/assets/bower_components/app-layout/app-header-layout/demo/simple.html ADDED

@@ -0,0 +1,74 @@
+<!--
+@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
+-->
+<!doctype html>
+<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>app-header-layout demo</title>
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../../font-roboto/roboto.html">
+  <link rel="import" href="../../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../app-header/app-header.html">
+  <link rel="import" href="../../app-scroll-effects/app-scroll-effects.html">
+  <link rel="import" href="../../app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../demo/sample-content.html">
+  <link rel="import" href="../app-header-layout.html">
+  <style is="custom-style">
+    body {
+      margin: 0;
+      font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #eee;
+    }
+    app-header {
+      background-color: #4285f4;
+      color: #fff;
+    }
+    app-header paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+  </style>
+</head>
+<body>
+  <!-- default to use body scroller -->
+  <app-header-layout>
+    <app-header effects="waterfall" condenses reveals>
+      <app-toolbar>
+        <paper-icon-button icon="menu"></paper-icon-button>
+        <div main-title></div>
+        <paper-icon-button icon="search"></paper-icon-button>
+      </app-toolbar>
+      <app-toolbar></app-toolbar>
+      <app-toolbar>
+        <div spacer main-title>My Drive</div>
+      </app-toolbar>
+    </app-header>
+    <div content>
+      <sample-content size="100"></sample-content>
+    </div>
+  </app-header-layout>
+</body>
+</html>

data/assets/bower_components/app-layout/app-header-layout/test/app-header-layout.html ADDED

@@ -0,0 +1,152 @@
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>test for app-header-layout</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../web-component-tester/browser.js"></script>
+  <script src="../../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../app-header/app-header.html">
+  <link rel="import" href="../app-header-layout.html">
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+    app-header {
+      background: green;
+    }
+    .content {
+      width: 100%;
+      height: 3000px;
+      background-color: red;
+    }
+    [has-scrolling-region] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  </style>
+</head>
+<body>
+  <test-fixture id="trivialAppHeaderLayout">
+    <template>
+      <app-header-layout>
+        <app-header condenses>
+          <app-toolbar></app-toolbar>
+          <app-toolbar>
+            <div main-title spacer>Title</div>
+          </app-toolbar>
+        </app-header>
+        <div class="content"></div>
+      </app-header-layout>
+    </template>
+  </test-fixture>
+  <test-fixture id="trivialOwnScrollingRegion">
+    <template>
+      <app-header-layout has-scrolling-region>
+        <app-header fixed condenses>
+          <app-toolbar></app-toolbar>
+          <app-toolbar>
+            <div main-title spacer>Title</div>
+          </app-toolbar>
+        </app-header>
+        <div class="content"></div>
+      </app-header-layout>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic features', function() {
+      var headerLayout, header, toolbar;
+      setup(function() {
+        headerLayout = fixture('trivialAppHeaderLayout');
+        header = headerLayout.querySelector('app-header');
+        toolbar = headerLayout.querySelector('app-toolbar');
+      });
+      test('default values', function() {
+        assert.isFalse(headerLayout.hasScrollingRegion);
+        assert.equal(header.scrollTarget, document.documentElement);
+      });
+      test('scrolling region', function() {
+        headerLayout.hasScrollingRegion = true;
+        assert.isTrue(header.scrollTarget !== document.documentElement, 'scroller should not point to the document element');
+      });
+      test('header box size', function(done) {
+        headerLayout.hasScrollingRegion = false;
+        flush(function() {
+          assert.equal(headerLayout.offsetWidth, header.offsetWidth,
+              'should have the same width of app-header-layout');
+          headerLayout.style.width = '200px';
+          headerLayout.resetLayout();
+          flush(function() {
+            assert.equal(headerLayout.offsetWidth, header.offsetWidth,
+              'should have the same width of app-header-layout even after setting a width');
+            done();
+          });
+        });
+      });
+      test('fullbleed', function(done) {
+        headerLayout.setAttribute('fullbleed', '');
+        flush(function() {
+          assert.deepEqual(headerLayout.getBoundingClientRect(),
+              headerLayout.offsetParent.getBoundingClientRect());
+          done();
+        });
+      });
+    });
+    suite('Header layout with scrolling region', function() {
+      var headerLayout, header, toolbar;
+      setup(function() {
+        headerLayout = fixture('trivialOwnScrollingRegion');
+        header = headerLayout.querySelector('app-header');
+        toolbar = headerLayout.querySelector('app-toolbar');
+      });
+      test('layout', function(done) {
+        flush(function() {
+          assert.equal(parseInt(headerLayout.$.contentContainer.style.paddingTop, 10),
+              header.offsetHeight,
+              'should add padding to the content container');
+          done();
+        });
+      });
+    });
+  </script>
+</body>
+</html>

data/assets/bower_components/app-layout/app-header-layout/test/index.html ADDED

@@ -0,0 +1,25 @@
+<!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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>app-header-layout tests</title>
+  <script src="../../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'app-header-layout.html',
+      'app-header-layout.html?dom=shadow'
+    ]);
+  </script>
+</body>
+</html>

data/assets/bower_components/app-layout/app-header/README.md ADDED

@@ -0,0 +1,199 @@
+##&lt;app-header&gt;
+![app-header]
+(http://app-layout-assets.appspot.com/assets/docs/app-header/header.gif)
+app-header is container element for app-toolbars at the top of the screen that can have scroll
+effects. By default, an app-header moves away from the viewport when scrolling down and
+if using `reveals`, the header slides back when scrolling back up. For example:
+```html
+<app-header reveals>
+  <app-toolbar>
+    <div main-title>App name</div>
+  </app-toolbar>
+</app-header>
+```
+app-header can also condense when scrolling down. To achieve this behavior, the header
+must have a larger height than the `sticky` element in the light DOM. For example:
+```html
+<app-header style="height: 96px;" condenses fixed>
+  <app-toolbar style="height: 64px;">
+    <div main-title>App name</div>
+  </app-toolbar>
+</app-header>
+```
+In this case the header is initially `96px` tall, and it shrinks to `64px` when scrolling down.
+That is what is meant by "condensing".
+### Sticky element
+The element that is positioned fixed to top of the header's `scrollTarget` when a threshold
+is reached, similar to `position: sticky` in CSS. This element **must** be an immediate
+child of app-header. By default, the `sticky` element is the first `app-toolbar that
+is an immediate child of app-header.
+```html
+<app-header condenses>
+  <app-toolbar> Sticky element </app-toolbar>
+</app-header>
+```
+#### Customizing the sticky element
+```html
+<app-header condenses>
+  <app-toolbar></app-toolbar>
+  <app-toolbar sticky> Sticky element </app-toolbar>
+</app-header>
+```
+### Scroll target
+The app-header's `scrollTarget` property allows to customize the scrollable element to which
+the header responds when the user scrolls. By default, app-header uses the document as
+the scroll target, but you can customize this property by setting the id of the element, e.g.
+```html
+<div id="scrollingRegion" style="overflow-y: auto;">
+  <app-header scroll-target="scrollingRegion">
+  </app-header>
+</div>
+```
+In this case, the `scrollTarget` property points to the outer div element. Alternatively,
+you can set this property programmatically:
+```js
+appHeader.scrollTarget = document.querySelector("#scrollingRegion");
+```
+## Backgrounds
+app-header has two background layers that can be used for styling when the header is condensed
+or when the scrollable element is scrolled to the top.
+## Scroll effects
+Scroll effects are _optional_ visual effects applied in app-header based on scroll position. For example,
+The [Material Design scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
+recommends effects that can be installed via the `effects` property. e.g.
+```html
+<app-header effects="waterfall">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+#### Importing the effects
+To use the scroll effects, you must explicitly import them in addition to `app-header`:
+```html
+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+```
+#### List of effects
+* **blend-background**
+Fades in/out two background elements by applying CSS opacity based on scroll position.
+You can use this effect to smoothly change the background color or image of the header.
+For example, using the mixin `--app-header-background-rear-layer` lets you assign a different
+background when the header is condensed:
+```css
+app-header {
+  background-color: red;
+  --app-header-background-rear-layer: {
+    /* The header is blue when condensed */
+    background-color: blue;
+  };
+}
+```
+* **fade-background**
+Upon scrolling past a threshold, this effect will trigger an opacity transition to
+fade in/out the backgrounds. Compared to the `blend-background` effect,
+this effect doesn't interpolate the opacity based on scroll position.
+* **parallax-background**
+A simple parallax effect that vertically translates the backgrounds based on a fraction
+of the scroll position. For example:
+```css
+app-header {
+  --app-header-background-front-layer: {
+    background-image: url(...);
+  };
+}
+```
+```html
+<app-header style="height: 300px;" effects="parallax-background">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+The fraction determines how far the background moves relative to the scroll position.
+This value can be assigned via the `scalar` config value and it is typically a value
+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
+* **resize-title**
+Progressively interpolates the size of the title from the element with the `main-title` attribute
+to the element with the `condensed-title` attribute as the header condenses. For example:
+```html
+<app-header condenses reveals effects="resize-title">
+  <app-toolbar>
+      <h4 condensed-title>App name</h4>
+  </app-toolbar>
+  <app-toolbar>
+      <h1 main-title>App name</h1>
+  </app-toolbar>
+</app-header>
+```
+* **resize-snapped-title**
+Upon scrolling past a threshold, this effect fades in/out the titles using opacity transitions.
+Similarly to `resize-title`, the `main-title` and `condensed-title` elements must be placed in the
+light DOM.
+* **waterfall**
+Toggles the shadow property in app-header to create a sense of depth (as recommended in the
+MD spec) between the header and the underneath content. You can change the shadow by
+customizing the `--app-header-shadow` mixin. For example:
+```css
+app-header {
+  --app-header-shadow: {
+    box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);
+  };
+}
+```
+```html
+<app-header condenses reveals effects="waterfall">
+  <app-toolbar>
+      <h1 main-title>App name</h1>
+  </app-toolbar>
+</app-header>
+```
+* **material**
+Installs the waterfall, resize-title, blend-background and parallax-background effects.
+### Content attributes
+Attribute | Description         | Default
+----------|---------------------|----------------------------------------
+`sticky` | Element that remains at the top when the header condenses. | The first app-toolbar in the light DOM.
+## Styling
+Mixin | Description | Default
+------|-------------|----------
+`--app-header-background-front-layer` | Applies to the front layer of the background. | {}
+`--app-header-background-rear-layer` | Applies to the rear layer of the background. | {}
+`--app-header-shadow` | Applies to the shadow. | {}