blob: 0172d2784d0caafbde74bbab8b9cca2eb7660596 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Copybara854996b2021-09-07 19:36:02 +00002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {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 */
13export 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}
112customElements.define('chops-button', ChopsButton);