Oliver/Gravwell-Online
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tweak the button to allow fixed-colour background when using it with icons

Browse source
This commit is contained in:
Oliver-Akins 2021-12-15 02:42:45 -06:00
parent cfa6dff9b9
commit 9541bf144f
1 changed files with 18 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

27
web-svelte/src/components/SciFi-Button.svelte
View file

@ -1,7 +1,9 @@
<script lang="ts">
export let height: string|number = 50;
export let height: string|number = "50px";
export let width: string|number = "unset";
export let background: string = "#00aa00";
export let handler: (e: Event) => unknown;
export let hoverBackground: string = "transparent";
// Add the units to the height value if not provided, and ensure that the
// provided height is not less than 50 (the default)
@ -31,7 +33,11 @@
</script>
<div
style="--height: {height}; --width: {width};"
style="
--height: {height};
--width: {width};
--background-colour: {background};
--hover-background-colour: {hoverBackground};"
class="button-container"
>
<button on:click={handler}>
@ -43,12 +49,12 @@
div.button-container {
display: inline-block;
position: relative;
margin: 10px;
width: var(--width);
height: var(--height);
}
$button-background: #0a0;
$button-background: var(--background-colour);
$hover-background: var(--hover-background-colour);
button {
background: $button-background;
@ -59,8 +65,8 @@ button {
height: calc(100% - 20px);
margin: 10px;
padding: 5px 7px;
transition: all .5s ease;
transition: opacity .2s ease;
transition: all .6s ease;
transition: opacity .3s ease;
width: calc(100% - 20px);
&:active {
@ -69,12 +75,15 @@ button {
}
&:hover {
background-color: transparent;
background-color: $hover-background;
border-radius: 20px;
color: white;
&:before {
border-radius: min(calc(((var(--height) - 20px) / 2) + 5px), 25px);
border-radius: min(
calc(((var(--height) - 20px) / 2) + 5px),
25px
);
border: 2px $button-background solid;
}
}
@ -87,7 +96,7 @@ button {
top: 5px;
box-sizing: border-box;
width: calc(100% - 10px);
height: calc(calc(100% - 20px) + 10px);
height: calc(100% - 10px); /* 100% - 20px + 10px */
transition: all .7s ease;
}
}