kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add crooked and frame variants to background wrapper

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-19 22:53:27 +02:00
parent 750ee35ef4
commit b462cbb310
2 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/back/jdd-components/background-wrapper/background-wrapper.css
View File

@ -7,6 +7,18 @@
padding: var(--vertical-padding) 0;
&.background-wrapper--bleed-none {
grid-column: content !important;
}
&.background-wrapper--bleed-bleed {
grid-column: bleed !important;
}
&.background-wrapper--bleed-screen {
grid-column: 1/-1 !important;
}
&.background-wrapper--padding-no {
padding: 0;
}
@ -37,4 +49,28 @@
color: var(--color-brand-text-on-accent2);
--color-brand-text-fg: var(--color-brand-text-on-accent2);
}
&.background-wrapper--frame1 {
border: 16px dashed var(--color-brand-accent);
background-color: color-mix(
in srgb,
var(--color-brand-accent) 20%,
transparent 80%
);
--color-brand-text-bg: transparent;
}
&.background-wrapper--frame2 {
border: 16px dashed var(--color-brand-accent2);
background-color: color-mix(
in srgb,
var(--color-brand-accent2) 20%,
transparent 80%
);
--color-brand-text-bg: transparent;
}
&.background-wrapper--crooked {
transform: scale(1.05) rotate(-2deg);
}
}

19
src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx
View File

@ -6,7 +6,7 @@ import type {
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
export const background_variants = ["variant1", "variant2"];
export const background_variants = ["variant1", "variant2", "frame1", "frame2"];
const component_arguments = {
variant: new ComponentArguments.Enum(background_variants),
@ -14,6 +14,10 @@ const component_arguments = {
padding: new ComponentArguments.Boolean(),
big_padding: new ComponentArguments.Boolean(),
margin: new ComponentArguments.Boolean(),
bleed: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
"screen"
),
crooked: new ComponentArguments.Boolean().setDefaultValue(false),
content: new ComponentArguments.NestedComponent(),
} as const;
@ -31,7 +35,16 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
}
async toHTML({
args: { variant, content, grow_to_screen_height, padding, margin, big_padding },
args: {
variant,
content,
grow_to_screen_height,
padding,
margin,
big_padding,
bleed,
crooked,
},
classes,
jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@ -40,10 +53,12 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
class={[
"background-wrapper",
`background-wrapper--${variant}`,
`background-wrapper--bleed-${bleed}`,
`background-wrapper--padding-${padding ? "yes" : "no"}`,
`background-wrapper--big-padding-${big_padding ? "yes" : "no"}`,
{
"background-wrapper--grow-height": grow_to_screen_height,
"background-wrapper--crooked": crooked,
"jdd-no-gap": !margin,
},
...classes,