| <link rel="import" href="../html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="shared_vars_css.html"> |
| |
| <!-- Common paper-button styling for Material Design WebUI. --> |
| <dom-module id="paper-button-style"> |
| <template> |
| <style> |
| paper-button { |
| --active-shadow-rgb: var(--google-grey-800-rgb); |
| --active-shadow-action-rgb: var(--google-blue-500-rgb); |
| |
| --border-color: var(--google-grey-refresh-300); |
| |
| --disabled-color: var(--google-grey-refresh-100); |
| --disabled-text-color: var(--google-grey-600); |
| |
| --flat-bg-action: var(--google-blue-600); |
| --flat-disabled-bg: white; |
| --flat-disabled-border-color: var(--google-grey-refresh-100); |
| --flat-focus-shadow-color: rgba(var(--google-blue-600-rgb), .4); |
| --flat-ink-color-action: white; |
| --flat-ripple-opacity-action: .32; |
| --flat-text-color-action: white; |
| |
| --hover-bg-action: rgba(var(--google-blue-600-rgb), .9); |
| --hover-bg-color: rgba(var(--google-blue-500-rgb), .04); |
| --hover-border-color: var(--google-blue-refresh-100); |
| --hover-shadow-action-rgb: var(--google-blue-500-rgb); |
| |
| /* 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); |
| |
| --ripple-opacity: .1; |
| |
| --text-color: var(--google-blue-600); |
| } |
| |
| [dark] paper-button, |
| :host-context([dark]) paper-button { |
| /* Only in dark. */ |
| --active-bg: black linear-gradient(rgba(255, 255, 255, .06), |
| rgba(255, 255, 255, .06)); |
| --active-shadow-rgb: var(--google-blue-refresh-500-rgb); |
| /* --active-shadow-action-rgb is same as light mode (GB 500). */ |
| |
| --border-color: var(--google-grey-refresh-700); |
| |
| --disabled-color: var(--google-grey-800); |
| /* --disabled-text-color is same as light mode (GG 600). */ |
| |
| --flat-bg-action: var(--google-blue-refresh-300); |
| /* TODO(dbeam): get --flat-disabled-bg from Namrata. */ |
| --flat-disabled-bg: transparent; |
| --flat-disabled-border-color: var(--google-grey-800); |
| --flat-focus-shadow-color: rgba(var(--google-blue-refresh-300-rgb), .5); |
| --flat-ink-color-action: black; |
| --flat-ripple-opacity-action: .16; |
| --flat-text-color-action: var(--google-grey-900); |
| |
| --hover-bg-action: var(--flat-bg-action) |
| linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); |
| --hover-bg-color: rgba(var(--google-blue-refresh-300-rgb), .08); |
| /* No change in secondary background or border color on hover |
| * (--hover-border-color, --hover-shadow-action-rgb) in dark mode. */ |
| |
| --paper-button-ink-color: var(--google-blue-refresh-300); |
| |
| --ripple-opacity: .16; |
| |
| --text-color: var(--google-blue-refresh-300); |
| } |
| |
| paper-button { |
| --paper-ripple-opacity: var(--ripple-opacity); |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| color: var(--text-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 var(--flat-focus-shadow-color); |
| /* Override default paper-button's internal font-weight style. */ |
| font-weight: 500; |
| } |
| |
| paper-button:not(.action-button):hover { |
| background-color: var(--hover-bg-color); |
| border-color: var(--hover-border-color); |
| } |
| |
| paper-button:not(.action-button):active { |
| background: var(--active-bg); |
| box-shadow: |
| 0 1px 2px 0 rgba(var(--active-shadow-rgb), .3), |
| 0 2px 6px 2px rgba(var(--active-shadow-rgb), .15); |
| } |
| |
| paper-button:not([raised]).action-button:hover { |
| background: var(--hover-bg-action); |
| box-shadow: |
| 0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3), |
| 0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15); |
| } |
| |
| paper-button.action-button:active { |
| box-shadow: |
| 0 1px 2px 0 rgba(var(--active-shadow-action-rgb), .3), |
| 0 2px 6px 2px rgba(var(--active-shadow-action-rgb), .15); |
| } |
| |
| paper-button:not([raised]).action-button { |
| --paper-button-ink-color: var(--flat-ink-color-action); |
| --paper-ripple-opacity: var(--flat-ripple-opacity-action); |
| background-color: var(--flat-bg-action); |
| border: none; |
| color: var(--flat-text-color-action); |
| } |
| |
| paper-button:not([raised])[disabled] { |
| background-color: var(--flat-disabled-bg); |
| border-color: var(--flat-disabled-border-color); |
| color: var(--disabled-text-color); |
| } |
| |
| paper-button.action-button[disabled] { |
| background-color: var(--disabled-color); |
| border-color: transparent; |
| color: var(--disabled-text-color); |
| } |
| |
| /* 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> |