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