MD Settings: create a global "action button" style (blue, flat)

chrome/browser/resources/settings/settings_shared_css.html

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /**
  * @fileoverview
  * Common styles for Material Design settings.
  */
 
 <dom-module id="settings-shared">
@@ skipping 22 matching lines @@
 
       iron-icon[icon=done] {
         color: var(--google-green-500);
       }
 
       paper-button {
         margin: 0;
         min-width: auto;
       }
 
+      paper-button.call-to-action {

[dpapad, 2016/03/01 02:18:03]

Can we keep the "action-button" name? Seems much more intuitive than the
proposed naming
1) makes it clear that it refers to a button.
2) Sounds like a CSS class name (unlike new naming which without context I would
have never guessed it is a CSS class name)

[Dan Beam, 2016/03/01 17:44:04]

Done. (though for future reference, I don't agree with either of your points I
just don't care -- <button> is also a tag [which this is not], there was already
a "paper-button" in the selector so you know it only affects those things, and
there's no "sounds like a class name" unless you mean presentational -- which is
a bad idea. with these ideas combined we end up with bad class names like
.red-div which are brittle and too specific.  I also thought about .important or
.recommended [which is what Alan said these buttons are in some cases, like
"Sign in"], but it didn't always match)

[dpapad, 2016/03/01 17:56:11]

For future reference, I think is better if we discuss about things we don't
agree about, instead of doing them and then adding a huge "I don't agree with
this." note. I have found myself doing the same in previous CLs, and I don't
think it is helping us in the long run.

Regarding the "-button" suffix, I am fine with just "action" as the CSS class
name, dropping the suffix completely. call-for-action sounded weird to me (and
still does), but because we never had the discussion (the one I am referring in
previous paragraph) I was never exposed to your thinking of choosing that name.

+        background: var(--google-blue-500);
+        color: white;
+        font-weight: 500;
+      }
+
+      paper-button.call-to-action[disabled] {
+        opacity: .25;  /* TODO(dbeam): check this value with bettes. */
+      }
+
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
 
       span ~ a {
         -webkit-margin-start: 4px;
       }
 
       [is='action-link'],
       [is='action-link']:active,
@@ skipping 180 matching lines @@
       .vertical-list > div:first-of-type {
         border-top: none;
       }
 
       .vertical-list > div {
         border-top: 1px solid var(--paper-grey-300);
       }
     </style>
   </template>
 </dom-module>