Add border marker
parent
e1679d94c8
commit
0b684bc42e
@ -0,0 +1,44 @@
|
||||
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)
|
Loading…
Reference in New Issue