Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/chops/chops-button/chops-button.js b/static_src/elements/chops/chops-button/chops-button.js
new file mode 100644
index 0000000..2139e22
--- /dev/null
+++ b/static_src/elements/chops/chops-button/chops-button.js
@@ -0,0 +1,112 @@
+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+
+/**
+ * `<chops-button>` displays a styled button component with a few niceties.
+ *
+ * @customElement chops-button
+ * @demo /demo/chops-button_demo.html
+ */
+export class ChopsButton extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ --chops-button-padding: 0.5em 16px;
+ background: hsla(0, 0%, 95%, 1);
+ margin: 0.25em 4px;
+ cursor: pointer;
+ border-radius: 3px;
+ text-align: center;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ user-select: none;
+ transition: filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+ font-family: var(--chops-font-family);
+ }
+ :host([hidden]) {
+ display: none;
+ }
+ :host([raised]) {
+ box-shadow: 0px 2px 8px -1px hsla(0, 0%, 0%, 0.5);
+ }
+ :host(:hover) {
+ filter: brightness(95%);
+ }
+ :host(:active) {
+ filter: brightness(115%);
+ }
+ :host([raised]:active) {
+ box-shadow: 0px 1px 8px -1px hsla(0, 0%, 0%, 0.5);
+ }
+ :host([disabled]),
+ :host([disabled]:hover) {
+ filter: grayscale(30%);
+ opacity: 0.4;
+ background: hsla(0, 0%, 87%, 1);
+ cursor: default;
+ pointer-events: none;
+ box-shadow: none;
+ }
+ button {
+ background: none;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ padding: var(--chops-button-padding);
+ margin: 0;
+ color: inherit;
+ cursor: inherit;
+ text-align: center;
+ font-family: inherit;
+ text-align: inherit;
+ font-weight: inherit;
+ font-size: inherit;
+ line-height: inherit;
+ border-radius: inherit;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <button ?disabled=${this.disabled}>
+ <slot></slot>
+ </button>
+ `;
+ }
+
+ /** @override */
+ static get properties() {
+ return {
+ /** Whether the button is available for input or not. */
+ disabled: {
+ type: Boolean,
+ reflect: true,
+ },
+ /** Whether the button should have a shadow or not. */
+ raised: {
+ type: Boolean,
+ value: false,
+ reflect: true,
+ },
+ };
+ }
+
+ /** @override */
+ constructor() {
+ super();
+
+ this.disabled = false;
+ this.raised = false;
+ }
+}
+customElements.define('chops-button', ChopsButton);