generated from tpl/obsidian-sample-plugin
Remove old stack designs
This commit is contained in:
parent
6811f07536
commit
18aa687647
|
|
@ -1,10 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Color, isColorName, type ColorName } from "@utils/color";
|
import { Color, isColorName, type ColorName } from "@utils/color";
|
||||||
import BookText from "./BookText.svelte";
|
import BookText from "./BookText.svelte";
|
||||||
import BookStackColoredSpine from "./designs/stack/BookStackColoredSpine.svelte";
|
|
||||||
import BookStackDefault from "./designs/stack/BookStackDefault.svelte";
|
|
||||||
import BookStackDualTopBands from "./designs/stack/BookStackDualTopBands.svelte";
|
|
||||||
import BookStackSplitBands from "./designs/stack/BookStackSplitBands.svelte";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title?: string;
|
title?: string;
|
||||||
|
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from "svelte";
|
|
||||||
import chroma from "chroma-js";
|
|
||||||
import { Color } from "@utils/color";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children?: Snippet;
|
|
||||||
color?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { children, color = "green", onClick }: Props = $props();
|
|
||||||
|
|
||||||
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
||||||
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
||||||
const backgroundColor = $derived(chroma(color).mix("black", 0.14));
|
|
||||||
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bookshelf__book-wrapper"
|
|
||||||
style:--book-border-left-color={borderLeftColor.css()}
|
|
||||||
style:--book-border-right-color={borderRightColor.css()}
|
|
||||||
style:--book-background-color={backgroundColor.css()}
|
|
||||||
style:color={textColor}
|
|
||||||
onclick={onClick}
|
|
||||||
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
||||||
role="link"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
div {
|
|
||||||
background: var(--book-color);
|
|
||||||
border-left: 2px solid var(--book-border-left-color);
|
|
||||||
border-right: 2px solid var(--book-border-right-color);
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: var(--book-background-color);
|
|
||||||
height: 40px;
|
|
||||||
width: calc(100% + 4px);
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: -2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from "svelte";
|
|
||||||
import chroma from "chroma-js";
|
|
||||||
import { Color } from "@utils/color";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children?: Snippet;
|
|
||||||
color?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { children, color = "green", onClick }: Props = $props();
|
|
||||||
|
|
||||||
const backgroundColor = $derived(chroma(color));
|
|
||||||
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
||||||
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
||||||
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bookshelf__book-wrapper"
|
|
||||||
style:--book-color={backgroundColor.css()}
|
|
||||||
style:--book-border-left-color={borderLeftColor.css()}
|
|
||||||
style:--book-border-right-color={borderRightColor.css()}
|
|
||||||
style:color={textColor}
|
|
||||||
onclick={onClick}
|
|
||||||
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
||||||
role="link"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
div {
|
|
||||||
background: var(--book-color);
|
|
||||||
border-left: 2px solid var(--book-border-left-color);
|
|
||||||
border-right: 2px solid var(--book-border-right-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from "svelte";
|
|
||||||
import chroma from "chroma-js";
|
|
||||||
import { Color } from "@utils/color";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children?: Snippet;
|
|
||||||
color?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { children, color = "green", onClick }: Props = $props();
|
|
||||||
|
|
||||||
const backgroundColor = $derived(chroma(color));
|
|
||||||
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
||||||
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
||||||
const bandColor = $derived(chroma(color).mix("black", 0.14));
|
|
||||||
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bookshelf__book-wrapper"
|
|
||||||
style:--book-color={backgroundColor.css()}
|
|
||||||
style:--book-border-left-color={borderLeftColor.css()}
|
|
||||||
style:--book-border-right-color={borderRightColor.css()}
|
|
||||||
style:--book-band-color={bandColor.css()}
|
|
||||||
style:color={textColor}
|
|
||||||
onclick={onClick}
|
|
||||||
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
||||||
role="link"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
div {
|
|
||||||
background: var(--book-color);
|
|
||||||
border-left: 2px solid var(--book-border-left-color);
|
|
||||||
border-right: 2px solid var(--book-border-right-color);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: var(--book-band-color);
|
|
||||||
height: 40px;
|
|
||||||
width: 10px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: var(--book-band-color);
|
|
||||||
height: 40px;
|
|
||||||
width: 15px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 24px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.bookshelf__book-content) {
|
|
||||||
width: calc(200px - 31px) !important;
|
|
||||||
margin: 0 31px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,72 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from "svelte";
|
|
||||||
import chroma from "chroma-js";
|
|
||||||
import { Color } from "@utils/color";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
children?: Snippet;
|
|
||||||
color?: string;
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { children, color = "green", onClick }: Props = $props();
|
|
||||||
|
|
||||||
const backgroundColor = $derived(chroma(color));
|
|
||||||
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
||||||
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
||||||
const bandColor = $derived(chroma(color).mix("black", 0.14));
|
|
||||||
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="bookshelf__book-wrapper"
|
|
||||||
style:--book-color={backgroundColor.css()}
|
|
||||||
style:--book-border-left-color={borderLeftColor.css()}
|
|
||||||
style:--book-border-right-color={borderRightColor.css()}
|
|
||||||
style:--book-band-color={bandColor.css()}
|
|
||||||
style:color={textColor}
|
|
||||||
onclick={onClick}
|
|
||||||
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
||||||
role="link"
|
|
||||||
tabindex="0"
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
div {
|
|
||||||
background: var(--book-color);
|
|
||||||
border-left: 2px solid var(--book-border-left-color);
|
|
||||||
border-right: 2px solid var(--book-border-right-color);
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: var(--book-band-color);
|
|
||||||
height: 40px;
|
|
||||||
width: 20px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: " ";
|
|
||||||
display: block;
|
|
||||||
background: var(--book-band-color);
|
|
||||||
height: 40px;
|
|
||||||
width: 20px;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.bookshelf__book-content) {
|
|
||||||
width: calc(200px - 60px) !important;
|
|
||||||
margin: 0 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue