dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-20 20:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

connections UX

Browse Source
This commit is contained in:
Jan Prochazka
2024-11-28 18:45:39 +01:00
parent 3ac24436ba
commit ae037834f2
3 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/web/src/buttons/FormStyledButton.svelte
View File

@@ -8,6 +8,7 @@
export let value;
export let title = null;
export let skipWidth = false;
export let outline = false;
function handleClick() {
if (!disabled) dispatch('click');
@@ -20,7 +21,17 @@
}
</script>
<input {type} {value} {title} class:disabled {...$$restProps} on:click={handleClick} bind:this={domButton} class:skipWidth />
<input
{type}
{value}
{title}
class:disabled
{...$$restProps}
on:click={handleClick}
bind:this={domButton}
class:skipWidth
class:outline
/>
<style>
input {
@@ -36,14 +47,27 @@
width: 100px;
}
input:hover:not(.disabled) {
input:hover:not(.disabled):not(.outline) {
background-color: var(--theme-bg-button-inv-2);
}
input:active:not(.disabled) {
input:active:not(.disabled):not(.outline) {
background-color: var(--theme-bg-button-inv-3);
}
input.disabled {
background-color: var(--theme-bg-button-inv-3);
color: var(--theme-font-inv-3);
}
input.outline {
background-color: transparent;
color: var(--theme-font-2);
border: 1px solid var(--theme-bg-button-inv-2);
}
input.outline:hover:not(.disabled) {
color: var(--theme-bg-button-inv-3);
border: 2px solid var(--theme-bg-button-inv-3);
margin: 1px;
}
</style>