Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-22 10:46:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/components: add BulletExplain component

Browse source
This commit is contained in:
wukko 2024-11-18 15:24:11 +06:00
parent 26e051fcd8
commit 152ba6d443
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 72 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
web/src/components/misc/BulletExplain.svelte Normal file
View file

@ -0,0 +1,72 @@
<script lang="ts">
export let title: string;
export let description: string;
export let icon: ConstructorOfATypedSvelteComponent;
</script>
<div class="bullet-holder">
<div class="bullet-icon">
<svelte:component this={icon} />
</div>
<div class="bullet-content">
<div class="bullet-title">
{title}
</div>
<div class="subtext bullet-description">
{description}
</div>
</div>
</div>
<style>
.bullet-holder {
display: flex;
flex-direction: row;
text-align: left;
gap: var(--padding);
}
.bullet-content {
display: flex;
flex-direction: column;
gap: calc(var(--padding) / 2);
}
.bullet-title {
color: var(--secondary);
display: flex;
flex-direction: row;
align-items: center;
font-weight: 500;
gap: var(--padding);
}
.bullet-description {
padding: 0;
line-height: 1.5;
}
.bullet-icon {
display: flex;
}
.bullet-icon :global(svg) {
width: 21px;
height: 21px;
}
@media screen and (max-width: 535px) {
.bullet-content {
gap: calc(var(--padding) / 2.5);
}
.bullet-title {
font-size: 15px;
}
.bullet-icon :global(svg) {
width: 19px;
height: 19px;
}
}
</style>