| Copybara | 854996b | 2021-09-07 19:36:02 +0000 | [diff] [blame] | 1 | // Copyright 2019 The Chromium Authors. All rights reserved. |
| 2 | // Use of this source code is governed by a BSD-style license that can be |
| 3 | // found in the LICENSE file. |
| 4 | |
| 5 | import {LitElement, html, css} from 'lit-element'; |
| 6 | |
| 7 | /** |
| 8 | * `<chops-button>` displays a styled button component with a few niceties. |
| 9 | * |
| 10 | * @customElement chops-button |
| 11 | * @demo /demo/chops-button_demo.html |
| 12 | */ |
| 13 | export class ChopsButton extends LitElement { |
| 14 | /** @override */ |
| 15 | static get styles() { |
| 16 | return css` |
| 17 | :host { |
| 18 | --chops-button-padding: 0.5em 16px; |
| 19 | background: hsla(0, 0%, 95%, 1); |
| 20 | margin: 0.25em 4px; |
| 21 | cursor: pointer; |
| 22 | border-radius: 3px; |
| 23 | text-align: center; |
| 24 | display: inline-flex; |
| 25 | align-items: center; |
| 26 | justify-content: center; |
| 27 | user-select: none; |
| 28 | transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out; |
| 29 | font-family: var(--chops-font-family); |
| 30 | } |
| 31 | :host([hidden]) { |
| 32 | display: none; |
| 33 | } |
| 34 | :host([raised]) { |
| 35 | box-shadow: 0px 2px 8px -1px hsla(0, 0%, 0%, 0.5); |
| 36 | } |
| 37 | :host(:hover) { |
| 38 | filter: brightness(95%); |
| 39 | } |
| 40 | :host(:active) { |
| 41 | filter: brightness(115%); |
| 42 | } |
| 43 | :host([raised]:active) { |
| 44 | box-shadow: 0px 1px 8px -1px hsla(0, 0%, 0%, 0.5); |
| 45 | } |
| 46 | :host([disabled]), |
| 47 | :host([disabled]:hover) { |
| 48 | filter: grayscale(30%); |
| 49 | opacity: 0.4; |
| 50 | background: hsla(0, 0%, 87%, 1); |
| 51 | cursor: default; |
| 52 | pointer-events: none; |
| 53 | box-shadow: none; |
| 54 | } |
| 55 | button { |
| 56 | background: none; |
| 57 | width: 100%; |
| 58 | height: 100%; |
| 59 | border: 0; |
| 60 | padding: var(--chops-button-padding); |
| 61 | margin: 0; |
| 62 | color: inherit; |
| 63 | cursor: inherit; |
| 64 | text-align: center; |
| 65 | font-family: inherit; |
| 66 | text-align: inherit; |
| 67 | font-weight: inherit; |
| 68 | font-size: inherit; |
| 69 | line-height: inherit; |
| 70 | border-radius: inherit; |
| 71 | display: flex; |
| 72 | align-items: center; |
| 73 | justify-content: center; |
| 74 | } |
| 75 | `; |
| 76 | } |
| 77 | |
| 78 | /** @override */ |
| 79 | render() { |
| 80 | return html` |
| 81 | <button ?disabled=${this.disabled}> |
| 82 | <slot></slot> |
| 83 | </button> |
| 84 | `; |
| 85 | } |
| 86 | |
| 87 | /** @override */ |
| 88 | static get properties() { |
| 89 | return { |
| 90 | /** Whether the button is available for input or not. */ |
| 91 | disabled: { |
| 92 | type: Boolean, |
| 93 | reflect: true, |
| 94 | }, |
| 95 | /** Whether the button should have a shadow or not. */ |
| 96 | raised: { |
| 97 | type: Boolean, |
| 98 | value: false, |
| 99 | reflect: true, |
| 100 | }, |
| 101 | }; |
| 102 | } |
| 103 | |
| 104 | /** @override */ |
| 105 | constructor() { |
| 106 | super(); |
| 107 | |
| 108 | this.disabled = false; |
| 109 | this.raised = false; |
| 110 | } |
| 111 | } |
| 112 | customElements.define('chops-button', ChopsButton); |