style: add text to iconbuttons
This commit is contained in:
parent
e29cfa4005
commit
279f8f85e3
2 changed files with 25 additions and 4 deletions
|
@ -50,7 +50,9 @@
|
||||||
name="pencil"
|
name="pencil"
|
||||||
on:click={() => (editable = !editable)}
|
on:click={() => (editable = !editable)}
|
||||||
active={editable}
|
active={editable}
|
||||||
/>
|
>
|
||||||
|
Edit
|
||||||
|
</IconButton>
|
||||||
<IconButton
|
<IconButton
|
||||||
name={detail ? "zoom-out" : "zoom-in"}
|
name={detail ? "zoom-out" : "zoom-in"}
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
|
@ -58,13 +60,19 @@
|
||||||
detailChanged = true;
|
detailChanged = true;
|
||||||
}}
|
}}
|
||||||
active={detail}
|
active={detail}
|
||||||
/>
|
>
|
||||||
<IconButton name="link" on:click={() => visit()} disabled={only} />
|
Detail
|
||||||
|
</IconButton>
|
||||||
|
<IconButton name="link" on:click={() => visit()} disabled={only}>
|
||||||
|
Link
|
||||||
|
</IconButton>
|
||||||
<IconButton
|
<IconButton
|
||||||
name="x-circle"
|
name="x-circle"
|
||||||
on:click={() => dispatch("close")}
|
on:click={() => dispatch("close")}
|
||||||
disabled={only}
|
disabled={only}
|
||||||
/>
|
>
|
||||||
|
Close
|
||||||
|
</IconButton>
|
||||||
</header>
|
</header>
|
||||||
<Inspect
|
<Inspect
|
||||||
{address}
|
{address}
|
||||||
|
|
|
@ -9,10 +9,17 @@
|
||||||
|
|
||||||
<button on:click class:active {disabled} {title}>
|
<button on:click class:active {disabled} {title}>
|
||||||
<Icon {name} />
|
<Icon {name} />
|
||||||
|
<div class="text">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
button {
|
button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -35,4 +42,10 @@
|
||||||
color: gray;
|
color: gray;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 0.66em;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 0.2em;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue