MD WebUI: Move some settings CSS to shared_style_css

ui/webui/resources/cr_elements/shared_style_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <!-- Common styles for Material Design WebUI. Included directly in
-  settings_shared_css.html. -->
+  settings_root_css.html. This should be kept lightweight, or we shoud
+  separate the :root section into shared_root_css.html. -->
 <dom-module id="cr-shared-style">
   <template>
     <style>
+      :root {
+        --cr-actionable: {
+          cursor: pointer;
+        };
+        --cr-focused-item-color: var(--google-grey-300);
+        --cr-separator-line: 1px solid rgba(0, 0, 0, 0.06);
+      }

[dschuyler, 2016/07/21 00:04:48]

Suggestion: the :root only needs to be included
once to affect the whole app/page. Please consider
making a shared_root_css.html (or similar) to hold
the :root variable definitions.

[michaelpg, 2016/07/21 04:26:51]

I think the comment added on line 4 is reasonable, though. It's not obvious
whether it's slower to import an additional file just for three variables, or to
include a small :root rule in all of our custom style instances when it only
needs to be in one. I'd *guess* there's very little difference, in which case as
long as this rule and the whole file stay small, this seems simpler.

+
       .action-button {
         background: var(--google-blue-500);
         color: white;
         --paper-button-flat-keyboard-focus: {
           background-color: rgb(58, 117, 215);  /* 88% of --google-blue-500 */
         };
       }
 
       .action-button[disabled] {
         opacity: .25;  /* TODO(dbeam): check this value with bettes. */
       }
 
       .cancel-button {
         --paper-button-flat-keyboard-focus: {
           background-color: rgba(0, 0, 0, .12);
         };
       }
 
       .action-button,
       .cancel-button {
         font-weight: 500;
       }
+
+      [actionable] {
+        @apply(--cr-actionable);
+      }
     </style>
   </template>
 </dom-module>