From a3e38c1759814ab73ee15d8a701b8415baeb5c7a Mon Sep 17 00:00:00 2001
From: Oliver Hamlet <oliver.hamlet@gmail.com>
Date: Wed, 24 Dec 2014 14:53:46 +0000
Subject: [PATCH] Moved dropdown menu overrides.

Since paper-dropdown-menu is only found in loot-dropdown-menu, the CSS
is better placed in there. Presumably there's also less searching for
matches without the /deep/ selector.
---
 resources/report/css/material.css             | 14 -------
 resources/report/css/overrides.css            | 17 --------
 resources/report/html/loot-dropdown-menu.html | 39 +++++++++++++++++--
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/resources/report/css/material.css b/resources/report/css/material.css
index 1b59b793..d66a0031 100644
--- a/resources/report/css/material.css
+++ b/resources/report/css/material.css
@@ -73,20 +73,6 @@ html /deep/ :-ms-input-placeholder {
 html /deep/ input {
    text-overflow: ellipsis;
 }
-
-/* paper-dropdown-menu */
-html /deep/ paper-dropdown-menu {
-   margin-left: 4px;
-   margin-right: 4px;
-   border-bottom-color: rgba(0, 0, 0, 0.12);
-}
-html /deep/ paper-dropdown-menu::shadow #label {
-   color: rgba(0, 0, 0, 0.87);
-}
-html /deep/ paper-dropdown-menu[disabled]::shadow #label,
-html /deep/ paper-dropdown-menu::shadow #arrow {
-   color: rgba(0, 0, 0, 0.26);
-}
 /* paper-dropdown */
 html /deep/ paper-dropdown {
    padding: 8px 0;
diff --git a/resources/report/css/overrides.css b/resources/report/css/overrides.css
index 9c272960..e405c3db 100644
--- a/resources/report/css/overrides.css
+++ b/resources/report/css/overrides.css
@@ -32,23 +32,6 @@ html /deep/ paper-input-decorator::shadow .underline .focused-underline {
     /* line color when the input is focused */
     background-color: #64B5F6;
 }
-/* Set the underline and arrow colours for dropdown menus on dark backgrounds. */
-html .dark /deep/ paper-dropdown-menu {
-    border-bottom-color: rgba(255, 255, 255, 0.12);
-}
-html .dark /deep/ paper-dropdown-menu::shadow #label {
-    color: white;
-}
-html .dark /deep/ paper-dropdown-menu[disabled]::shadow #label,
-html .dark /deep/ paper-dropdown-menu::shadow #arrow {
-    color: rgba(255, 255, 255, 0.30);
-}
-/* Set the highlight colour for dropdown menu selections. */
-html /deep/ loot-dropdown-menu .core-selected,
-html /deep/ paper-dropdown-menu .core-selected {
-    color: #64B5F6;
-    background-color: inherit;
-}
 /* Set the tab colours. */
 html /deep/ paper-tabs::shadow #selectionBar {
     background-color: #64B5F6;
diff --git a/resources/report/html/loot-dropdown-menu.html b/resources/report/html/loot-dropdown-menu.html
index 9de39284..491e7924 100644
--- a/resources/report/html/loot-dropdown-menu.html
+++ b/resources/report/html/loot-dropdown-menu.html
@@ -14,9 +14,40 @@ it a <select>-like API. This means:
 
 <polymer-element name="loot-dropdown-menu" attributes="disabled">
     <template>
+        <style>
+        /* Material Design overrides */
+        paper-dropdown-menu {
+            margin-left: 4px;
+            margin-right: 4px;
+            border-bottom-color: rgba(0, 0, 0, 0.12);
+        }
+        paper-dropdown-menu::shadow #label {
+            color: rgba(0, 0, 0, 0.87);
+        }
+        paper-dropdown-menu[disabled]::shadow #label,
+        paper-dropdown-menu::shadow #arrow {
+            color: rgba(0, 0, 0, 0.26);
+        }
+
+        /* LOOT-specific overrides */
+        ::content .core-selected {
+            color: #64B5F6;
+            background-color: inherit;
+        }
+        :host(.dark) paper-dropdown-menu {
+            border-bottom-color: rgba(255, 255, 255, 0.12);
+        }
+        :host(.dark) paper-dropdown-menu::shadow #label {
+            color: white;
+        }
+        :host(.dark) paper-dropdown-menu[disabled]::shadow #label,
+        :host(.dark) paper-dropdown-menu::shadow #arrow {
+            color: rgba(255, 255, 255, 0.30);
+        }
+        </style>
         <paper-dropdown-menu disabled?="{{disabled}}">
             <paper-dropdown class="dropdown">
-                <core-menu class="menu" valueattr="value">
+                <core-menu id="menu" class="menu" valueattr="value">
                     <content></content>
                 </core-menu>
             </paper-dropdown>
@@ -28,11 +59,11 @@ it a <select>-like API. This means:
         disabled: false,
 
         attached: function() {
-            this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.addEventListener('core-select', this.onItemSelect, false);
+            this.shadowRoot.getElementById('menu').addEventListener('core-select', this.onItemSelect, false);
         },
 
         detached: function() {
-            this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.removeEventListener('core-select', this.onItemSelect, false);
+            this.shadowRoot.getElementById('menu').removeEventListener('core-select', this.onItemSelect, false);
         },
 
         onItemSelect: function(evt) {
@@ -42,7 +73,7 @@ it a <select>-like API. This means:
         },
 
         valueChanged: function(oldValue, newValue) {
-            this.shadowRoot.firstElementChild.lastElementChild.firstElementChild.selected = newValue;
+            this.shadowRoot.getElementById('menu').selected = newValue;
         },
     });
     </script>