ctome
/
paimon-moe-fork
mirror of https://github.com/CrimsonTome/paimon-moe-fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix button styling

pull/1/head
I Made Setia Baruna 2021-02-01 16:15:28 +08:00
parent 4487c068ec
commit e275eb8a16
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Button.svelte
View File

@ -5,8 +5,8 @@
export let color = 'blue'; export let color = 'blue';
export let rounded = true; export let rounded = true;
let px = 4; let px = 'px-4';
let py = 2; let py = 'py-2';
let textColor = 'white'; let textColor = 'white';
let borderColor = 'white'; let borderColor = 'white';
@ -27,18 +27,18 @@
$: switch (size) { $: switch (size) {
case 'md': case 'md':
px = 4; px = 'px-4';
py = 2; py = 'py-2';
break; break;
case 'sm': case 'sm':
px = 1; px = 'px-1';
py = 1; py = 'py-1';
break; break;
} }
</script> </script>
<button <button
{disabled} {disabled}
class={`text-${textColor} border-2 border-white border-opacity-25 ${rounded ? 'rounded-xl' : 'rounded-none'} px-${px} py-${py} transition duration-100 class={`text-${textColor} border-2 border-white border-opacity-25 ${rounded ? 'rounded-xl' : 'rounded-none'} ${px} ${py} transition duration-100
hover:border-${borderColor} focus:outline-none focus:border-${borderColor} disabled:opacity-50 disabled:border-gray-600 ${className}`} hover:border-${borderColor} focus:outline-none focus:border-${borderColor} disabled:opacity-50 disabled:border-gray-600 ${className}`}
on:click><slot /></button> on:click><slot /></button>