Update illustrations & icons docs + Fixes
This commit is contained in:
venashial
parent
91b602341b
commit
fd936e5bf3
@ -27,7 +27,7 @@
|
||||
"mdsvexamples": "^0.3.0",
|
||||
"nodemon": "^2.0.15",
|
||||
"sveld": "^0.13.4",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte": "^3.48.0",
|
||||
"svelte-check": "^2.2.6",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"svelte2tsx": "^0.5.5",
|
||||
@ -53,6 +53,7 @@
|
||||
"homepage": "https://omorphia.modrinth.com",
|
||||
"dependencies": {
|
||||
"@iconify-json/carbon": "^1.1.1",
|
||||
"@iconify-json/fa-regular": "^1.1.1",
|
||||
"@iconify-json/heroicons-outline": "^1.1.1",
|
||||
"@iconify-json/heroicons-solid": "^1.1.1",
|
||||
"@iconify-json/lucide": "^1.1.7",
|
||||
|
||||
85
pnpm-lock.yaml
generated
85
pnpm-lock.yaml
generated
@ -2,6 +2,7 @@ lockfileVersion: 5.3
|
||||
|
||||
specifiers:
|
||||
'@iconify-json/carbon': ^1.1.1
|
||||
'@iconify-json/fa-regular': ^1.1.1
|
||||
'@iconify-json/heroicons-outline': ^1.1.1
|
||||
'@iconify-json/heroicons-solid': ^1.1.1
|
||||
'@iconify-json/lucide': ^1.1.7
|
||||
@ -33,7 +34,7 @@ specifiers:
|
||||
postcss-strip-inline-comments: ^0.1.5
|
||||
sanitize.css: ^13.0.0
|
||||
sveld: ^0.13.4
|
||||
svelte: ^3.44.0
|
||||
svelte: ^3.48.0
|
||||
svelte-check: ^2.2.6
|
||||
svelte-preprocess: ^4.10.1
|
||||
svelte-tiny-virtual-list: ^2.0.1
|
||||
@ -46,10 +47,11 @@ specifiers:
|
||||
|
||||
dependencies:
|
||||
'@iconify-json/carbon': 1.1.1
|
||||
'@iconify-json/fa-regular': 1.1.1
|
||||
'@iconify-json/heroicons-outline': 1.1.1
|
||||
'@iconify-json/heroicons-solid': 1.1.1
|
||||
'@iconify-json/lucide': 1.1.7
|
||||
'@poppanator/sveltekit-svg': 0.3.1_svelte@3.46.4
|
||||
'@poppanator/sveltekit-svg': 0.3.1_svelte@3.48.0
|
||||
autoprefixer: 10.4.2_postcss@8.4.8
|
||||
cssnano: 5.1.1_postcss@8.4.8
|
||||
highlight.js: 11.5.0
|
||||
@ -73,20 +75,20 @@ dependencies:
|
||||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-static': 1.0.0-next.29
|
||||
'@sveltejs/kit': 1.0.0-next.314_svelte@3.46.4
|
||||
'@sveltejs/kit': 1.0.0-next.326_svelte@3.48.0
|
||||
'@typescript-eslint/eslint-plugin': 5.14.0_e3f5f4efe2bd492e36eb6c1c619dfc98
|
||||
'@typescript-eslint/parser': 5.14.0_eslint@7.32.0+typescript@4.6.2
|
||||
eslint: 7.32.0
|
||||
eslint-config-prettier: 8.5.0_eslint@7.32.0
|
||||
eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.46.4
|
||||
mdsvex: 0.10.5_svelte@3.46.4
|
||||
eslint-plugin-svelte3: 3.4.1_eslint@7.32.0+svelte@3.48.0
|
||||
mdsvex: 0.10.5_svelte@3.48.0
|
||||
mdsvexamples: 0.3.0
|
||||
nodemon: 2.0.15
|
||||
sveld: 0.13.4_4db7643ceec6f88f007a3dfc606d2828
|
||||
svelte: 3.46.4
|
||||
svelte-check: 2.4.5_47ee9d04cb9dda3c584354882c0ecf6b
|
||||
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33
|
||||
svelte2tsx: 0.5.5_svelte@3.46.4+typescript@4.6.2
|
||||
svelte: 3.48.0
|
||||
svelte-check: 2.4.5_d3ea40bd46a6dc733b9b800bd83057b3
|
||||
svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
|
||||
svelte2tsx: 0.5.5_svelte@3.48.0+typescript@4.6.2
|
||||
tslib: 2.3.1
|
||||
typescript: 4.6.2
|
||||
|
||||
@ -250,6 +252,12 @@ packages:
|
||||
'@iconify/types': 1.0.12
|
||||
dev: false
|
||||
|
||||
/@iconify-json/fa-regular/1.1.1:
|
||||
resolution: {integrity: sha512-KFMX9DurKhOUpKqGlYRqlnCbcieEKo35961pnyf7NqUvHefBk1PZCU/kKbM2ib3piy8cn3V7RGvmZKq/INKGAA==}
|
||||
dependencies:
|
||||
'@iconify/types': 1.0.12
|
||||
dev: false
|
||||
|
||||
/@iconify-json/heroicons-outline/1.1.1:
|
||||
resolution: {integrity: sha512-Jy/aFbNQdszRxzhBvHB2AVu/IeMcK/YG3qJVf3XeqvBvhcPq/rWFEmo7jshzBclR/wbt9ylcBEUY1qRFcCXS9Q==}
|
||||
dependencies:
|
||||
@ -303,12 +311,12 @@ packages:
|
||||
'@nodelib/fs.scandir': 2.1.5
|
||||
fastq: 1.13.0
|
||||
|
||||
/@poppanator/sveltekit-svg/0.3.1_svelte@3.46.4:
|
||||
/@poppanator/sveltekit-svg/0.3.1_svelte@3.48.0:
|
||||
resolution: {integrity: sha512-atwGnEYD3S18hrwvM4S55sAB2EKzbvLPVBWoL9KSVqPgbSfRvKQb6aBrA7gWOQVz3uoCwDujUvvlbxvzYxmthw==}
|
||||
peerDependencies:
|
||||
svelte: 3.x
|
||||
dependencies:
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
svgo: 2.8.0
|
||||
dev: false
|
||||
|
||||
@ -358,16 +366,17 @@ packages:
|
||||
tiny-glob: 0.2.9
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.314_svelte@3.46.4:
|
||||
resolution: {integrity: sha512-EkXjEd30XO8+AydBLARxAtI6Ak8V0KFSEJ07sNsrkGq9J70sWPL7yGenhGaeq6S852XZAqeyWd6uGQZmQLR4Wg==}
|
||||
/@sveltejs/kit/1.0.0-next.326_svelte@3.48.0:
|
||||
resolution: {integrity: sha512-prJqmXZ2H1wmFfnMw7wDujfbkcA8vuubuqUkpVVmXhfh2+SEzQscPTNwxoE5EJxb5sywtLWEvYx3hv1gPS4Lvg==}
|
||||
engines: {node: '>=14.13'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
svelte: ^3.44.0
|
||||
dependencies:
|
||||
'@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.46.4+vite@2.9.1
|
||||
'@sveltejs/vite-plugin-svelte': 1.0.0-next.39_svelte@3.48.0+vite@2.9.1
|
||||
chokidar: 3.5.3
|
||||
sade: 1.8.1
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
vite: 2.9.1
|
||||
transitivePeerDependencies:
|
||||
- diff-match-patch
|
||||
@ -377,7 +386,7 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.46.4+vite@2.9.1:
|
||||
/@sveltejs/vite-plugin-svelte/1.0.0-next.39_svelte@3.48.0+vite@2.9.1:
|
||||
resolution: {integrity: sha512-gnvvcAW2LK+KnUn8lKb2ypcXKwSp2K57mem5C4VNKfjxdRpM6+XwNavWwVf6otnDhz3qPYl/TKKW6/dRr6eeAw==}
|
||||
engines: {node: ^14.13.1 || >= 16}
|
||||
peerDependencies:
|
||||
@ -392,8 +401,8 @@ packages:
|
||||
debug: 4.3.3
|
||||
kleur: 4.1.4
|
||||
magic-string: 0.25.9
|
||||
svelte: 3.46.4
|
||||
svelte-hmr: 0.14.10_svelte@3.46.4
|
||||
svelte: 3.48.0
|
||||
svelte-hmr: 0.14.10_svelte@3.48.0
|
||||
vite: 2.9.1
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
@ -1465,7 +1474,7 @@ packages:
|
||||
eslint: 7.32.0
|
||||
dev: true
|
||||
|
||||
/eslint-plugin-svelte3/3.4.1_eslint@7.32.0+svelte@3.46.4:
|
||||
/eslint-plugin-svelte3/3.4.1_eslint@7.32.0+svelte@3.48.0:
|
||||
resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
@ -1473,7 +1482,7 @@ packages:
|
||||
svelte: ^3.2.0
|
||||
dependencies:
|
||||
eslint: 7.32.0
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
dev: true
|
||||
|
||||
/eslint-scope/5.1.1:
|
||||
@ -2181,7 +2190,7 @@ packages:
|
||||
resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
|
||||
dev: false
|
||||
|
||||
/mdsvex/0.10.5_svelte@3.46.4:
|
||||
/mdsvex/0.10.5_svelte@3.48.0:
|
||||
resolution: {integrity: sha512-/B23WZn5Vjrjh7Qp2YsOXLkU9YFm59IEylKNXC10o05ZaCP4LNv32tGXKP6aEssss6hk/LdISJuneELHFIS2pQ==}
|
||||
peerDependencies:
|
||||
svelte: 3.x
|
||||
@ -2189,7 +2198,7 @@ packages:
|
||||
'@types/unist': 2.0.6
|
||||
prism-svelte: 0.4.7
|
||||
prismjs: 1.27.0
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
vfile-message: 2.0.4
|
||||
dev: true
|
||||
|
||||
@ -3330,7 +3339,7 @@ packages:
|
||||
glob: 7.2.0
|
||||
dev: true
|
||||
|
||||
/rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.46.4:
|
||||
/rollup-plugin-svelte/7.1.0_rollup@2.70.0+svelte@3.48.0:
|
||||
resolution: {integrity: sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg==}
|
||||
engines: {node: '>=10'}
|
||||
peerDependencies:
|
||||
@ -3340,7 +3349,7 @@ packages:
|
||||
require-relative: 0.8.7
|
||||
rollup: 2.70.0
|
||||
rollup-pluginutils: 2.8.2
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
dev: true
|
||||
|
||||
/rollup-pluginutils/2.8.2:
|
||||
@ -3572,9 +3581,9 @@ packages:
|
||||
fs-extra: 9.1.0
|
||||
prettier: 2.6.1
|
||||
rollup: 2.70.0
|
||||
rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.46.4
|
||||
svelte: 3.46.4
|
||||
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33
|
||||
rollup-plugin-svelte: 7.1.0_rollup@2.70.0+svelte@3.48.0
|
||||
svelte: 3.48.0
|
||||
svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
|
||||
typescript: 4.6.2
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
@ -3589,7 +3598,7 @@ packages:
|
||||
- sugarss
|
||||
dev: true
|
||||
|
||||
/svelte-check/2.4.5_47ee9d04cb9dda3c584354882c0ecf6b:
|
||||
/svelte-check/2.4.5_d3ea40bd46a6dc733b9b800bd83057b3:
|
||||
resolution: {integrity: sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@ -3602,8 +3611,8 @@ packages:
|
||||
picocolors: 1.0.0
|
||||
sade: 1.8.1
|
||||
source-map: 0.7.3
|
||||
svelte: 3.46.4
|
||||
svelte-preprocess: 4.10.4_9839acb1407290622c7a666e6c1abf33
|
||||
svelte: 3.48.0
|
||||
svelte-preprocess: 4.10.4_e7204e9bc547a97aca5df2183360009e
|
||||
typescript: 4.6.2
|
||||
transitivePeerDependencies:
|
||||
- '@babel/core'
|
||||
@ -3618,16 +3627,16 @@ packages:
|
||||
- sugarss
|
||||
dev: true
|
||||
|
||||
/svelte-hmr/0.14.10_svelte@3.46.4:
|
||||
/svelte-hmr/0.14.10_svelte@3.48.0:
|
||||
resolution: {integrity: sha512-VffsN0fT4cTJ7b4apf9VDIrgsbLFaJzPypcAuy4NcHx2PKKayfwLwabaYPWdHK5lJ/uQ/HBrkEsWHzo64NU6mQ==}
|
||||
engines: {node: ^12.20 || ^14.13.1 || >= 16}
|
||||
peerDependencies:
|
||||
svelte: '>=3.19.0'
|
||||
dependencies:
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
dev: true
|
||||
|
||||
/svelte-preprocess/4.10.4_9839acb1407290622c7a666e6c1abf33:
|
||||
/svelte-preprocess/4.10.4_e7204e9bc547a97aca5df2183360009e:
|
||||
resolution: {integrity: sha512-fuwol0N4UoHsNQolLFbMqWivqcJ9N0vfWO9IuPAiX/5okfoGXURyJ6nECbuEIv0nU3M8Xe2I1ONNje2buk7l6A==}
|
||||
engines: {node: '>= 9.11.2'}
|
||||
requiresBuild: true
|
||||
@ -3676,7 +3685,7 @@ packages:
|
||||
postcss-load-config: 3.1.4_postcss@8.4.8
|
||||
sorcery: 0.10.0
|
||||
strip-indent: 3.0.0
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
typescript: 4.6.2
|
||||
dev: true
|
||||
|
||||
@ -3688,12 +3697,12 @@ packages:
|
||||
resolution: {integrity: sha512-tOWeMPxeIoW9RshS0WbogRhdYdbxcJV0ebkzSh1lwR7Ihl0hSZMmB4YyCHHoXJK4xcbxCCFh0AnQ1vkzGZfLVQ==}
|
||||
dev: false
|
||||
|
||||
/svelte/3.46.4:
|
||||
resolution: {integrity: sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==}
|
||||
/svelte/3.48.0:
|
||||
resolution: {integrity: sha512-fN2YRm/bGumvjUpu6yI3BpvZnpIm9I6A7HR4oUNYd7ggYyIwSA/BX7DJ+UXXffLp6XNcUijyLvttbPVCYa/3xQ==}
|
||||
engines: {node: '>= 8'}
|
||||
dev: true
|
||||
|
||||
/svelte2tsx/0.5.5_svelte@3.46.4+typescript@4.6.2:
|
||||
/svelte2tsx/0.5.5_svelte@3.48.0+typescript@4.6.2:
|
||||
resolution: {integrity: sha512-5n8jP721bM3vXPk36AM9diZg2aasLvsfP/Zt9CQVrcqcnzexOYVeS8kpGk+3mofOPvPvXnOCLdff62usI/KOMw==}
|
||||
peerDependencies:
|
||||
svelte: ^3.24
|
||||
@ -3701,7 +3710,7 @@ packages:
|
||||
dependencies:
|
||||
dedent-js: 1.0.1
|
||||
pascal-case: 3.1.2
|
||||
svelte: 3.46.4
|
||||
svelte: 3.48.0
|
||||
typescript: 4.6.2
|
||||
dev: true
|
||||
|
||||
|
||||
@ -1,151 +1,157 @@
|
||||
<script lang="ts">
|
||||
// TODO: sizes
|
||||
// TODO: icon only buttons should have uniform padding
|
||||
// TODO: Could be a class
|
||||
// TODO: sizes
|
||||
// TODO: icon only buttons should have uniform padding
|
||||
// TODO: Could be a class
|
||||
|
||||
import { classCombine } from '../utils/classCombine'
|
||||
import { classCombine } from '../utils/classCombine';
|
||||
|
||||
/** The element to be styled as a button */
|
||||
export let as: 'button' | 'a' | 'summary' | 'input' = 'button'
|
||||
export let href = ''
|
||||
if (href) as = 'a'
|
||||
/** The element to be styled as a button */
|
||||
export let as: 'button' | 'a' | 'summary' | 'input' = 'button';
|
||||
export let href = '';
|
||||
if (href) as = 'a';
|
||||
|
||||
/** Use `value` if the button is an `<input`> */
|
||||
export let value = ''
|
||||
/** Use `value` if the button is an `<input`> */
|
||||
export let value = '';
|
||||
|
||||
export let size: 'sm' | 'md' | 'lg' = 'md'
|
||||
export let color: '' | 'raised' | 'primary' | 'primary-light' | 'danger'| 'danger-light' | 'transparent' = ''
|
||||
export let size: 'sm' | 'md' | 'lg' = 'md';
|
||||
export let color:
|
||||
| ''
|
||||
| 'raised'
|
||||
| 'primary'
|
||||
| 'primary-light'
|
||||
| 'danger'
|
||||
| 'danger-light'
|
||||
| 'transparent' = '';
|
||||
|
||||
/** Show notification badge in the upper right of button */
|
||||
export let badge = false
|
||||
/** Show notification badge in the upper right of button */
|
||||
export let badge = false;
|
||||
|
||||
export let disabled = false
|
||||
export let disabled = false;
|
||||
|
||||
let className: string
|
||||
$: className = classCombine(['button', `button--size-${size}`, `button--color-${color}`, badge && 'has-badge'])
|
||||
let className: string;
|
||||
$: className = classCombine([
|
||||
'button',
|
||||
`button--size-${size}`,
|
||||
`button--color-${color}`,
|
||||
badge && 'has-badge',
|
||||
]);
|
||||
</script>
|
||||
|
||||
{#if as === 'button'}
|
||||
<button class={className} {disabled} on:click>
|
||||
<slot/>
|
||||
</button>
|
||||
{:else if as === 'a'}
|
||||
<a class={className} {href} {disabled} on:click>
|
||||
<slot/>
|
||||
</a>
|
||||
{:else if as === 'summary'}
|
||||
<summary class={className} {disabled} on:click>
|
||||
<slot/>
|
||||
</summary>
|
||||
{:else if as === 'input'}
|
||||
<input class={className} {value} {disabled} on:click/>
|
||||
{#if as === 'a'}
|
||||
<a class={className} {href} {disabled} on:click>
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<svelte:element this={as} class={className} {disabled} on:click>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
grid-gap: 14px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 0.25rem 1rem;
|
||||
grid-gap: 14px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
box-shadow: var(--shadow-inset-sm);
|
||||
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--rounded);
|
||||
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
|
||||
background-color: var(--color-button-bg);
|
||||
border-radius: var(--rounded);
|
||||
transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
}
|
||||
|
||||
&--color {
|
||||
&-raised {
|
||||
background-color: var(--color-raised-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-button-bg-hover);
|
||||
background-color: var(--color-raised-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&--color {
|
||||
&-raised {
|
||||
background-color: var(--color-raised-bg);
|
||||
&-primary {
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-brand-contrast);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-raised-bg-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&-primary {
|
||||
background-color: var(--color-brand);
|
||||
color: var(--color-brand-contrast);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-brand-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&-primary-light {
|
||||
background-color: var(--color-brand-light);
|
||||
transition: filter 0s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-brand-light);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background-color: var(--color-badge-red-dot);
|
||||
color: var(--color-brand-contrast);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-badge-red-text);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger-light {
|
||||
background-color: var(--color-popup-danger-bg);
|
||||
color: var(--color-popup-danger-text);
|
||||
transition: filter 0s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-brand-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 50%;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
&-primary-light {
|
||||
background-color: var(--color-brand-light);
|
||||
transition: filter 0s ease-in-out;
|
||||
|
||||
/* Not ideal, but preventing events being fired needs to be implemented */
|
||||
pointer-events: none;
|
||||
&:hover {
|
||||
background-color: var(--color-brand-light);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&--pad-even {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 0;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.has-badge::after {
|
||||
content: '';
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--rounded-max);
|
||||
background-color: var(--color-brand);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
&-danger {
|
||||
background-color: var(--color-badge-red-dot);
|
||||
color: var(--color-brand-contrast);
|
||||
|
||||
/* Only child doesn't work as intended because text is passed through as `innerText` */
|
||||
:global(.icon:only-child) {
|
||||
margin: 4px -6px;
|
||||
&:hover {
|
||||
background-color: var(--color-badge-red-text);
|
||||
}
|
||||
}
|
||||
|
||||
&-danger-light {
|
||||
background-color: var(--color-popup-danger-bg);
|
||||
color: var(--color-popup-danger-text);
|
||||
transition: filter 0s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 50%;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
|
||||
/* Not ideal, but preventing events being fired needs to be implemented */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--pad-even {
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 0;
|
||||
min-width: 2rem;
|
||||
min-height: 2rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&.has-badge::after {
|
||||
content: '';
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: var(--rounded-max);
|
||||
background-color: var(--color-brand);
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Only child doesn't work as intended because text is passed through as `innerText` */
|
||||
:global(.icon:only-child) {
|
||||
margin: 4px -7px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,13 +3,14 @@ import Icons from 'unplugin-icons/vite';
|
||||
import svelteSvg from '@poppanator/sveltekit-svg';
|
||||
|
||||
export const preprocess = sveltePreprocess({
|
||||
postcss: true,
|
||||
postcss: true,
|
||||
})
|
||||
|
||||
export const plugins = [svelteSvg(),
|
||||
Icons({
|
||||
compiler: 'svelte',
|
||||
defaultClass: 'icon',
|
||||
scale: 1,
|
||||
}),
|
||||
export const plugins = [
|
||||
svelteSvg(),
|
||||
Icons({
|
||||
compiler: 'svelte',
|
||||
defaultClass: 'icon',
|
||||
scale: 1,
|
||||
}),
|
||||
]
|
||||
@ -2,4 +2,5 @@
|
||||
margin: 0.25rem 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-divider);
|
||||
width: 100%;
|
||||
}
|
||||
@ -57,5 +57,6 @@ ul {
|
||||
.icon {
|
||||
height: auto;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Human readable elapsed or remaining time (example: 3 minutes ago)
|
||||
* @author github.com/victornpb
|
||||
* @author https://github.com/victornpb
|
||||
* @see https://stackoverflow.com/a/67338038/938822
|
||||
*/
|
||||
export function ago(
|
||||
|
||||
@ -80,7 +80,7 @@ import { page } from '$app/stores';
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
grid-gap: 16px;
|
||||
grid-gap: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
```svelte example raised
|
||||
<div class="card">
|
||||
Some words could go here.
|
||||
```svelte example raised hideStyle
|
||||
Some words could go here.
|
||||
|
||||
<hr class="divider" />
|
||||
<hr class="divider" />
|
||||
|
||||
And some other words could go here.
|
||||
</div>
|
||||
And some other words could go here.
|
||||
|
||||
<style>
|
||||
.example__source__code {
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: Configure
|
||||
---
|
||||
|
||||
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files.
|
||||
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
|
||||
|
||||
## SvelteKit
|
||||
|
||||
|
||||
@ -2,64 +2,26 @@
|
||||
title: Icons
|
||||
---
|
||||
|
||||
<script>
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
</script>
|
||||
|
||||
Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.
|
||||
|
||||
## Installation
|
||||
|
||||
Install the package with:
|
||||
|
||||
```bash
|
||||
pnpm add -D unplugin-icons
|
||||
```
|
||||
|
||||
Import the plugin in your `svelte.config.js` file:
|
||||
|
||||
```js
|
||||
import Icons from 'unplugin-icons/vite';
|
||||
|
||||
const config = {
|
||||
kit: {
|
||||
vite: {
|
||||
plugins: [
|
||||
Icons({
|
||||
compiler: 'svelte',
|
||||
}),
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Choosing icons
|
||||
|
||||
`heroicons-outline` is the most used icon pack, and should be preferred above all others. If you can't find a good icon, or are looking for an alternative, use `lucide`, `fa-regular` (FontAwesome), `heroicons-solid`, and `carbon`, in that order. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
|
||||
The follwing icon packs are included with omorphia:
|
||||
|
||||
To install an icon pack, run:
|
||||
`heroicons-outline` `lucide` `fa-regular` `heroicons-solid` `carbon`
|
||||
|
||||
```bash
|
||||
pnpm add -D @iconify-json/heroicons-outline
|
||||
```
|
||||
|
||||
Replacing `heroicons-outline`, with the pack you are trying to install.
|
||||
Aim to find icons from `heroicons-outline` first, and then from the following packs if you can't find what you are looking for. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
|
||||
|
||||
## Using icons
|
||||
|
||||
Import an icon in the `<script>` tag of your component:
|
||||
|
||||
```js
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
```
|
||||
Import an icon in the `<script>` tag of your component.
|
||||
|
||||
Then use the icon as if it were a Svelte component:
|
||||
|
||||
> The `height` and `width` props are optional, and take CSS compatible values
|
||||
|
||||
```html
|
||||
That's lovely <IconHeart height="14px" />!
|
||||
```
|
||||
```svelte example
|
||||
<script lang="ts">
|
||||
import IconHeart from 'virtual:icons/heroicons-outline/heart'
|
||||
</script>
|
||||
|
||||
That's lovely <IconHeart height="14px" />!
|
||||
<p> That's lovely <IconHeart height="14px" />! </p>
|
||||
```
|
||||
|
||||
@ -2,6 +2,20 @@
|
||||
title: Using illustrations
|
||||
---
|
||||
|
||||
TODO
|
||||
Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
|
||||
|
||||
Use `.illustration` class.
|
||||
Put the illustration in the `src/assets/images/illustrations` folder. Rename it to `undraw_` + the illustration slug.
|
||||
|
||||
Replace colors in the SVG with CSS variables such as `var(--color-brand)` and `var(--color-raised)`. For colors that are the same as the font color, use `currentColor`.
|
||||
|
||||
Add the `.illustration` class to the SVG
|
||||
|
||||
Import the SVG in the `<script>` of your svelte file, and treat the illustration as a Svelte component:
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
|
||||
</script>
|
||||
|
||||
<NoData />
|
||||
```
|
||||
@ -24,7 +24,7 @@ pnpm add omorphia
|
||||
|
||||
Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
|
||||
|
||||
```svelte example
|
||||
```svelte example raised
|
||||
<script lang="ts">
|
||||
import { Button } from "omorphia"
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user