| 1 | import { css, customElement, html, LitElement } from 'lit-element'
|
| 2 |
|
| 3 | @customElement('info-button')
|
| 4 | export class InfoButtonTemplate extends LitElement {
|
| 5 | static get styles() {
|
| 6 | return css`
|
| 7 | .asset-action-info {
|
| 8 | cursor: pointer;
|
| 9 | transition: 200ms;
|
| 10 | opacity: 0.4;
|
| 11 | backface-visibility: hidden;
|
| 12 | }
|
| 13 | .asset-action-info #info-icon:hover {
|
| 14 | opacity: 1;
|
| 15 | }
|
| 16 | `
|
| 17 | }
|
| 18 |
|
| 19 | public render() {
|
| 20 | return html`
|
| 21 | <div class="asset-action-info">
|
| 22 | <svg
|
| 23 | id="info-btn"
|
| 24 | @click="${(_e: any) =>
|
| 25 | this.dispatchEvent(new CustomEvent('flip-event'))}"
|
| 26 | xmlns="http://www.w3.org/2000/svg"
|
| 27 | width="24"
|
| 28 | height="24"
|
| 29 | viewBox="0 0 24 24"
|
| 30 | >
|
| 31 | <path d="M0 0h24v24H0z" fill="transparent" />
|
| 32 | <path
|
| 33 | id="info-icon"
|
| 34 | fill="rgb(82, 87, 89)"
|
| 35 | d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
|
| 36 | />
|
| 37 | </svg>
|
| 38 | </div>
|
| 39 | `
|
| 40 | }
|
| 41 | }
|