@functionalcms/svelte-components 2.12.6 → 2.12.8
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.
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
}
|
|
7
7
|
.well {
|
|
8
8
|
width: var(--functional-mobile-content-width, 95%);
|
|
9
|
-
margin: var(--functional-mobile-content-margin, var(--fluid-8))
|
|
9
|
+
margin: var(--functional-mobile-content-margin, var(--fluid-8));
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
@media (min-width: 960px) {
|
|
13
13
|
.well {
|
|
14
14
|
width: var(--functional-content-width, 100%);
|
|
15
|
-
margin:
|
|
15
|
+
margin: var(--functional-content-margin, var(--fluid-8));
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
</style>
|
|
@@ -289,7 +289,7 @@ on the side padding. As such, these have a good bit less then regular buttons. *
|
|
|
289
289
|
display: inline-flex;
|
|
290
290
|
flex-direction: row;
|
|
291
291
|
}</style>
|
|
292
|
-
<script>import { ComponentSize } from "./Styling.js";
|
|
292
|
+
<script>import { AlignItmes, ComponentSize, Justify, Orientation } from "./Styling.js";
|
|
293
293
|
export let css = "";
|
|
294
294
|
export let href = "";
|
|
295
295
|
export let isPrimary = false;
|
|
@@ -304,6 +304,9 @@ export let idCircle = false;
|
|
|
304
304
|
export let idGrouped = false;
|
|
305
305
|
export let isCircle = false;
|
|
306
306
|
export let size = ComponentSize.Normal;
|
|
307
|
+
export let justify = Justify.Start;
|
|
308
|
+
export let alignItems = AlignItmes.Start;
|
|
309
|
+
export let orientation = Orientation.Column;
|
|
307
310
|
$:
|
|
308
311
|
isSmall = size === ComponentSize.Small;
|
|
309
312
|
$:
|
|
@@ -325,6 +328,9 @@ $:
|
|
|
325
328
|
isSmall ? "btn-small" : "",
|
|
326
329
|
isLarge && isCircle ? "btn-large btn-circle-large" : "",
|
|
327
330
|
isSmall && idCircle ? "btn-small btn-circle-small" : "",
|
|
331
|
+
`${orientation}`,
|
|
332
|
+
`${justify}`,
|
|
333
|
+
`${alignItems}`,
|
|
328
334
|
css ? css : ""
|
|
329
335
|
].filter((c) => c).join(" ");
|
|
330
336
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SvelteComponent } from "svelte";
|
|
2
|
-
import { ComponentSize } from './Styling.js';
|
|
2
|
+
import { AlignItmes, ComponentSize, Justify, Orientation } from './Styling.js';
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
css?: string | undefined;
|
|
@@ -16,6 +16,9 @@ declare const __propDef: {
|
|
|
16
16
|
idGrouped?: boolean | undefined;
|
|
17
17
|
isCircle?: boolean | undefined;
|
|
18
18
|
size?: ComponentSize | undefined;
|
|
19
|
+
justify?: Justify | undefined;
|
|
20
|
+
alignItems?: AlignItmes | undefined;
|
|
21
|
+
orientation?: Orientation | undefined;
|
|
19
22
|
};
|
|
20
23
|
events: {
|
|
21
24
|
[evt: string]: CustomEvent<any>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<style>
|
|
2
2
|
div {
|
|
3
3
|
width: var(--functional-mobile-content-width, 95%);
|
|
4
|
-
margin: var(--functional-mobile-content-margin, var(--fluid-8))
|
|
4
|
+
margin: var(--functional-mobile-content-margin, var(--fluid-8));
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
@media (min-width: 960px) {
|
|
8
8
|
div {
|
|
9
9
|
width: var(--functional-content-width, 100%);
|
|
10
|
-
margin:
|
|
10
|
+
margin: var(--functional-content-margin, var(--fluid-8));
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
</style>
|