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"> <style lang="scss">
button { button {
display: inline-block; display: inline-block;
vertical-align: middle;
width: 30px; width: 30px;
height: 30px; height: 30px;
vertical-align: -webkit-baseline-middle;
padding: 0; padding: 0;
} }

View file

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

View file

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