acid-info/Kurate
1
0
Fork 0
mirror of https://github.com/acid-info/Kurate.git synced 2025-01-13 01:14:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: apply new styling system with primary secondary color and spacing (#10)

Browse Source
This commit is contained in:
Vojtech Simetka 2022-11-25 16:44:39 +01:00 committed by GitHub
parent 71cd24e6b8
commit 1e4023d782
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/components/button.svelte
View File

@ -5,20 +5,15 @@
export let icon: ComponentConstructor<IconProps> | undefined = undefined export let icon: ComponentConstructor<IconProps> | undefined = undefined
export let click: svelte.JSX.MouseEventHandler<HTMLButtonElement> | null | undefined = undefined export let click: svelte.JSX.MouseEventHandler<HTMLButtonElement> | null | undefined = undefined
export let label: string | undefined = undefined export let label: string | undefined = undefined
let hovered = false
$: fill = (variant === 'dark' && hovered) || (variant === 'light' && !hovered) ? 'black' : 'white'
</script> </script>
<button <button class={`root ${variant} ${!label ? 'icon-only' : ''}`} on:click={click}>
class={`root ${variant} ${!label ? 'icon-only' : ''}`}
on:mouseenter={() => (hovered = true)}
on:click={click}
on:mouseleave={() => (hovered = false)}
>
{#if icon !== undefined} {#if icon !== undefined}
<div class="wrapper"> <div class="wrapper">
<svelte:component this={icon} size={20} {fill} /> <svelte:component
this={icon}
fill={variant === 'light' ? 'var(--color-primary)' : 'var(--color-secondary)'}
/>
</div> </div>
{/if} {/if}
{#if label !== undefined} {#if label !== undefined}
@ -28,10 +23,10 @@
<style> <style>
.root { .root {
padding-left: 15px; padding-left: var(--spacing-15);
padding-right: 15px; padding-right: var(--spacing-15);
height: 44px; height: 44px;
border: 1px solid var(--color-black); border: 1px solid var(--color-primary);
border-radius: 50px; border-radius: 50px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -48,21 +43,19 @@
.wrapper { .wrapper {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-right: 10px; margin-right: var(--spacing-6);
} }
.icon-only .wrapper { .icon-only .wrapper {
margin-right: 0px; margin-right: 0px;
} }
.light, .light {
.dark:hover { color: var(--color-primary);
color: var(--color-black); background-color: var(--color-secondary);
background-color: var(--color-white); border-color: var(--color-spacer);
border-color: var(--color-light-grey);
} }
.dark, .dark {
.light:hover { color: var(--color-secondary);
color: var(--color-white); background-color: var(--color-primary);
background-color: var(--color-black); border-color: var(--color-primary);
border-color: var(--color-black);
} }
</style> </style>

2
src/lib/components/header.svelte
View File

@ -13,7 +13,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 15px; padding: var(--spacing-12);
} }
.title { .title {
font-family: var(--font-body); font-family: var(--font-body);

2
src/lib/components/icons/user.svelte
View File

@ -3,7 +3,7 @@
type $$Props = IconProps type $$Props = IconProps
export let size = 32 export let size = 20
export let fill = 'black' export let fill = 'black'
</script> </script>

2
src/lib/components/icons/wallet.svelte
View File

@ -3,7 +3,7 @@
type $$Props = IconProps type $$Props = IconProps
export let size = 32 export let size = 20
export let fill = 'black' export let fill = 'black'
</script> </script>

19
src/routes/styles.css
View File

@ -2,9 +2,18 @@
--font-body: 'Source Sans Pro'; --font-body: 'Source Sans Pro';
--font-mono: 'Source Code Pro'; --font-mono: 'Source Code Pro';
--color-light-grey: #ddd; --color-secondary: #fff;
--color-white: #fff; --color-primary: #000;
--color-black: #000; --color-spacer: #ddd;
--color-text: #000;
--spacing-3: 3px;
--spacing-6: 6px;
--spacing-12: 12px;
--spacing-15: 15px;
--spacing-24: 24px;
--spacing-48: 48px;
} }
body { body {
@ -13,8 +22,8 @@ body {
overflow-x: hidden; overflow-x: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: var(--color-black); color: var(--color-text);
background-color: var(--color-white); background-color: var(--color-secondary);
font-family: 'Source Sans Pro'; font-family: 'Source Sans Pro';
font-weight: 400; font-weight: 400;
} }