RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

Files changed (634) hide show

data/app/assets/components/paper-dialog-scrollable/test/paper-dialog-scrollable.html ADDED Viewed

@@ -0,0 +1,171 @@
+<!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>paper-dialog-scrollable tests</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <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="../paper-dialog-scrollable.html">
+    <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
+    <style>
+      .fixed-height {
+        height: 400px;
+      }
+    </style>
+  </head>
+  <body>
+    <test-fixture id="basic">
+      <template>
+        <section class="fixed-height layout vertical">
+          <div class="header">Header</div>
+          <paper-dialog-scrollable class="flex">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </paper-dialog-scrollable>
+          <div class="footer">Footer</div>
+        </section>
+      </template>
+    </test-fixture>
+    <test-fixture id="only-child">
+      <template>
+        <section class="fixed-height layout vertical">
+          <paper-dialog-scrollable class="flex">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </paper-dialog-scrollable>
+        </section>
+      </template>
+    </test-fixture>
+    <test-fixture id="short">
+      <template>
+        <section class="fixed-height layout vertical">
+          <div class="header">Header</div>
+          <paper-dialog-scrollable class="flex">
+            <p>Hello world!</p>
+          </paper-dialog-scrollable>
+          <div class="footer">Footer</div>
+        </section>
+      </template>
+    </test-fixture>
+    <script>
+      function runAfterScroll(node, scrollTop, callback) {
+        var timeout = function() {
+          node.scrollTop = scrollTop;
+          if (node.scrollTop === scrollTop) {
+            // there seems to be no good way to wait for pseudoelement styling to apply and
+            // chrome takes a while before getComputedStyle returns the correct values
+            setTimeout(function() {
+              callback();
+            }, 250);
+          } else {
+            setTimeout(timeout, 10);
+          }
+        };
+        node.scrollTop = scrollTop;
+        setTimeout(timeout);
+      }
+      suite('basic', function() {
+        test('shows top divider if scrolled', function(done) {
+          var container = fixture('basic');
+          var scrollable = Polymer.dom(container).querySelector('paper-dialog-scrollable');
+          setTimeout(function() {
+            runAfterScroll(scrollable.scrollTarget, 10, function() {
+              assert.ok(getComputedStyle(scrollable, '::before').content, '::before has content');
+              done();
+            });
+          }, 10);
+        });
+        test('shows bottom divider if scrollable', function(done) {
+          var container = fixture('basic');
+          setTimeout(function() {
+            var scrollable = Polymer.dom(container).querySelector('paper-dialog-scrollable');
+            requestAnimationFrame(function() {
+              assert.ok(getComputedStyle(scrollable, '::after').content, '::after has content');
+              done();
+            });
+          }, 10);
+        });
+        test('hides bottom divider if scrolled to bottom', function(done) {
+          var container = fixture('basic');
+          var scrollable = Polymer.dom(container).querySelector('paper-dialog-scrollable');
+          setTimeout(function() {
+            runAfterScroll(scrollable.scrollTarget, scrollable.scrollTarget.scrollHeight - scrollable.scrollTarget.offsetHeight, function() {
+              var content = getComputedStyle(scrollable, '::after').content;
+              assert.ok(!content || content === 'none', '::after does not have content');
+              done();
+            });
+          }, 10);
+        });
+        test('does not show dividers if scrolled and only child', function(done) {
+          var container = fixture('only-child');
+          var scrollable = Polymer.dom(container).querySelector('paper-dialog-scrollable');
+          setTimeout(function() {
+            runAfterScroll(scrollable.scrollTarget, 10, function() {
+              var contentBefore = getComputedStyle(scrollable, '::before').content;
+              assert.ok(!contentBefore || contentBefore === 'none', '::before does not have content');
+              var contentAfter = getComputedStyle(scrollable, '::after').content;
+              assert.ok(!contentAfter || contentAfter === 'none', '::after does not have content');
+              done();
+            });
+          }, 10);
+        });
+        test('does not show bottom divider if not scrollable', function(done) {
+          var container = fixture('short');
+          setTimeout(function() {
+            var scrollable = Polymer.dom(container).querySelector('paper-dialog-scrollable');
+            var contentAfter = getComputedStyle(scrollable, '::after').content;
+            assert.ok(!contentAfter || contentAfter === 'none', '::after does not have content');
+            done();
+          }, 10);
+        });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/paper-drawer-panel/README.md ADDED Viewed

@@ -0,0 +1,71 @@
+# paper-drawer-panel
+`paper-drawer-panel` contains a drawer panel and a main panel.  The drawer
+and the main panel are side-by-side with drawer on the left.  When the browser
+window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
+changes to narrow layout.  In narrow layout, the drawer will be stacked on top
+of the main panel.  The drawer will slide in/out to hide/reveal the main
+panel.
+Use the attribute `drawer` to indicate that the element is the drawer panel and
+`main` to indicate that the element is the main panel.
+Example:
+```html
+<paper-drawer-panel>
+  <div drawer> Drawer panel... </div>
+  <div main> Main panel... </div>
+</paper-drawer-panel>
+```
+The drawer and the main panels are not scrollable.  You can set CSS overflow
+property on the elements to make them scrollable or use `paper-header-panel`.
+Example:
+```html
+<paper-drawer-panel>
+  <paper-header-panel drawer>
+    <paper-toolbar></paper-toolbar>
+    <div> Drawer content... </div>
+  </paper-header-panel>
+  <paper-header-panel main>
+    <paper-toolbar></paper-toolbar>
+    <div> Main content... </div>
+  </paper-header-panel>
+</paper-drawer-panel>
+```
+An element that should toggle the drawer will automatically do so if it's
+given the `paper-drawer-toggle` attribute.  Also this element will automatically
+be hidden in wide layout.
+Example:
+```html
+<paper-drawer-panel>
+  <paper-header-panel drawer>
+    <paper-toolbar>
+      <div>Application</div>
+    </paper-toolbar>
+    <div> Drawer content... </div>
+  </paper-header-panel>
+  <paper-header-panel main>
+    <paper-toolbar>
+      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
+      <div>Title</div>
+    </paper-toolbar>
+    <div> Main content... </div>
+  </paper-header-panel>
+</paper-drawer-panel>
+```
+To position the drawer to the right, add `right-drawer` attribute.
+```html
+<paper-drawer-panel right-drawer>
+  <div drawer> Drawer panel... </div>
+  <div main> Main panel... </div>
+</paper-drawer-panel>
+```

data/app/assets/components/paper-drawer-panel/bower.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "paper-drawer-panel",
+  "version": "1.0.1",
+  "description": "A responsive drawer panel",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "drawer",
+    "responsive",
+    "layout"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-drawer-panel.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-drawer-panel",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/paper-drawer-panel/demo/index.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!doctype html>
+<!--
+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>paper-drawer-panel demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../paper-styles/paper-styles.html">
+    <link rel="stylesheet" href="../../paper-styles/demo.css">
+    <link rel="import" href="../../paper-button/paper-button.html">
+    <link rel="import" href="../paper-drawer-panel.html">
+    <style is="custom-style">
+      #paperDrawerPanel [main] {
+        background-color: var(--google-grey-100);
+      }
+      #paperDrawerPanel [drawer] {
+        border-right: 1px solid var(--google-grey-300);
+      }
+      #paperDrawerPanel[right-drawer] [drawer] {
+        border-left: 1px solid var(--google-grey-300);
+      }
+      paper-button {
+        color: white;
+        margin: 10px;
+        background-color: var(--google-blue-700);
+        white-space: nowrap;
+      }
+    </style>
+  </head>
+  <body>
+    <paper-drawer-panel id="paperDrawerPanel">
+      <div drawer></div>
+      <div main>
+        <div>
+          <paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>
+        </div>
+        <div>
+          <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
+        </div>
+      </div>
+    </paper-drawer-panel>
+    <script>
+      (function(global) {
+        'use strict';
+        var DRAWER_ATTR = 'right-drawer';
+        var pdp = document.getElementById('paperDrawerPanel');
+        global.flipDrawer = function() {
+          if (pdp.hasAttribute(DRAWER_ATTR)) {
+            pdp.removeAttribute(DRAWER_ATTR);
+          } else {
+            pdp.setAttribute(DRAWER_ATTR, '');
+          }
+        }
+      }(this));
+    </script>
+  </body>
+</html>

