| <link rel="import" href="../../html/polymer.html"> |
| |
| <link rel="import" href="../../html/cr/ui/focus_outline_manager.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-ripple-behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="../hidden_style_css.html"> |
| <link rel="import" href="../shared_vars_css.html"> |
| |
| <dom-module id="cr-button"> |
| <template> |
| <style include="cr-hidden-style"> |
| :host { |
| --active-shadow-rgb: var(--google-grey-800-rgb); |
| --active-shadow-action-rgb: var(--google-blue-500-rgb); |
| --bg-action: var(--google-blue-600); |
| --border-color: var(--google-grey-300); |
| --disabled-bg-action: var(--google-grey-100); |
| --disabled-bg: white; |
| --disabled-border-color: var(--google-grey-100); |
| --disabled-text-color: var(--google-grey-600); |
| --focus-shadow-color: rgba(var(--google-blue-600-rgb), .4); |
| --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-100); |
| --hover-shadow-action-rgb: var(--google-blue-500-rgb); |
| --ink-color-action: white; |
| /* Blue-ish color used either as a background or as a text color, |
| * depending on the type of button. */ |
| --ink-color: var(--google-blue-600); |
| --ripple-opacity-action: .32; |
| --ripple-opacity: .1; |
| --text-color-action: white; |
| --text-color: var(--google-blue-600); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| :host { |
| /* Only in dark. */ |
| --active-bg: black linear-gradient(rgba(255, 255, 255, .06), |
| rgba(255, 255, 255, .06)); |
| --active-shadow-rgb: 0, 0, 0; |
| --active-shadow-action-rgb: var(--google-blue-500-rgb); |
| --bg-action: var(--google-blue-300); |
| --border-color: var(--google-grey-700); |
| --disabled-bg-action: var(--google-grey-800); |
| /* TODO(dbeam): get --disabled-bg from Namrata. */ |
| --disabled-bg: transparent; |
| --disabled-border-color: var(--google-grey-800); |
| --disabled-text-color: var(--google-grey-500); |
| --focus-shadow-color: rgba(var(--google-blue-300-rgb), .5); |
| --hover-bg-action: var(--bg-action) |
| linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); |
| --hover-bg-color: rgba(var(--google-blue-300-rgb), .08); |
| --ink-color-action: black; |
| --ink-color: var(--google-blue-300); |
| --ripple-opacity-action: .16; |
| --ripple-opacity: .16; |
| --text-color-action: var(--google-grey-900); |
| --text-color: var(--google-blue-300); |
| } |
| } |
| |
| :host { |
| --paper-ripple-opacity: var(--ripple-opacity); |
| -webkit-tap-highlight-color: transparent; |
| align-items: center; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| box-sizing: border-box; |
| color: var(--text-color); |
| cursor: pointer; |
| display: inline-flex; |
| flex-shrink: 0; |
| font-weight: 500; |
| height: var(--cr-button-height); |
| justify-content: center; |
| min-width: 5.14em; |
| outline-width: 0; |
| overflow: hidden; |
| padding: 8px 16px; |
| position: relative; |
| user-select: none; |
| } |
| |
| :host-context(.focus-outline-visible):host(:focus) { |
| box-shadow: 0 0 0 2px var(--focus-shadow-color); |
| } |
| |
| :host(:active) { |
| background: var(--active-bg); |
| box-shadow: var(--active-shadow, |
| 0 1px 2px 0 rgba(var(--active-shadow-rgb), .3), |
| 0 3px 6px 2px rgba(var(--active-shadow-rgb), .15)); |
| } |
| |
| :host(:hover) { |
| background-color: var(--hover-bg-color); |
| } |
| |
| @media (prefers-color-scheme: light) { |
| :host(:hover) { |
| border-color: var(--hover-border-color); |
| } |
| } |
| |
| :host(.action-button) { |
| --ink-color: var(--ink-color-action); |
| --paper-ripple-opacity: var(--ripple-opacity-action); |
| background-color: var(--bg-action); |
| border: none; |
| color: var(--text-color-action); |
| } |
| |
| :host(.action-button:active) { |
| box-shadow: var(--active-shadow-action, |
| 0 1px 2px 0 rgba(var(--active-shadow-action-rgb), .3), |
| 0 3px 6px 2px rgba(var(--active-shadow-action-rgb), .15)); |
| } |
| |
| :host(.action-button:hover) { |
| background: var(--hover-bg-action); |
| } |
| |
| @media (prefers-color-scheme: light) { |
| :host(.action-button:not(:active):hover) { |
| box-shadow: |
| 0 1px 2px 0 rgba(var(--hover-shadow-action-rgb), .3), |
| 0 1px 3px 1px rgba(var(--hover-shadow-action-rgb), .15); |
| } |
| } |
| |
| :host([disabled]) { |
| background-color: var(--disabled-bg); |
| border-color: var(--disabled-border-color); |
| color: var(--disabled-text-color); |
| cursor: auto; |
| pointer-events: none; |
| } |
| |
| :host(.action-button[disabled]) { |
| background-color: var(--disabled-bg-action); |
| border-color: transparent; |
| } |
| |
| /* cancel-button is meant to be used within a cr-dialog */ |
| :host(.cancel-button) { |
| margin-inline-end: 8px; |
| } |
| |
| :host(.action-button), |
| :host(.cancel-button) { |
| line-height: 154%; |
| } |
| |
| paper-ripple { |
| color: var(--ink-color); |
| height: var(--paper-ripple-height); |
| /* Fallback to 0 to match the values in paper-ripple.html. Falls back |
| * to null without this. */ |
| left: var(--paper-ripple-left, 0); |
| top: var(--paper-ripple-top, 0); |
| width: var(--paper-ripple-width); |
| } |
| </style> |
| <slot></slot> |
| </template> |
| <script src="cr_button.js"></script> |
| </dom-module> |
