110 lines
No EOL
2.2 KiB
Svelte
110 lines
No EOL
2.2 KiB
Svelte
<script lang="ts">
|
|
export let height: string|number = "50px";
|
|
export let width: string|number = "unset";
|
|
export let background: string = "#00aa00";
|
|
export let hoverBackground: string = "transparent";
|
|
export let classes: string = "";
|
|
export let title: string = "";
|
|
|
|
|
|
// 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};
|
|
--background-colour: {background};
|
|
--hover-background-colour: {hoverBackground};"
|
|
class="button-container {classes}"
|
|
>
|
|
<button
|
|
class="clickable"
|
|
{title}
|
|
on:click|trusted|stopPropagation
|
|
>
|
|
<slot></slot>
|
|
</button>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div.button-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
}
|
|
|
|
$button-background: var(--background-colour);
|
|
$hover-background: var(--hover-background-colour);
|
|
|
|
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 .6s ease;
|
|
transition: opacity .3s ease;
|
|
width: calc(100% - 20px);
|
|
outline: none;
|
|
|
|
&:active {
|
|
opacity: .2;
|
|
outline: none;
|
|
}
|
|
|
|
&:hover, &:focus {
|
|
background-color: $hover-background;
|
|
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(100% - 10px); /* 100% - 20px + 10px */
|
|
transition: all .7s ease;
|
|
}
|
|
}
|
|
</style> |