45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
class RSVPPipeMarker extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
const shadow = this.attachShadow({ mode: 'open' })
|
|
shadow.innerHTML = `
|
|
<style>
|
|
:host {display: block}
|
|
.marker { text-align: center }
|
|
</style>
|
|
<div class="marker">|</div>
|
|
<slot></slot>
|
|
<div class="marker">|</div>
|
|
`
|
|
}
|
|
}
|
|
|
|
class RSVPBorderMarker extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
const shadow = this.attachShadow({ mode: 'open' })
|
|
shadow.innerHTML = `
|
|
<style>
|
|
:host {display: block; margin: 5px 0;}
|
|
.top, .bottom { display: flex;}
|
|
.a {flex:1} .b {flex:1}
|
|
.bottom { align-items: flex-end; }
|
|
.side { background-color: black; height: 2px;}
|
|
|
|
.center { background-color: black; height: 6px; width: 2px}
|
|
</style>
|
|
<div class="top">
|
|
<div class="side a"></div><div class="center"></div><div class="side b"></div>
|
|
</div>
|
|
<slot></slot>
|
|
<div class="bottom">
|
|
<div class="side a"></div><div class="center"></div><div class="side b"></div>
|
|
</div>
|
|
<div class="marker"></div>
|
|
`
|
|
}
|
|
}
|
|
|
|
window.customElements.define('rsvp-pipe-marker', RSVPPipeMarker)
|
|
window.customElements.define('rsvp-border-marker', RSVPBorderMarker)
|