update dialogs

dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.css

@@ -0,0 +1,53 @@
+[is="emby-input"] {
+    display: block;
+    margin: 0;
+    margin-bottom: 0 !important;
+    background: none;
+    border: 1px solid rgb(221, 221, 221);
+    border-width: 0 0 1px 0;
+    /* Prefixed box-sizing rules necessary for older browsers */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /* Remove select styling */
+    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
+    font-size: inherit;
+    /* General select styles: change as needed */
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    padding: .35em 0 .3em 0;
+    cursor: pointer;
+    outline: none !important;
+    width: 100%;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+.inputContainer {
+    margin-bottom: 1.5em;
+}
+
+.inputLabel {
+    display: block;
+}
+
+.inputLabelFocused {
+    color: #52B54B;
+}
+
+.emby-input-selectionbar {
+    height: 2px;
+    transform: scale(.01, 1);
+    transition: transform .25s ease-out;
+    position: relative;
+    top: -1px;
+    margin-bottom: .5em;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+}
+
+[is="emby-input"]:focus + .emby-input-selectionbar {
+    background-color: #52B54B;
+    transform: none;
+}

dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js

@@ -0,0 +1,71 @@
+define(['layoutManager', 'browser', 'css!./emby-input'], function (layoutManager, browser) {
+
+    var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
+
+    function getLabel(input) {
+        var elem = input.previousSibling;
+        while (elem && elem.tagName != 'LABEL') {
+            elem = elem.previousSibling;
+        }
+        return elem;
+    }
+
+    function onFocus(e) {
+        var label = getLabel(this);
+        if (label) {
+            label.classList.add('inputLabelFocused');
+            label.classList.remove('inputLabelUnfocused');
+        }
+    }
+
+    function onBlur(e) {
+        var label = getLabel(this);
+        if (label) {
+            label.classList.add('inputLabelUnfocused');
+            label.classList.remove('inputLabelFocused');
+        }
+    }
+
+    EmbyInputPrototype.createdCallback = function () {
+
+        var parent = this.parentNode;
+        if (!parent.classList.contains('inputContainer')) {
+            var div = this.ownerDocument.createElement('div');
+            div.classList.add('inputContainer');
+            parent.replaceChild(div, this);
+            div.appendChild(this);
+        }
+        if (!this.id) {
+            this.id = 'input' + new Date().getTime();
+        }
+
+        this.removeEventListener('focus', onFocus);
+        this.removeEventListener('blur', onBlur);
+
+        this.addEventListener('focus', onFocus);
+        this.addEventListener('blur', onBlur);
+    };
+
+    EmbyInputPrototype.attachedCallback = function () {
+
+        if (this.getAttribute('data-embyinput') != 'true') {
+            this.setAttribute('data-embyinput', 'true');
+
+            var label = this.ownerDocument.createElement('label');
+            label.innerHTML = this.getAttribute('label') || '';
+            label.classList.add('inputLabel');
+            label.classList.add('inputLabelUnfocused');
+            label.htmlFor = this.id;
+            this.parentNode.insertBefore(label, this);
+
+            var div = document.createElement('div');
+            div.classList.add('emby-input-selectionbar');
+            this.parentNode.insertBefore(div, this.nextSibling);
+        }
+    };
+
+    document.registerElement('emby-input', {
+        prototype: EmbyInputPrototype,
+        extends: 'input'
+    });
+});