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 paper-item:hover {

[dpapad, 2016/07/08 21:01:29]

Do we want to preserve the hover effect? In dropdown lists we only have focus
effect, but not hover (see
https://chromium.googlesource.com/chromium/src/+/4d8e2d9c3a4e495f4df013cad9ab...).

Also could we get rid of paper-items inside iron-dropdown lists, in favor of
divs with a dropdown-item CSS class (see lines 40-56 above). Perhaps that is
better suited as a separate cleanup. 

[stevenjb, 2016/07/08 21:03:53]

I'd prefer to make both changes in a separate cleanup. In particular, the the
focus only effect would, imho, be particularly bad for iron-dropdown.

+        @apply(--settings-actionable);

[Dan Beam, 2016/07/08 23:08:08]

I probably would've done this:

iron-dropdown .dropdown-content paper-item {
  @apply(--settings-actionable);
}

instead of only on :hover, but I suppose this works while --settings-actionable
only has cursor: pointer;

[stevenjb, 2016/07/08 23:50:05]

Oh, yeah, that's actually what I had in my head. I will fix this and also use >
* instead of paper-item so this will work when we use div instead.
 

+        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>