data/app/assets/components/paper-drawer-panel/hero.svg ADDED Viewed

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<path d="M175,102H61V24h114V102z M63,100h110V26H63V100z"/>
+	<path d="M91,102H61V24h30V102z M63,100h26V26H63V100z"/>
+	<circle cx="123" cy="63" r="4"/>
+	<rect x="90" y="62" width="33" height="2"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/paper-drawer-panel/index.html ADDED Viewed

@@ -0,0 +1,29 @@
+<!doctype html>
+<!--
+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-drawer-panel</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/{core-drawer-panel/core-drawer-panel.css → paper-drawer-panel/paper-drawer-panel.css} RENAMED Viewed

@@ -1,12 +1,13 @@
-/*
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+/**
+@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
-*/
+*/
 :host {
   display: block;
   position: absolute;
@@ -17,14 +18,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   overflow: hidden;
 }
-core-selector > #drawer {
+iron-selector > #drawer {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
+  background-color: white;
   will-change: transform;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
+  @apply(--paper-drawer-panel-drawer-container);
 }
 .transition > #drawer {
@@ -32,30 +36,24 @@ core-selector > #drawer {
   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
 }
-/*
-right-drawer: make drawer on the right side
-*/
+.left-drawer > #drawer {
+  @apply(--paper-drawer-panel-left-drawer-container);
+}
 .right-drawer > #drawer {
   left: auto;
   right: 0;
