ui/webui/resources/cr_elements/paper_button_style_css.html

<link rel="import" href="../html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

<!-- Common paper-button styling for Material Design WebUI. -->
<dom-module id="paper-button-style">
  <template>
    <style>
      paper-button {
        /* Gray color to be used when disabled, either as a background or as a
           text color depending on the type of button. */
        --disabled-color: rgb(241, 243, 244);
        /* Blue-ish color used either as a background or as a text color,
           depending on the type of button. */
        --paper-button-ink-color: var(--google-blue-600);
        --paper-ripple-opacity: .1;
        --text-or-bg-color: var(--google-blue-600);

        border: 1px solid rgb(218, 220, 224);
        border-radius: 4px;
        color: var(--text-or-bg-color);
        flex-shrink: 0;
        font-weight: 500;
        height: 32px;
        margin: 0;
        padding: 8px 16px;
        text-decoration: none;
        text-transform: none;
      }

      /* Override paper-button's default transition. |animated| is automatically
         added to all paper-button instances, unfortunately. */
      paper-button[animated] {
        transition: none;
      }

      paper-button:not([raised]).keyboard-focus,
      paper-button:not([raised]).action-button.keyboard-focus {
        box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4);
        /* Override default paper-button's internal font-weight style. */
        font-weight: 500;
      }

      paper-button:not(.action-button):hover {
        background-color: rgba(var(--google-blue-500-rgb), .04);
        border-color: rgb(210, 227, 252);
      }

      paper-button:not(.action-button):active {
        box-shadow:
            0 1px 2px 0 rgba(var(--google-grey-800-rgb), .3),
            0 3px 6px 2px rgba(var(--google-grey-800-rgb), .15);
      }

      paper-button.action-button:hover {
        background-color: rgba(var(--google-blue-600-rgb), .9);
        box-shadow:
            0 1px 2px 0 rgba(var(--google-blue-500-rgb), .3),
            0 1px 3px 1px rgba(var(--google-blue-500-rgb), .15);
      }

      paper-button.action-button:active {
        box-shadow:
            0 1px 2px 0 rgba(var(--google-blue-500-rgb), .3),
            0 3px 6px 2px rgba(var(--google-blue-500-rgb), .15);
      }

      paper-button:not([raised]).action-button {
        --paper-ripple-opacity: .32;
        --paper-button-ink-color: white;
        background-color: var(--text-or-bg-color);
        border: none;
        color: white;
      }

      paper-button:not([raised])[disabled] {
        background-color: white;
        border-color: var(--disabled-color);
        color: rgb(128, 134, 139);
      }

      paper-button.action-button[disabled] {
        background-color: var(--disabled-color);
        border-color: transparent;
      }

      /* cancel-button is meant to be used within a cr-dialog */
      paper-button.cancel-button {
        margin-inline-end: 8px;
      }

      paper-button.action-button,
      paper-button.cancel-button {
        line-height: 154%;
      }
    </style>
  </template>
</dom-module>