update build scripts

dashboard-ui/apiclient/connectionmanager.js

@@ -253,27 +253,12 @@
                 Events.trigger(self, 'apiclientcreated', [apiClient]);
             }
 
-            if (server.AccessToken && server.UserId) {
-
-                apiClient.setAuthenticationInfo(server.AccessToken, server.UserId);
-            }
-            else {
-
-                apiClient.clearAuthenticationInfo();
-            }
-
             logger.log('returning instance from getOrAddApiClient');
             return apiClient;
         }
 
         self.getOrCreateApiClient = function (serverId) {
 
-            var apiClient = self.getApiClient(serverId);
-
-            if (apiClient) {
-                return apiClient;
-            }
-
             var credentials = credentialProvider.credentials();
             var servers = credentials.Servers.filter(function (s) {
                 return stringEqualsIgnoreCase(s.Id, serverId);

dashboard-ui/apiclient/sync/mediasync.js

@@ -4,7 +4,7 @@
 
         var self = this;
 
-        self.sync = function (apiClient, serverInfo) {
+        self.sync = function (apiClient, serverInfo, options) {
 
             var deferred = DeferredBuilder.Deferred();
 
@@ -14,7 +14,7 @@
                 syncData(apiClient, serverInfo, false).done(function () {
 
                     // Download new content
-                    getNewMedia(apiClient, serverInfo).done(function () {
+                    getNewMedia(apiClient, serverInfo, options).done(function () {
 
                         // Do the second data sync
                         syncData(apiClient, serverInfo, false).done(function () {
@@ -160,7 +160,7 @@
             return deferred.promise();
         }
 
-        function getNewMedia(apiClient, serverInfo) {
+        function getNewMedia(apiClient, serverInfo, options) {
 
             Logger.log('Begin getNewMedia');
 
@@ -168,14 +168,14 @@
 
             apiClient.getReadySyncItems(apiClient.deviceId()).done(function (jobItems) {
 
-                getNextNewItem(jobItems, 0, apiClient, serverInfo, deferred);
+                getNextNewItem(jobItems, 0, apiClient, serverInfo, options, deferred);
 
             }).fail(getOnFail(deferred));
 
             return deferred.promise();
         }
 
-        function getNextNewItem(jobItems, index, apiClient, serverInfo, deferred) {
+        function getNextNewItem(jobItems, index, apiClient, serverInfo, options, deferred) {
 
             var length = jobItems.length;
 
@@ -185,12 +185,22 @@
                 return;
             }
 
-            getNewItem(jobItems[index], apiClient, serverInfo).done(function () {
+            var hasGoneNext = false;
+            var goNext = function () {
 
-                getNextNewItem(jobItems, index + 1, apiClient, serverInfo, deferred);
+                if (!hasGoneNext) {
-            }).fail(function () {
+                    hasGoneNext = true;
-                getNextNewItem(jobItems, index + 1, apiClient, serverInfo, deferred);
+                    getNextNewItem(jobItems, index + 1, apiClient, serverInfo, options, deferred);
-            });
+                }
+            };
+
+            getNewItem(jobItems[index], apiClient, serverInfo).done(goNext).fail(goNext);
+
+            options = options || {};
+            if (options.enableBackgroundTransfer) {
+                // Give it 2 seconds, then move on
+                setTimeout(goNext, 2000);
+            }
         }
 
         function getNewItem(jobItem, apiClient, serverInfo) {
@@ -317,6 +327,10 @@
 
             downloadImage(apiClient, serverId, itemId, imageTag, imageType).done(function () {
 
+                // For the sake of simplicity, limit to one image
+                deferred.resolve();
+                return;
+
                 getNextImage(index + 1, apiClient, localItem, deferred);
 
             }).fail(getOnFail(deferred));

dashboard-ui/apiclient/sync/serversync.js

@@ -44,7 +44,7 @@
             Logger.log("Creating ContentUploader to server: " + server.Id);
 
             var nextAction = function () {
-                syncOfflineUsers(server, deferred);
+                syncOfflineUsers(server, options, deferred);
             };
 
             options = options || {};
@@ -71,7 +71,7 @@
             });
         }
 
-        function syncOfflineUsers(server, deferred) {
+        function syncOfflineUsers(server, options, deferred) {
 
             require(['offlineusersync'], function () {
 
@@ -81,7 +81,7 @@
 
                     Logger.log("OfflineUserSync succeeded to server: " + server.Id);
 
-                    syncMedia(server, deferred);
+                    syncMedia(server, options, deferred);
 
                 }).fail(function () {
 
@@ -92,13 +92,13 @@
             });
         }
 
-        function syncMedia(server, deferred) {
+        function syncMedia(server, options, deferred) {
 
             require(['mediasync'], function () {
 
                 var apiClient = connectionManager.getApiClient(server.Id);
 
-                new MediaBrowser.MediaSync().sync(apiClient, server).done(function () {
+                new MediaBrowser.MediaSync().sync(apiClient, server, options).done(function () {
 
                     Logger.log("MediaSync succeeded to server: " + server.Id);
 

dashboard-ui/bower_components/paper-button/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-button",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Material design button",
   "authors": [
     "The Polymer Authors"
@@ -24,7 +24,8 @@
     "polymer": "Polymer/polymer#^1.1.0",
     "paper-ripple": "polymerelements/paper-ripple#^1.0.0",
     "paper-material": "polymerelements/paper-material#^1.0.0",
-    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0"
+    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0"
   },
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
@@ -36,11 +37,11 @@
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
     "paper-styles": "polymerelements/paper-styles#^1.0.0"
   },
-  "_release": "1.0.4",
+  "_release": "1.0.5",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.4",
+    "tag": "v1.0.5",
-    "commit": "402fffc8bad25ea7c3135f2e5997ad00765a2d61"
+    "commit": "e8367f8f0d77e420a75c8811bda9b0666b81ff8e"
   },
   "_source": "git://github.com/PolymerElements/paper-button.git",
   "_target": "~1.0.1",

dashboard-ui/bower_components/paper-button/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "paper-button",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Material design button",
   "authors": [
     "The Polymer Authors"
@@ -24,7 +24,8 @@
     "polymer": "Polymer/polymer#^1.1.0",
     "paper-ripple": "polymerelements/paper-ripple#^1.0.0",
     "paper-material": "polymerelements/paper-material#^1.0.0",
-    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0"
+    "paper-behaviors": "polymerelements/paper-behaviors#^1.0.0",
+    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0"
   },
   "devDependencies": {
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",

dashboard-ui/bower_components/paper-button/demo/index.html

@@ -92,12 +92,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       background: #eee;
     }
 
-    paper-button.ripple::shadow paper-ripple {
+    paper-button.ripple {
-      color: var(--paper-pink-a200);
+      --paper-button-ink-color: var(--paper-pink-a200);
-    }
-
-    paper-button.ripple paper-ripple {
-      color: var(--paper-pink-a200);
     }
 
   </style>

dashboard-ui/bower_components/paper-button/paper-button.html

@@ -12,6 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../paper-material/paper-material.html">
 <link rel="import" href="../paper-ripple/paper-ripple.html">
 <link rel="import" href="../paper-behaviors/paper-button-behavior.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 
 <!--
 
@@ -23,10 +24,10 @@ shadow.
 
 Example:
 
-    <paper-button>flat button</paper-button>
+    <paper-button>Flat button</paper-button>
-    <paper-button raised>raised button</paper-button>
+    <paper-button raised>Raised button</paper-button>
     <paper-button noink>No ripple effect</paper-button>
-    <paper-button toggles>toggle-able button</paper-button>
+    <paper-button toggles>Toggle-able button</paper-button>
 
 A button that has `toggles` true will remain `active` after being clicked (and
 will have an `active` attribute set). For more information, see the `Polymer.IronButtonState`
@@ -44,29 +45,32 @@ create a button with an icon and some text:
 
 Style the button with CSS as you would a normal DOM element.
 
-    /* make #my-button green with yellow text */
+    paper-button.fancy {
-    #my-button {
       background: green;
       color: yellow;
     }
 
-By default, the ripple is the same color as the foreground at 25% opacity. You may
+    paper-button.fancy:hover {
-customize the color using this selector:
+      background: lime;
-
-    /* make #my-button use a blue ripple instead of foreground color */
-    #my-button::shadow paper-ripple {
-      color: blue;
     }
 
-The opacity of the ripple is not customizable via CSS.
+    paper-button[disabled],
+    paper-button[toggles][active] {
+      background: red;
+    }
+
+By default, the ripple is the same color as the foreground at 25% opacity. You may
+customize the color using the `--paper-button-ink-color` custom property.
 
 The following custom properties and mixins are also available for styling:
 
 Custom property | Description | Default
 ----------------|-------------|----------
-`--paper-button-flat-focus-color` | Background color of a focused flat button | `--paper-grey-200`
+`--paper-button-ink-color` | Background color of the ripple | `Based on the button's color`
 `--paper-button` | Mixin applied to the button | `{}`
-`--paper-button-disabled` | Mixin applied to the disabled button | `{}`
+`--paper-button-disabled` | Mixin applied to the disabled button. Note that you can also use the `paper-button[disabled]` selector | `{}`
+`--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's been focused using the keyboard | `{}`
+`--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after it's been focused using the keyboard | `{}`
 
 @demo demo/index.html
 -->
@@ -93,12 +97,19 @@ Custom property | Description | Default
         user-select: none;
         cursor: pointer;
         z-index: 0;
+        padding: 0.7em 0.57em;
 
         @apply(--paper-button);
       }
 
-      .keyboard-focus {
+      :host([raised]) .keyboard-focus {
         font-weight: bold;
+        @apply(paper-button-raised-keyboard-focus);
+      }
+
+      :host(:not([raised])) .keyboard-focus {
+        font-weight: bold;
+        @apply(paper-button-flat-keyboard-focus);
       }
 
       :host([disabled]) {
@@ -114,24 +125,25 @@ Custom property | Description | Default
         display: none;
       }
 
+      paper-ripple {
+        color: var(--paper-button-ink-color);
+      }
+
       paper-material {
         border-radius: inherit;
+        @apply(--layout-fit);
       }
 
       .content > ::content * {
         text-transform: inherit;
       }
-
-      .content {
-        padding: 0.7em 0.57em
-      }
     </style>
 
     <paper-ripple></paper-ripple>
 
-    <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated>
+    <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated></paper-material>
+
     <content></content>
-    </paper-material>
 
   </template>
 </dom-module>

dashboard-ui/bower_components/paper-button/test/paper-button.html

@@ -54,10 +54,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         }, 1);
       });
 
-      test('has aria role "button"', function() {
-        expect(button.getAttribute('role')).to.be.eql('button');
-      });
-
       test('can be disabled imperatively', function() {
         button.disabled = true;
         expect(button.getAttribute('aria-disabled')).to.be.eql('true');
@@ -78,6 +74,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         MockInteractions.pressEnter(button);
       });
     });
+
+    suite('<paper-button>', function() {
+      var button;
+
+      setup(function() {
+        button = fixture('TrivialButton');
+      });
+
+      test('has aria role "button"', function() {
+        expect(button.getAttribute('role')).to.be.eql('button');
+      });
+      
+      a11ySuite('TrivialButton');
+    });
+
   </script>
 </body>
 </html>

dashboard-ui/bower_components/paper-ripple/.bower.json

@@ -30,14 +30,14 @@
     "web-component-tester": "*",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/paper-ripple",
+  "homepage": "https://github.com/PolymerElements/paper-ripple",
   "_release": "1.0.2",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.2",
     "commit": "b546dbe6ad0b1f58cac80caec3136cf3232e12fc"
   },
-  "_source": "git://github.com/polymerelements/paper-ripple.git",
+  "_source": "git://github.com/PolymerElements/paper-ripple.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/paper-ripple"
+  "_originalSource": "PolymerElements/paper-ripple"
 }

dashboard-ui/cordova/localassetmanager.js

@@ -492,7 +492,7 @@
                     }, function (value) {
 
                         // on progress
-                        Logger.log('download progress: ' + value);
+                        //Logger.log('download progress: ' + value);
 
                     });
                 });

dashboard-ui/css/notifications.css

@@ -12,7 +12,6 @@
     color: #fff;
     font-weight: 500;
     position: relative;
-    top: -8px;
     border-radius: 1000px;
     background: #444;
     line-height: 28px;

dashboard-ui/dashboard.html

@@ -23,9 +23,9 @@
 
                     <div class="readOnlyContent dashboardHomeLeftColumn">
 
-                        <div data-role="collapsible" data-collapsed="false">
-                            <h3>${HeaderServerInformation}</h3>
                         <div>
+                            <h1>${HeaderServerInformation}</h1>
+                            <div class="paperList" style="padding:1em;">
                                 <p id="appVersionNumber">
                                 </p>
                                 <p id="pUpToDate" style="display: none;">
@@ -68,8 +68,8 @@
                             </div>
                         </div>
 
-                        <div class="activeDevicesCollapsible" data-role="collapsible" data-collapsed="false" data-content-theme="false" style="margin-top: 2em;">
+                        <div class="activeDevicesCollapsible" style="margin-top: 2em;">
-                            <h3>${HeaderActiveDevices}</h3>
+                            <h1>${HeaderActiveDevices}</h1>
                             <div class="activeDevices">
                             </div>
                         </div>

dashboard-ui/library.html

@@ -23,10 +23,12 @@
 
                     <br />
                     <div class="readOnlyContent">
-                        <button type="button" class="btnRefresh" data-icon="refresh" data-mini="true">${ButtonScanLibrary}</button>
+                        <paper-button raised class="btnRefresh block submit"><iron-icon icon="refresh"></iron-icon><span>${ButtonScanLibrary}</span></paper-button>
+                        <div style="margin:5px;">
                             <progress max="100" min="0" style="width: 100%;" class="refreshProgress"></progress>
                             <div style="margin-top: 5px;">${LabelLastResult} <span class="lastRefreshResult"></span></div>
                         </div>
+                    </div>
 
                 </div>
             </div>

dashboard-ui/notificationlist.html

@@ -11,7 +11,7 @@
 
                 <div class="readOnlyContent" style="max-width:900px;">
 
-                    <div class="notificationsList" style="margin-top: 1em;">
+                    <div class="notificationsList paperList" style="margin-top: 1em;">
                     </div>
 
                 </div>

dashboard-ui/scripts/librarybrowser.js

@@ -280,6 +280,7 @@
                 tabs.addEventListener('iron-select', function () {
 
                     var animateTab = !$.browser.safari;
+                    animateTab = false;
                     var selected = pages.selected;
                     if (selected != null && animateTab) {
                         var newValue = this.selected;

dashboard-ui/scripts/librarymenu.js

@@ -28,7 +28,7 @@
 
         html += '<paper-icon-button icon="mic" class="headerButton headerButtonRight headerVoiceButton hide" onclick="VoiceInputManager.startListening();"></paper-icon-button>';
 
-        //html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>';
+        html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>';
 
         if (!showUserAtTop()) {
             html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton" onclick="return Dashboard.showUserFlyout(this);"></paper-icon-button>';
@@ -143,20 +143,20 @@
 
     function updateViewMenuBarHeadroom(page, viewMenuBar) {
 
-        if (page.classList.contains('libraryPage')) {
+        //if (page.classList.contains('libraryPage')) {
-            // Don't like this timeout at all but if headroom is activated during the page events it will jump and flicker on us
+        //    // Don't like this timeout at all but if headroom is activated during the page events it will jump and flicker on us
-            setTimeout(reEnableHeadroom, 700);
+        //    setTimeout(reEnableHeadroom, 700);
-        } else {
+        //} else {
-            viewMenuBar.classList.add('headroomDisabled');
+        //    viewMenuBar.classList.add('headroomDisabled');
-        }
+        //}
     }
 
     function reEnableHeadroom() {
 
-        var headroomDisabled = document.querySelectorAll('.headroomDisabled');
+        //var headroomDisabled = document.querySelectorAll('.headroomDisabled');
-        for (var i = 0, length = headroomDisabled.length; i < length; i++) {
+        //for (var i = 0, length = headroomDisabled.length; i < length; i++) {
-            headroomDisabled[i].classList.remove('headroomDisabled');
+        //    headroomDisabled[i].classList.remove('headroomDisabled');
-        }
+        //}
     }
 
     function getItemHref(item, context) {
@@ -815,14 +815,14 @@
 
     });
 
-    pageClassOn('pagebeforehide', 'page', function () {
+    //pageClassOn('pagebeforehide', 'page', function () {
 
-        var headroomEnabled = document.querySelectorAll('.headroomEnabled');
+    //    var headroomEnabled = document.querySelectorAll('.headroomEnabled');
-        for (var i = 0, length = headroomEnabled.length; i < length; i++) {
+    //    for (var i = 0, length = headroomEnabled.length; i < length; i++) {
-            headroomEnabled[i].classList.add('headroomDisabled');
+    //        headroomEnabled[i].classList.add('headroomDisabled');
-        }
+    //    }
 
-    });
+    //});
 
     function onPageBeforeShowDocumentReady(page) {
 

dashboard-ui/scripts/localsync.js

@@ -20,6 +20,13 @@
             require(['multiserversync'], function () {
 
                 lastStart = new Date().getTime();
+
+                options = options || {};
+
+                if ($.browser.safari) {
+                    options.enableBackgroundTransfer = true;
+                }
+
                 syncPromise = new MediaBrowser.MultiServerSync(ConnectionManager).sync(options).done(function () {
 
                     syncPromise = null;

dashboard-ui/scripts/notifications.js

@@ -121,54 +121,41 @@
 
     function getNotificationHtml(notification) {
 
-        var html = '';
+        var itemHtml = '';
 
-        var cssClass = notification.IsRead ? "flyoutNotification" : "flyoutNotification unreadFlyoutNotification";
-
-        html += '<div data-notificationid="' + notification.Id + '" class="' + cssClass + '">';
-
-        html += '<div class="notificationImage">';
-        html += getImageHtml(notification);
-        html += '</div>';
-
-        html += '<div class="notificationContent">';
-
-        html += '<p style="font-size:16px;margin: .5em 0 .5em;" class="notificationName">';
         if (notification.Url) {
-            html += '<a href="' + notification.Url + '" target="_blank" style="text-decoration:none;">' + notification.Name + '</a>';
+            itemHtml += '<a class="clearLink" href="' + notification.Url + '" target="_blank">';
-        } else {
-            html += notification.Name;
         }
-        html += '</p>';
 
-        html += '<p class="notificationTime" style="margin: .5em 0;">' + humane_date(notification.Date) + '</p>';
+        itemHtml += '<paper-icon-item>';
+
+        itemHtml += '<paper-fab class="listAvatar blue" icon="dvr" item-icon></paper-fab>';
+
+        itemHtml += '<paper-item-body three-line>';
+
+        itemHtml += '<div>';
+        itemHtml += notification.Name;
+        itemHtml += '</div>';
+
+        itemHtml += '<div secondary>';
+        itemHtml += humane_date(notification.Date);
+        itemHtml += '</div>';
 
         if (notification.Description) {
-            html += '<p style="margin: .5em 0;max-height:150px;overflow:hidden;text-overflow:ellipsis;">' + notification.Description + '</p>';
+            itemHtml += '<div secondary>';
+            itemHtml += notification.Description;
+            itemHtml += '</div>';
         }
 
-        html += '</div>';
+        itemHtml += '</paper-item-body>';
 
-        html += '</div>';
+        itemHtml += '</paper-icon-item>';
 
-        return html;
+        if (notification.Url) {
+            itemHtml += '</a>';
         }
 
-    function getImageHtml(notification) {
+        return itemHtml;
-
-        if (notification.Level == "Error") {
-
-            return '<div class="imgNotification imgNotificationError"><div class="imgNotificationInner imgNotificationIcon"></div></div>';
-
-        }
-        if (notification.Level == "Warning") {
-
-            return '<div class="imgNotification imgNotificationWarning"><div class="imgNotificationInner imgNotificationIcon"></div></div>';
-
-        }
-
-        return '<div class="imgNotification imgNotificationNormal"><div class="imgNotificationInner imgNotificationIcon"></div></div>';
-
     }
 
     window.Notifications = new notifications();
@@ -187,6 +174,12 @@
         $(apiClient).off("websocketmessage", onWebSocketMessage).on("websocketmessage", onWebSocketMessage);
     }
 
+    $(document).on('headercreated', function (e, apiClient) {
+        $('.btnNotifications').on('click', function () {
+            Dashboard.navigate('notificationlist.html');
+        });
+    });
+
     Dashboard.ready(function () {
 
         if (window.ApiClient) {

dashboard-ui/thirdparty/paper-button-style.css

@@ -388,7 +388,7 @@ paper-menu-item {
 }
 
 .ui-body-b paper-checkbox #checkbox.paper-checkbox {
-    border-color: #eee;
+    border-color: #dedede;
 }
 
 .ui-body-a paper-checkbox #checkbox.checked.paper-checkbox {

dashboard-ui/vulcanize-out.html

@@ -7199,6 +7199,310 @@ this.fire('dom-change');
   ];
 
 </script>
+<style>
+  /* IE 10 support for HTML5 hidden attr */
+  [hidden] {
+    display: none !important;
+  }
+</style>
+
+<style is="custom-style">
+  :root {
+
+    --layout: {
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+    };
+
+    --layout-inline: {
+      display: -ms-inline-flexbox;
+      display: -webkit-inline-flex;
+      display: inline-flex;
+    };
+
+    --layout-horizontal: {
+      /* @apply(--layout); */
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+
+      -ms-flex-direction: row;
+      -webkit-flex-direction: row;
+      flex-direction: row;
+    };
+
+    --layout-horizontal-reverse: {
+      -ms-flex-direction: row-reverse;
+      -webkit-flex-direction: row-reverse;
+      flex-direction: row-reverse;
+    };
+
+    --layout-vertical: {
+      /* @apply(--layout); */
+      display: -ms-flexbox;
+      display: -webkit-flex;
+      display: flex;
+
+      -ms-flex-direction: column;
+      -webkit-flex-direction: column;
+      flex-direction: column;
+    };
+
+    --layout-vertical-reverse: {
+      -ms-flex-direction: column-reverse;
+      -webkit-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+    };
+
+    --layout-wrap: {
+      -ms-flex-wrap: wrap;
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+    };
+
+    --layout-wrap-reverse: {
+      -ms-flex-wrap: wrap-reverse;
+      -webkit-flex-wrap: wrap-reverse;
+      flex-wrap: wrap-reverse;
+    };
+
+    --layout-flex-auto: {
+      -ms-flex: 1 1 auto;
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+    };
+
+    --layout-flex-none: {
+      -ms-flex: none;
+      -webkit-flex: none;
+      flex: none;
+    };
+
+    --layout-flex: {
+      -ms-flex: 1 1 0.000000001px;
+      -webkit-flex: 1;
+      flex: 1;
+      -webkit-flex-basis: 0.000000001px;
+      flex-basis: 0.000000001px;
+    };
+
+    --layout-flex-2: {
+      -ms-flex: 2;
+      -webkit-flex: 2;
+      flex: 2;
+    };
+
+    --layout-flex-3: {
+      -ms-flex: 3;
+      -webkit-flex: 3;
+      flex: 3;
+    };
+
+    --layout-flex-4: {
+      -ms-flex: 4;
+      -webkit-flex: 4;
+      flex: 4;
+    };
+
+    --layout-flex-5: {
+      -ms-flex: 5;
+      -webkit-flex: 5;
+      flex: 5;
+    };
+
+    --layout-flex-6: {
+      -ms-flex: 6;
+      -webkit-flex: 6;
+      flex: 6;
+    };
+
+    --layout-flex-7: {
+      -ms-flex: 7;
+      -webkit-flex: 7;
+      flex: 7;
+    };
+
+    --layout-flex-8: {
+      -ms-flex: 8;
+      -webkit-flex: 8;
+      flex: 8;
+    };
+
+    --layout-flex-9: {
+      -ms-flex: 9;
+      -webkit-flex: 9;
+      flex: 9;
+    };
+
+    --layout-flex-10: {
+      -ms-flex: 10;
+      -webkit-flex: 10;
+      flex: 10;
+    };
+
+    --layout-flex-11: {
+      -ms-flex: 11;
+      -webkit-flex: 11;
+      flex: 11;
+    };
+
+    --layout-flex-12: {
+      -ms-flex: 12;
+      -webkit-flex: 12;
+      flex: 12;
+    };
+
+    /* alignment in cross axis */
+
+    --layout-start: {
+      -ms-flex-align: start;
+      -webkit-align-items: flex-start;
+      align-items: flex-start;
+    };
+
+    --layout-center: {
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+    };
+
+    --layout-end: {
+      -ms-flex-align: end;
+      -webkit-align-items: flex-end;
+      align-items: flex-end;
+    };
+
+    /* alignment in main axis */
+
+    --layout-start-justified: {
+      -ms-flex-pack: start;
+      -webkit-justify-content: flex-start;
+      justify-content: flex-start;
+    };
+
+    --layout-center-justified: {
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+    };
+
+    --layout-end-justified: {
+      -ms-flex-pack: end;
+      -webkit-justify-content: flex-end;
+      justify-content: flex-end;
+    };
+
+    --layout-around-justified: {
+      -ms-flex-pack: around;
+      -webkit-justify-content: space-around;
+      justify-content: space-around;
+    };
+
+    --layout-justified: {
+      -ms-flex-pack: justify;
+      -webkit-justify-content: space-between;
+      justify-content: space-between;
+    };
+
+    --layout-center-center: {
+      /* @apply(--layout-center --layout-center-justified); */
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      align-items: center;
+      -ms-flex-pack: center;
+      -webkit-justify-content: center;
+      justify-content: center;
+    };
+
+    /* self alignment */
+
+    --layout-self-start: {
+      -ms-align-self: flex-start;
+      -webkit-align-self: flex-start;
+      align-self: flex-start;
+    };
+
+    --layout-self-center: {
+      -ms-align-self: center;
+      -webkit-align-self: center;
+      align-self: center;
+    };
+
+    --layout-self-end: {
+      -ms-align-self: flex-end;
+      -webkit-align-self: flex-end;
+      align-self: flex-end;
+    };
+
+    --layout-self-stretch: {
+      -ms-align-self: stretch;
+      -webkit-align-self: stretch;
+      align-self: stretch;
+    };
+
+    /*******************************
+              Other Layout
+    *******************************/
+
+    --layout-block: {
+      display: block;
+    };
+
+    --layout-invisible: {
+      visibility: hidden !important;
+    };
+
+    --layout-relative: {
+      position: relative;
+    };
+
+    --layout-fit: {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+    --layout-scroll: {
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+    };
+
+    /* fixed position */
+
+    --layout-fixed-top: {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+    };
+
+    --layout-fixed-right: {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+    };
+
+    --layout-fixed-bottom: {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+    --layout-fixed-left: {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+    };
+
+  }
+
+</style>
 
 
 <style is="custom-style">
@@ -7750,310 +8054,6 @@ this.fire('dom-change');
   }
 
 </style>
-<style>
-  /* IE 10 support for HTML5 hidden attr */
-  [hidden] {
-    display: none !important;
-  }
-</style>
-
-<style is="custom-style">
-  :root {
-
-    --layout: {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-    };
-
-    --layout-inline: {
-      display: -ms-inline-flexbox;
-      display: -webkit-inline-flex;
-      display: inline-flex;
-    };
-
-    --layout-horizontal: {
-      /* @apply(--layout); */
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-
-      -ms-flex-direction: row;
-      -webkit-flex-direction: row;
-      flex-direction: row;
-    };
-
-    --layout-horizontal-reverse: {
-      -ms-flex-direction: row-reverse;
-      -webkit-flex-direction: row-reverse;
-      flex-direction: row-reverse;
-    };
-
-    --layout-vertical: {
-      /* @apply(--layout); */
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-
-      -ms-flex-direction: column;
-      -webkit-flex-direction: column;
-      flex-direction: column;
-    };
-
-    --layout-vertical-reverse: {
-      -ms-flex-direction: column-reverse;
-      -webkit-flex-direction: column-reverse;
-      flex-direction: column-reverse;
-    };
-
-    --layout-wrap: {
-      -ms-flex-wrap: wrap;
-      -webkit-flex-wrap: wrap;
-      flex-wrap: wrap;
-    };
-
-    --layout-wrap-reverse: {
-      -ms-flex-wrap: wrap-reverse;
-      -webkit-flex-wrap: wrap-reverse;
-      flex-wrap: wrap-reverse;
-    };
-
-    --layout-flex-auto: {
-      -ms-flex: 1 1 auto;
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-    };
-
-    --layout-flex-none: {
-      -ms-flex: none;
-      -webkit-flex: none;
-      flex: none;
-    };
-
-    --layout-flex: {
-      -ms-flex: 1 1 0.000000001px;
-      -webkit-flex: 1;
-      flex: 1;
-      -webkit-flex-basis: 0.000000001px;
-      flex-basis: 0.000000001px;
-    };
-
-    --layout-flex-2: {
-      -ms-flex: 2;
-      -webkit-flex: 2;
-      flex: 2;
-    };
-
-    --layout-flex-3: {
-      -ms-flex: 3;
-      -webkit-flex: 3;
-      flex: 3;
-    };
-
-    --layout-flex-4: {
-      -ms-flex: 4;
-      -webkit-flex: 4;
-      flex: 4;
-    };
-
-    --layout-flex-5: {
-      -ms-flex: 5;
-      -webkit-flex: 5;
-      flex: 5;
-    };
-
-    --layout-flex-6: {
-      -ms-flex: 6;
-      -webkit-flex: 6;
-      flex: 6;
-    };
-
-    --layout-flex-7: {
-      -ms-flex: 7;
-      -webkit-flex: 7;
-      flex: 7;
-    };
-
-    --layout-flex-8: {
-      -ms-flex: 8;
-      -webkit-flex: 8;
-      flex: 8;
-    };
-
-    --layout-flex-9: {
-      -ms-flex: 9;
-      -webkit-flex: 9;
-      flex: 9;
-    };
-
-    --layout-flex-10: {
-      -ms-flex: 10;
-      -webkit-flex: 10;
-      flex: 10;
-    };
-
-    --layout-flex-11: {
-      -ms-flex: 11;
-      -webkit-flex: 11;
-      flex: 11;
-    };
-
-    --layout-flex-12: {
-      -ms-flex: 12;
-      -webkit-flex: 12;
-      flex: 12;
-    };
-
-    /* alignment in cross axis */
-
-    --layout-start: {
-      -ms-flex-align: start;
-      -webkit-align-items: flex-start;
-      align-items: flex-start;
-    };
-
-    --layout-center: {
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-    };
-
-    --layout-end: {
-      -ms-flex-align: end;
-      -webkit-align-items: flex-end;
-      align-items: flex-end;
-    };
-
-    /* alignment in main axis */
-
-    --layout-start-justified: {
-      -ms-flex-pack: start;
-      -webkit-justify-content: flex-start;
-      justify-content: flex-start;
-    };
-
-    --layout-center-justified: {
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-    };
-
-    --layout-end-justified: {
-      -ms-flex-pack: end;
-      -webkit-justify-content: flex-end;
-      justify-content: flex-end;
-    };
-
-    --layout-around-justified: {
-      -ms-flex-pack: around;
-      -webkit-justify-content: space-around;
-      justify-content: space-around;
-    };
-
-    --layout-justified: {
-      -ms-flex-pack: justify;
-      -webkit-justify-content: space-between;
-      justify-content: space-between;
-    };
-
-    --layout-center-center: {
-      /* @apply(--layout-center --layout-center-justified); */
-      -ms-flex-align: center;
-      -webkit-align-items: center;
-      align-items: center;
-      -ms-flex-pack: center;
-      -webkit-justify-content: center;
-      justify-content: center;
-    };
-
-    /* self alignment */
-
-    --layout-self-start: {
-      -ms-align-self: flex-start;
-      -webkit-align-self: flex-start;
-      align-self: flex-start;
-    };
-
-    --layout-self-center: {
-      -ms-align-self: center;
-      -webkit-align-self: center;
-      align-self: center;
-    };
-
-    --layout-self-end: {
-      -ms-align-self: flex-end;
-      -webkit-align-self: flex-end;
-      align-self: flex-end;
-    };
-
-    --layout-self-stretch: {
-      -ms-align-self: stretch;
-      -webkit-align-self: stretch;
-      align-self: stretch;
-    };
-
-    /*******************************
-              Other Layout
-    *******************************/
-
-    --layout-block: {
-      display: block;
-    };
-
-    --layout-invisible: {
-      visibility: hidden !important;
-    };
-
-    --layout-relative: {
-      position: relative;
-    };
-
-    --layout-fit: {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-scroll: {
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-    };
-
-    /* fixed position */
-
-    --layout-fixed-top: {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    };
-
-    --layout-fixed-right: {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    };
-
-    --layout-fixed-bottom: {
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-    --layout-fixed-left: {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-    };
-
-  }
-
-</style>
 
 
 
@@ -13784,12 +13784,19 @@ is separate from validation, and `allowed-pattern` does not affect how the input
         user-select: none;
         cursor: pointer;
         z-index: 0;
+        padding: 0.7em 0.57em;
 
         @apply(--paper-button);
       }
 
-      .keyboard-focus {
+      :host([raised]) .keyboard-focus {
         font-weight: bold;
+        @apply(paper-button-raised-keyboard-focus);
+      }
+
+      :host(:not([raised])) .keyboard-focus {
+        font-weight: bold;
+        @apply(paper-button-flat-keyboard-focus);
       }
 
       :host([disabled]) {
@@ -13805,24 +13812,25 @@ is separate from validation, and `allowed-pattern` does not affect how the input
         display: none;
       }
 
+      paper-ripple {
+        color: var(--paper-button-ink-color);
+      }
+
       paper-material {
         border-radius: inherit;
+        @apply(--layout-fit);
       }
 
       .content > ::content * {
         text-transform: inherit;
       }
-
-      .content {
-        padding: 0.7em 0.57em
-      }
     </style>
 
     <paper-ripple></paper-ripple>
 
-    <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated="">
+    <paper-material class$="[[_computeContentClass(receivedFocusFromKeyboard)]]" elevation="[[_elevation]]" animated=""></paper-material>
+
     <content></content>
-    </paper-material>
 
   </template>
 </dom-module>