-}
-polyfill-next-selector { content: ':host [drawer]'; }
-::content[select="[drawer]"] > * {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
+  @apply(--paper-drawer-panel-right-drawer-container);
 }
-core-selector > #main {
+iron-selector > #main {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
+  @apply(--paper-drawer-panel-main-container);
 }
 .transition > #main {
@@ -70,8 +68,11 @@ core-selector > #main {
   transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
 }
-polyfill-next-selector { content: '#main > [main]'; }
-::content[select="[main]"] > * {
+#main > ::content > [main] {
+  height: 100%;
+}
+#drawer > ::content > [drawer] {
   height: 100%;
 }
@@ -81,47 +82,30 @@ polyfill-next-selector { content: '#main > [main]'; }
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.3);
   visibility: hidden;
   opacity: 0;
   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+  background-color: rgba(0, 0, 0, 0.3);
 }
-#edgeSwipeOverlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 20px;
-}
-.right-drawer > #main > #edgeSwipeOverlay {
-  right: 0;
-  left: auto;
-}
-/*
-narrow layout
-*/
-.narrow-layout > #drawer.core-selected {
+.narrow-layout > #drawer.iron-selected {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
 }
-.right-drawer.narrow-layout > #drawer.core-selected {
+.right-drawer.narrow-layout > #drawer.iron-selected {
   box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
 }
-polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
-.narrow-layout > #drawer > ::content[select="[drawer]"] > * {
+.narrow-layout > #drawer > ::content > [drawer] {
   border: 0;
 }
-.narrow-layout > #drawer:not(.core-selected) {
+.left-drawer.narrow-layout > #drawer:not(.iron-selected) {
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
 }
-.right-drawer.narrow-layout > #drawer:not(.core-selected) {
+.right-drawer.narrow-layout > #drawer:not(.iron-selected) {
   left: auto;
   -webkit-transform: translateX(100%);
   transform: translateX(100%);
@@ -138,14 +122,13 @@ polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
   padding: 0;
 }
-.narrow-layout > #main:not(.core-selected) > #scrim,
-.dragging #scrim {
+.narrow-layout > #main:not(.iron-selected) > #scrim,
+.dragging > #main > #scrim {
   visibility: visible;
-  opacity: 1;
+  opacity: var(--paper-drawer-panel-scrim-opacity, 1);
 }
-polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
-.narrow-layout > #main > ::content[select="[main]"] > * {
+.narrow-layout > #main > * {
   margin: 0;
   min-height: 100%;
   left: 0;
@@ -154,7 +137,6 @@ polyfill-next-selector { content: ':host .narrow-layout > #main > [main]'; }
   -moz-box-sizing: border-box;
 }
-polyfill-next-selector { content: 'core-selector:not(.narrow-layout) [core-drawer-toggle]'; }
-core-selector:not(.narrow-layout) ::content [core-drawer-toggle] {
+iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
   display: none;
-}
+}