60 lines
1.3 KiB
Plaintext
60 lines
1.3 KiB
Plaintext
<template id="tesoft-input-template">
|
|
<style>
|
|
@import "/src/styles/default.css";
|
|
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
:host > div {
|
|
background-color: var(--gray);
|
|
border-color: var(--dark-gray);
|
|
border-radius: 0.4rem;
|
|
border-style: solid;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto;
|
|
}
|
|
|
|
:host([focused]) > div {
|
|
outline-color: var(--gold);
|
|
outline-style: solid;
|
|
}
|
|
|
|
input {
|
|
background-color: transparent;
|
|
border-style: none;
|
|
color: var(--light-gray);
|
|
grid-column: 2;
|
|
padding: var(--medium-padding);
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
slot {
|
|
align-content: center;
|
|
display: grid;
|
|
justify-content: center;
|
|
padding: var(--small-padding);
|
|
}
|
|
|
|
::slotted(svg) {
|
|
fill: var(--dark-gray);
|
|
}
|
|
|
|
:host([focused]) ::slotted(svg) {
|
|
fill: var(--gold);
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<slot name="left"></slot>
|
|
<input>
|
|
<slot name="right"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="/src/components/input.ts" type="module"></script>
|