| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.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: 0.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 { |
| /* Google Blue 900 with 40% opacity. */ |
| box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4); |
| /* Override default paper-button's internal font-weight style. */ |
| font-weight: 500; |
| } |
| |
| paper-button:not(.action-button):hover { |
| background-color: rgba(66, 133, 244, 0.04); |
| border-color: rgb(210, 227, 252); |
| } |
| |
| paper-button:not(.action-button):active { |
| /* google-grey-800 with opacity */ |
| box-shadow: |
| 0 1px 2px 0 rgba(60, 64, 67, 0.30), |
| 0 3px 6px 2px rgba(60, 64, 67, 0.15); |
| } |
| |
| paper-button.action-button:hover { |
| /* google-blue-600 with opacity. */ |
| background-color: rgba(26, 115, 232, 0.9); |
| box-shadow: |
| 0 1px 2px 0 var(--google-blue-500-opacity-30), |
| 0 1px 3px 1px var(--google-blue-500-opacity-15); |
| } |
| |
| paper-button.action-button:active { |
| box-shadow: |
| 0 1px 2px 0 var(--google-blue-500-opacity-30), |
| 0 3px 6px 2px var(--google-blue-500-opacity-15); |
| } |
| |
| paper-button:not([raised]).action-button { |
| --paper-ripple-opacity: 0.32; |
| --paper-button-ink-color: white; |
| --google-blue-500-opacity-30: rgba(66, 133, 244, 0.3); |
| --google-blue-500-opacity-15: rgba(66, 133, 244, 0.15); |
| 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 { |
| -webkit-margin-end: 8px; |
| } |
| |
| paper-button.action-button, |
| paper-button.cancel-button { |
| line-height: 154%; |
| } |
| </style> |
| </template> |
| </dom-module> |