Unify iron-dropdown CSS

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="/settings_root_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style include="cr-shared-style">
       h2 {
         align-items: center;
         display: flex;
@@ skipping 37 matching lines @@
 
       paper-dropdown-menu .dropdown-item.iron-selected {
         font-weight: bold;
       }
 
       paper-dropdown-menu .dropdown-item:focus {
         background-color: var(--paper-grey-300);
         outline: none;
       }
 
+      iron-dropdown .dropdown-content {
+        background-color: white;
+        box-shadow: 0 2px 6px var(--paper-grey-500);
+      }
+
+      iron-dropdown .dropdown-content > * {

[Dan Beam, 2016/07/09 00:12:05]

i think paper-item is better than "> *" here because:
a) it works even if the <paper-item> is wrapped with another tag, i.e.
<div><paper-item>
b) separators seem fairly likely in the future (and they probably shouldn't be
actionable)

[stevenjb, 2016/07/11 18:00:54]

I thought the plan was to move away from paper-item? I guess we can cross that
bridge when we get there. Changed.

+        @apply(--settings-actionable);
+      }
+
+      iron-dropdown .dropdown-content > :hover {
+        background-color: var(--settings-hover-color);
+      }
+
       span ~ a {
         -webkit-margin-start: 4px;
       }
 
       [is='action-link'],
       [is='action-link']:active,
       [is='action-link']:hover,
       [is='action-link']:visited,
       paper-button.primary-button,
       paper-button.tertiary-button {
@@ skipping 253 matching lines @@
 
       .favicon-image {
         background-repeat: no-repeat;
         background-size: contain;
         height: 16px;
         width: 16px;
       }
     </style>
   </template>
 </dom-module>