Make all Leaf buttons 30px high and give same vertical-align

This commit is contained in:
Henrik Giesel 2021-03-29 23:43:48 +02:00
parent 0269c97b2e
commit 8c931af17c
3 changed files with 13 additions and 9 deletions

View file

@ -8,10 +8,10 @@
<style lang="scss">
button {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
vertical-align: -webkit-baseline-middle;
padding: 0;
}

View file

@ -1,5 +1,5 @@
<script lang="typescript">
export let className: string = '';
export let className: string = "";
export let onClick: (event: ClickEvent) => void;
export let active = false;
export let disabled = false;
@ -8,12 +8,11 @@
<style lang="scss">
button {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
background-color: white;
vertical-align: -webkit-baseline-middle;
& > :global(svg),
& > :global(img) {
@ -26,7 +25,8 @@
background-color: #eee;
}
&:active, &.active {
&:active,
&.active {
box-shadow: inset 0 0 10px 3px rgb(0 0 0 / 30%);
}
@ -37,7 +37,8 @@
background-color: white;
}
&:active, &.active {
&:active,
&.active {
box-shadow: none;
}
}
@ -49,7 +50,6 @@
class:active
{disabled}
on:click={onClick}
on:mousedown|preventDefault
>
on:mousedown|preventDefault>
<slot />
</button>

View file

@ -6,8 +6,12 @@
<style lang="scss">
button {
display: inline-block;
vertical-align: middle;
width: auto;
height: 30px;
padding: 3px 10px;
vertical-align: -0.425em;
margin-right: 3px;
&:focus {