94 lines
No EOL
1.8 KiB
Svelte
94 lines
No EOL
1.8 KiB
Svelte
<script lang="ts">
|
|
export let height: string|number = 50;
|
|
export let width: string|number = "unset";
|
|
export let handler: (e: Event) => unknown;
|
|
|
|
// Add the units to the height value if not provided, and ensure that the
|
|
// provided height is not less than 50 (the default)
|
|
$: if (typeof(height) == "string") {
|
|
if (height.match(/[0-9]$/)) {
|
|
if (height.match(/^[0-4]?[0-9]$/)) {
|
|
height = `50`;
|
|
};
|
|
height = `${height}px`;
|
|
};
|
|
} else {
|
|
if (height < 50) {
|
|
height = 50;
|
|
};
|
|
height = `${height}px`;
|
|
};
|
|
|
|
|
|
// Add the units to the width value if not provided
|
|
$: if (typeof(width) == "string") {
|
|
if (width.match(/[0-9]$/)) {
|
|
width = `${width}px`;
|
|
};
|
|
} else {
|
|
width = `${width}px`;
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
style="--height: {height}; --width: {width};"
|
|
class="button-container"
|
|
>
|
|
<button on:click={handler}>
|
|
<slot></slot>
|
|
</button>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div.button-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin: 10px;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
}
|
|
|
|
$button-background: #0a0;
|
|
|
|
button {
|
|
background: $button-background;
|
|
border-radius: 5px;
|
|
border: 3px solid $button-background;
|
|
box-sizing: border-box;
|
|
font-family: 'Orbitron', sans-serif;
|
|
height: calc(100% - 20px);
|
|
margin: 10px;
|
|
padding: 5px 7px;
|
|
transition: all .5s ease;
|
|
transition: opacity .2s ease;
|
|
width: calc(100% - 20px);
|
|
|
|
&:active {
|
|
opacity: .2;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
border-radius: 20px;
|
|
color: white;
|
|
|
|
&:before {
|
|
border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
|
|
border: 2px $button-background solid;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
content: ' ';
|
|
border: 2px transparent solid;
|
|
position: absolute;
|
|
left: 5px;
|
|
top: 5px;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 10px);
|
|
height: calc(calc(100% - 20px) + 10px);
|
|
transition: all .7s ease;
|
|
}
|
|
}
|
|
</style> |