blob: 01857df75074856c504fa068ba5589a45d5da459 [file] [log] [blame]
// Copyright 2019 The Chromium Authors
// 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-snackbar>`
*
* A container for showing messages in a snackbar.
*
*/
export class ChopsSnackbar extends LitElement {
/** @override */
static get styles() {
return css`
:host {
align-items: center;
background-color: #333;
border-radius: 6px;
bottom: 1em;
left: 1em;
color: hsla(0, 0%, 100%, .87);
display: flex;
font-size: var(--chops-large-font-size);
padding: 16px;
position: fixed;
z-index: 1000;
}
button {
background: none;
border: none;
color: inherit;
cursor: pointer;
margin: 0;
margin-left: 8px;
padding: 0;
}
`;
}
/** @override */
render() {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<slot></slot>
<button @click=${this.close}>
<i class="material-icons">close</i>
</button>
`;
}
/**
* Closes the snackbar.
* @fires CustomEvent#close
*/
close() {
this.dispatchEvent(new CustomEvent('close'));
}
}
customElements.define('chops-snackbar', ChopsSnackbar);