@functionalcms/svelte-components 2.40.9 → 2.41.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,43 +1,16 @@
|
|
|
1
|
-
<
|
|
2
|
-
div.banner {
|
|
3
|
-
background: var(--functional-banner-background);
|
|
4
|
-
height: 100%;
|
|
5
|
-
width: 100%;
|
|
6
|
-
}
|
|
7
|
-
.well {
|
|
8
|
-
width: var(--functional-mobile-content-width, 95%);
|
|
9
|
-
margin: var(--functional-mobile-content-margin, var(--fluid-8));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@media (min-width: 960px) {
|
|
13
|
-
.well {
|
|
14
|
-
width: var(--functional-content-width, 100%);
|
|
15
|
-
margin: var(--functional-content-margin, var(--fluid-8));
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
</style>
|
|
19
|
-
<script>import { Justify, AlignItmes, Orientation } from "./Styling.js";
|
|
20
|
-
export let background = "";
|
|
1
|
+
<script>export let background = "";
|
|
21
2
|
export let css = "";
|
|
22
|
-
|
|
23
|
-
export let justify = Justify.Start;
|
|
24
|
-
export let alignItems = AlignItmes.Start;
|
|
25
|
-
export let orientation = Orientation.Column;
|
|
26
|
-
$: klasses = [
|
|
27
|
-
"flex",
|
|
28
|
-
"well",
|
|
29
|
-
css ? css : "",
|
|
30
|
-
`${orientation}`,
|
|
31
|
-
`${justify}`,
|
|
32
|
-
`${alignItems}`
|
|
33
|
-
].filter((c) => c).join(" ");
|
|
34
|
-
$: bannerKlasses = [
|
|
35
|
-
"banner",
|
|
36
|
-
bannerCss
|
|
37
|
-
].filter((c) => c).join(" ");
|
|
3
|
+
$: bannerKlasses = ["banner", css].filter((c) => c).join(" ");
|
|
38
4
|
</script>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
5
|
+
|
|
6
|
+
<div class={bannerKlasses} style="--functional-banner-background: {background};">
|
|
7
|
+
<slot />
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>
|
|
11
|
+
div.banner {
|
|
12
|
+
background: var(--functional-banner-background);
|
|
13
|
+
height: 100%;
|
|
14
|
+
width: 100%;
|
|
15
|
+
}
|
|
16
|
+
</style>
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { Justify, AlignItmes, Orientation } from "./Styling.js";
|
|
3
2
|
declare const __propDef: {
|
|
4
3
|
props: {
|
|
5
4
|
background?: string;
|
|
6
5
|
css?: string;
|
|
7
|
-
bannerCss?: string;
|
|
8
|
-
justify?: Justify;
|
|
9
|
-
alignItems?: AlignItmes;
|
|
10
|
-
orientation?: Orientation;
|
|
11
6
|
};
|
|
12
7
|
events: {
|
|
13
8
|
[evt: string]: CustomEvent<any>;
|
|
@@ -304,6 +304,7 @@ export let idCapsule = false;
|
|
|
304
304
|
export let idCircle = false;
|
|
305
305
|
export let idGrouped = false;
|
|
306
306
|
export let isCircle = false;
|
|
307
|
+
export let isFlex = true;
|
|
307
308
|
export let size = ComponentSize.Normal;
|
|
308
309
|
export let justify = Justify.Center;
|
|
309
310
|
export let alignItems = AlignItmes.Center;
|
|
@@ -326,9 +327,10 @@ $: klasses = mergedClasses(
|
|
|
326
327
|
isSmall ? "btn-small" : "",
|
|
327
328
|
isLarge && isCircle ? "btn-large btn-circle-large" : "",
|
|
328
329
|
isSmall && idCircle ? "btn-small btn-circle-small" : "",
|
|
329
|
-
|
|
330
|
-
`${
|
|
331
|
-
`${
|
|
330
|
+
isFlex ? `flex` : "",
|
|
331
|
+
isFlex ? `${orientation}` : "",
|
|
332
|
+
isFlex ? `${justify}` : "",
|
|
333
|
+
isFlex ? `${alignItems}` : "",
|
|
332
334
|
css ? css : "btn"
|
|
333
335
|
);
|
|
334
336
|
</script>
|