shared_style_css.html

<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">

<!-- Common styles for Material Design WebUI. Included directly in
  settings_shared_css.html. -->
<dom-module id="cr-shared-style">
  <template>
    <style>
      /* Chrome spinners should be blue. */
      paper-spinner {
        --paper-spinner-layer-1-color: var(--google-blue-500);
        --paper-spinner-layer-2-color: var(--google-blue-500);
        --paper-spinner-layer-3-color: var(--google-blue-500);
        --paper-spinner-layer-4-color: var(--google-blue-500);
      }

      .action-button {
        background: var(--google-blue-500);
        color: white;
        --paper-button-flat-keyboard-focus: {
          background: 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: rgba(0, 0, 0, .12);
        };
      }

      .action-button,
      .cancel-button {
        font-weight: 500;
      }

      [actionable] {
        @apply(--cr-actionable);
      }

      [scrollable] {
        border-color: transparent;
        border-style: solid;
        border-width: 1px 0;
        overflow-y: auto;
      }
      [scrollable].is-scrolled {
        border-top-color: var(--google-grey-300);
      }
      [scrollable].can-scroll:not(.scrolled-to-bottom) {
        border-bottom-color: var(--google-grey-300);
      }
      [scrollable] :focus {
        @apply(--cr-list-item-focus);
        @apply(--cr-selectable-focus);
      }
      [scrollable] iron-list > * {
        @apply(--cr-actionable);
      }

      [selectable] :focus {
        @apply(--cr-selectable-focus);
      }
      [selectable] > * {
        @apply(--cr-actionable);
      }
    </style>
  </template>
</dom-module>