MD WebUI: Move some settings CSS to shared_style_css

ui/webui/resources/cr_elements/shared_style_css.html

Index: ui/webui/resources/cr_elements/shared_style_css.html
diff --git a/ui/webui/resources/cr_elements/shared_style_css.html b/ui/webui/resources/cr_elements/shared_style_css.html
index 1f6cf1a50454d530929e1a586ac3ec515b7f8c2e..e58e61a2e8da2430fce92d82b5023d97edb64749 100644
--- a/ui/webui/resources/cr_elements/shared_style_css.html
+++ b/ui/webui/resources/cr_elements/shared_style_css.html
@@ -1,10 +1,19 @@
 <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;
@@ -27,6 +36,10 @@
       .cancel-button {
         font-weight: 500;
       }
+
+      [actionable] {
+        @apply(--cr-actionable);
+      }
     </style>
   </template>
 </dom-module>