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

Add the ability to change the buttons text colour.

Browse source
This commit is contained in:
Oliver Akins 2022-07-22 19:45:04 -06:00
parent 1b011d4a3b
commit 5b2072b473
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
1 changed files with 9 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
export let height: string|number = "50px"; export let height: string|number = "50px";
export let width: string|number = "unset"; export let width: string|number = "unset";
export let textColour: string = "#000000";
export let hoverTextColour: string = "#000000";
export let background: string = "#00aa00"; export let background: string = "#00aa00";
export let hoverBackground: string = "transparent"; export let hoverBackground: string = "transparent";
export let classes: string = ""; export let classes: string = "";
@ -39,7 +41,9 @@ $: if (typeof(width) == "string") {
--height: {height}; --height: {height};
--width: {width}; --width: {width};
--background-colour: {background}; --background-colour: {background};
--hover-background-colour: {hoverBackground};" --hover-background-colour: {hoverBackground};
--text-colour: {textColour};
--hover-text-colour: {hoverTextColour};"
class="button-container {classes}" class="button-container {classes}"
> >
<button <button
@ -61,12 +65,15 @@ div.button-container {
$button-background: var(--background-colour); $button-background: var(--background-colour);
$hover-background: var(--hover-background-colour); $hover-background: var(--hover-background-colour);
$text-colour: var(--text-colour);
$hover-text-colour: var(--hover-text-colour);
button { button {
background: $button-background; background: $button-background;
border-radius: 5px; border-radius: 5px;
border: 3px solid $button-background; border: 3px solid $button-background;
box-sizing: border-box; box-sizing: border-box;
color: $text-colour;
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
height: calc(100% - 20px); height: calc(100% - 20px);
margin: 10px; margin: 10px;
@ -84,7 +91,7 @@ button {
&:hover, &:focus { &:hover, &:focus {
background-color: $hover-background; background-color: $hover-background;
border-radius: 20px; border-radius: 20px;
color: white; color: $hover-text-colour;
&:before { &:before {
border-radius: min( border-radius: min(