DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

There's complexity in simplicity:

Browse source
This commit is contained in:
BOTAlex 2024-12-31 05:04:13 +01:00
parent 73c366e0f0
commit 5f78e8bf04
95 changed files with 9624 additions and 10843 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/lib/IO/Button.svelte
View file

@ -1,66 +1,66 @@
<script lang="ts">
import { ButtonType } from "$lib/IO/ButtonType.ts";
import { onMount } from "svelte";
export let href : string = "#";
export let type : ButtonType = ButtonType.Primary;
let cssName : string;
const buttonTypeColors = {
[ButtonType.Primary]: '--primary',
[ButtonType.Secondary]: '--secondary',
[ButtonType.Accent]: '--accent',
};
onMount(() => {
cssName = buttonTypeColors[type];
});
</script>
<a href={href} class="button" style="--button-color: var({cssName});">
<div class="content">
<slot name="content">
Click Me!
</slot>
</div>
</a>
<style>
.button {
white-space: nowrap;
border-radius: 6px;
border: none;
background-color: var(--button-color);
text-decoration: none;
transition: transform 100ms ease-in-out;
transform: translate(0, 0);
display: flex;
justify-content: center;
font-size: 1.5em;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
padding: 0.8em 4em;
}
.button:hover {
transition: transform 100ms ease-in-out;
transform: translate(0, -5px);
cursor: pointer;
filter: brightness(130%);
}
.content {
width: 100%;
height: 100%;
color: var(--text1);
display: flex;
justify-content: center;
align-content: center;
}
</style>
<script lang="ts">
import { ButtonType } from "$lib/IO/ButtonType.ts";
import { onMount } from "svelte";
export let href : string = "#";
export let type : ButtonType = ButtonType.Primary;
let cssName : string;
const buttonTypeColors = {
[ButtonType.Primary]: '--primary',
[ButtonType.Secondary]: '--secondary',
[ButtonType.Accent]: '--accent',
};
onMount(() => {
cssName = buttonTypeColors[type];
});
</script>
<a href={href} class="button" style="--button-color: var({cssName});">
<div class="content">
<slot name="content">
Click Me!
</slot>
</div>
</a>
<style>
.button {
white-space: nowrap;
border-radius: 6px;
border: none;
background-color: var(--button-color);
text-decoration: none;
transition: transform 100ms ease-in-out;
transform: translate(0, 0);
display: flex;
justify-content: center;
font-size: 1.5em;
box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
padding: 0.8em 4em;
}
.button:hover {
transition: transform 100ms ease-in-out;
transform: translate(0, -5px);
cursor: pointer;
filter: brightness(130%);
}
.content {
width: 100%;
height: 100%;
color: var(--text1);
display: flex;
justify-content: center;
align-content: center;
}
</style>