fix(button): prevent clickarea from blocking sibling content

This commit is contained in:
Joren Broekema 2020-03-24 13:28:08 +01:00 committed by Thomas Allmer
parent eadb0fd971
commit 2b2d6b34aa

View file

@ -1,10 +1,10 @@
import { import {
css,
html,
browserDetection, browserDetection,
SlotMixin, css,
DisabledWithTabIndexMixin, DisabledWithTabIndexMixin,
html,
LitElement, LitElement,
SlotMixin,
} from '@lion/core'; } from '@lion/core';
const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */ const isKeyboardClickEvent = e => e.keyCode === 32 /* space */ || e.keyCode === 13; /* enter */
@ -31,6 +31,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
render() { render() {
return html` return html`
<div class="btn"> <div class="btn">
<div class="click-area"></div>
${this._beforeTemplate()} ${this._beforeTemplate()}
${browserDetection.isIE11 ${browserDetection.isIE11
? html` ? html`
@ -41,7 +42,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
`} `}
${this._afterTemplate()} ${this._afterTemplate()}
<slot name="_button"></slot> <slot name="_button"></slot>
<div class="click-area"></div>
</div> </div>
`; `;
} }