51 lines
1.0 KiB
JavaScript
51 lines
1.0 KiB
JavaScript
import { LitElement, html, css, unsafeCSS } from 'lit'
|
|
|
|
import './SvgIcon.js'
|
|
|
|
import MainCSS from '../assets/styles/main.scss?inline'
|
|
|
|
class Button extends LitElement {
|
|
static properties = {}
|
|
|
|
constructor() {
|
|
super()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<button>
|
|
<mm-icon name="back-arrow"></mm-icon>
|
|
<span><slot></slot></span>
|
|
</button>
|
|
`
|
|
}
|
|
|
|
static styles = [ css`${unsafeCSS(MainCSS)}`, css`
|
|
:host {
|
|
--primary-color: currentcolor;
|
|
--background-color: lightgrey;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
padding-block: 0.75em;
|
|
padding-inline-start: 1em;
|
|
padding-inline-end: 1.25em;
|
|
border-radius: 0.25em;
|
|
color: var(--primary-color);
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
span {
|
|
text-transform: capitalize;
|
|
font-weight: 500;
|
|
font-size: 1.1em;
|
|
}
|
|
` ]
|
|
}
|
|
|
|
customElements.define('mm-button', Button)
|