@medyll/idae-slotui-svelte 0.40.0 → 0.41.0
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.
- package/dist/slotui-css/marquee.css +11 -11
- package/dist/slotui-css/marquee.min.css +11 -11
- package/dist/slotui-css/slotui-css.css +25 -25
- package/dist/slotui-css/slotui-min-css.css +25 -25
- package/dist/ui/marquee/Marquee.demo.svelte +9 -13
- package/dist/ui/marquee/Marquee.svelte +13 -13
- package/dist/ui/marquee/marquee.scss +17 -11
- package/package.json +3 -3
|
@@ -5,47 +5,47 @@
|
|
|
5
5
|
scroll-snap-type: x mandatory;
|
|
6
6
|
width: 300px;
|
|
7
7
|
}
|
|
8
|
-
.marquee-container {
|
|
8
|
+
.marquee :global(-container) {
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
--preset-gutter: var(--sld-gutter-default);
|
|
12
12
|
}
|
|
13
|
-
.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
|
|
13
|
+
.marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
|
|
14
14
|
padding: var(--sld-gutter-tiny);
|
|
15
15
|
gap: var(--sld-gutter-tiny);
|
|
16
16
|
--preset-gutter: var(--sld-gutter-tiny);
|
|
17
17
|
}
|
|
18
|
-
.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
|
|
18
|
+
.marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
|
|
19
19
|
padding: var(--sld-gutter-mini);
|
|
20
20
|
gap: var(--sld-gutter-mini);
|
|
21
21
|
--preset-gutter: var(--sld-gutter-mini);
|
|
22
22
|
}
|
|
23
|
-
.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
|
|
23
|
+
.marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
|
|
24
24
|
padding: var(--sld-gutter-small);
|
|
25
25
|
gap: var(--sld-gutter-small);
|
|
26
26
|
--preset-gutter: var(--sld-gutter-small);
|
|
27
27
|
}
|
|
28
|
-
.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
|
|
28
|
+
.marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
|
|
29
29
|
padding: var(--sld-gutter-med);
|
|
30
30
|
gap: var(--sld-gutter-med);
|
|
31
31
|
--preset-gutter: var(--sld-gutter-med);
|
|
32
32
|
}
|
|
33
|
-
.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
|
|
33
|
+
.marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
|
|
34
34
|
padding: var(--sld-gutter-kind);
|
|
35
35
|
gap: var(--sld-gutter-kind);
|
|
36
36
|
--preset-gutter: var(--sld-gutter-kind);
|
|
37
37
|
}
|
|
38
|
-
.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
|
|
38
|
+
.marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
|
|
39
39
|
padding: var(--sld-gutter-default);
|
|
40
40
|
gap: var(--sld-gutter-default);
|
|
41
41
|
--preset-gutter: var(--sld-gutter-default);
|
|
42
42
|
}
|
|
43
|
-
.marquee
|
|
44
|
-
display:
|
|
43
|
+
.marquee-children {
|
|
44
|
+
display: flex;
|
|
45
|
+
border: 1px solid red;
|
|
45
46
|
}
|
|
46
|
-
.marquee
|
|
47
|
+
.marquee-children > * {
|
|
47
48
|
border: 1px solid red;
|
|
48
|
-
width: 90px;
|
|
49
49
|
height: 300px;
|
|
50
50
|
}
|
|
51
51
|
.marquee-controls-prev {
|
|
@@ -5,47 +5,47 @@
|
|
|
5
5
|
scroll-snap-type: x mandatory;
|
|
6
6
|
width: 300px;
|
|
7
7
|
}
|
|
8
|
-
.marquee-container {
|
|
8
|
+
.marquee :global(-container) {
|
|
9
9
|
display: flex;
|
|
10
10
|
align-items: center;
|
|
11
11
|
--preset-gutter: var(--sld-gutter-default);
|
|
12
12
|
}
|
|
13
|
-
.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
|
|
13
|
+
.marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
|
|
14
14
|
padding: var(--sld-gutter-tiny);
|
|
15
15
|
gap: var(--sld-gutter-tiny);
|
|
16
16
|
--preset-gutter: var(--sld-gutter-tiny);
|
|
17
17
|
}
|
|
18
|
-
.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
|
|
18
|
+
.marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
|
|
19
19
|
padding: var(--sld-gutter-mini);
|
|
20
20
|
gap: var(--sld-gutter-mini);
|
|
21
21
|
--preset-gutter: var(--sld-gutter-mini);
|
|
22
22
|
}
|
|
23
|
-
.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
|
|
23
|
+
.marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
|
|
24
24
|
padding: var(--sld-gutter-small);
|
|
25
25
|
gap: var(--sld-gutter-small);
|
|
26
26
|
--preset-gutter: var(--sld-gutter-small);
|
|
27
27
|
}
|
|
28
|
-
.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
|
|
28
|
+
.marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
|
|
29
29
|
padding: var(--sld-gutter-med);
|
|
30
30
|
gap: var(--sld-gutter-med);
|
|
31
31
|
--preset-gutter: var(--sld-gutter-med);
|
|
32
32
|
}
|
|
33
|
-
.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
|
|
33
|
+
.marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
|
|
34
34
|
padding: var(--sld-gutter-kind);
|
|
35
35
|
gap: var(--sld-gutter-kind);
|
|
36
36
|
--preset-gutter: var(--sld-gutter-kind);
|
|
37
37
|
}
|
|
38
|
-
.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
|
|
38
|
+
.marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
|
|
39
39
|
padding: var(--sld-gutter-default);
|
|
40
40
|
gap: var(--sld-gutter-default);
|
|
41
41
|
--preset-gutter: var(--sld-gutter-default);
|
|
42
42
|
}
|
|
43
|
-
.marquee
|
|
44
|
-
display:
|
|
43
|
+
.marquee-children {
|
|
44
|
+
display: flex;
|
|
45
|
+
border: 1px solid red;
|
|
45
46
|
}
|
|
46
|
-
.marquee
|
|
47
|
+
.marquee-children > * {
|
|
47
48
|
border: 1px solid red;
|
|
48
|
-
width: 90px;
|
|
49
49
|
height: 300px;
|
|
50
50
|
}
|
|
51
51
|
.marquee-controls-prev {
|
|
@@ -1270,47 +1270,47 @@ li.menuItem .menu-list-item-action {
|
|
|
1270
1270
|
scroll-snap-type: x mandatory;
|
|
1271
1271
|
width: 300px;
|
|
1272
1272
|
}
|
|
1273
|
-
.marquee-container {
|
|
1273
|
+
.marquee :global(-container) {
|
|
1274
1274
|
display: flex;
|
|
1275
1275
|
align-items: center;
|
|
1276
1276
|
--preset-gutter: var(--sld-gutter-default);
|
|
1277
1277
|
}
|
|
1278
|
-
.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
|
|
1278
|
+
.marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
|
|
1279
1279
|
padding: var(--sld-gutter-tiny);
|
|
1280
1280
|
gap: var(--sld-gutter-tiny);
|
|
1281
1281
|
--preset-gutter: var(--sld-gutter-tiny);
|
|
1282
1282
|
}
|
|
1283
|
-
.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
|
|
1283
|
+
.marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
|
|
1284
1284
|
padding: var(--sld-gutter-mini);
|
|
1285
1285
|
gap: var(--sld-gutter-mini);
|
|
1286
1286
|
--preset-gutter: var(--sld-gutter-mini);
|
|
1287
1287
|
}
|
|
1288
|
-
.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
|
|
1288
|
+
.marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
|
|
1289
1289
|
padding: var(--sld-gutter-small);
|
|
1290
1290
|
gap: var(--sld-gutter-small);
|
|
1291
1291
|
--preset-gutter: var(--sld-gutter-small);
|
|
1292
1292
|
}
|
|
1293
|
-
.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
|
|
1293
|
+
.marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
|
|
1294
1294
|
padding: var(--sld-gutter-med);
|
|
1295
1295
|
gap: var(--sld-gutter-med);
|
|
1296
1296
|
--preset-gutter: var(--sld-gutter-med);
|
|
1297
1297
|
}
|
|
1298
|
-
.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
|
|
1298
|
+
.marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
|
|
1299
1299
|
padding: var(--sld-gutter-kind);
|
|
1300
1300
|
gap: var(--sld-gutter-kind);
|
|
1301
1301
|
--preset-gutter: var(--sld-gutter-kind);
|
|
1302
1302
|
}
|
|
1303
|
-
.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
|
|
1303
|
+
.marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
|
|
1304
1304
|
padding: var(--sld-gutter-default);
|
|
1305
1305
|
gap: var(--sld-gutter-default);
|
|
1306
1306
|
--preset-gutter: var(--sld-gutter-default);
|
|
1307
1307
|
}
|
|
1308
|
-
.marquee
|
|
1309
|
-
display:
|
|
1308
|
+
.marquee-children {
|
|
1309
|
+
display: flex;
|
|
1310
|
+
border: 1px solid red;
|
|
1310
1311
|
}
|
|
1311
|
-
.marquee
|
|
1312
|
+
.marquee-children > * {
|
|
1312
1313
|
border: 1px solid red;
|
|
1313
|
-
width: 90px;
|
|
1314
1314
|
height: 300px;
|
|
1315
1315
|
}
|
|
1316
1316
|
.marquee-controls-prev {
|
|
@@ -3381,20 +3381,6 @@ label {
|
|
|
3381
3381
|
transform: scale(1.1);
|
|
3382
3382
|
}
|
|
3383
3383
|
|
|
3384
|
-
/** auto-complete.scss ----------------*/
|
|
3385
|
-
:root {
|
|
3386
|
-
--auto-complete-pad: var(--sld-pad-medium);
|
|
3387
|
-
--auto-complete-gap: var(--sld-gap-small);
|
|
3388
|
-
}
|
|
3389
|
-
|
|
3390
|
-
.auto-complete-no-results, .auto-complete-boot {
|
|
3391
|
-
padding: var(--auto-complete-pad);
|
|
3392
|
-
gap: var(--auto-complete-gap);
|
|
3393
|
-
display: flex;
|
|
3394
|
-
flex-direction: row;
|
|
3395
|
-
align-items: center;
|
|
3396
|
-
}
|
|
3397
|
-
|
|
3398
3384
|
/** button.scss ----------------*/
|
|
3399
3385
|
:global(:root) {
|
|
3400
3386
|
--sld-button-font-size: inherit;
|
|
@@ -4595,6 +4581,20 @@ label {
|
|
|
4595
4581
|
flex-shrink: 1;
|
|
4596
4582
|
}
|
|
4597
4583
|
|
|
4584
|
+
/** auto-complete.scss ----------------*/
|
|
4585
|
+
:root {
|
|
4586
|
+
--auto-complete-pad: var(--sld-pad-medium);
|
|
4587
|
+
--auto-complete-gap: var(--sld-gap-small);
|
|
4588
|
+
}
|
|
4589
|
+
|
|
4590
|
+
.auto-complete-no-results, .auto-complete-boot {
|
|
4591
|
+
padding: var(--auto-complete-pad);
|
|
4592
|
+
gap: var(--auto-complete-gap);
|
|
4593
|
+
display: flex;
|
|
4594
|
+
flex-direction: row;
|
|
4595
|
+
align-items: center;
|
|
4596
|
+
}
|
|
4597
|
+
|
|
4598
4598
|
/** title-bar.scss ----------------*/
|
|
4599
4599
|
:root {
|
|
4600
4600
|
--title-bar-gap: var(--sld-gap-med);
|
|
@@ -1270,47 +1270,47 @@ li.menuItem .menu-list-item-action {
|
|
|
1270
1270
|
scroll-snap-type: x mandatory;
|
|
1271
1271
|
width: 300px;
|
|
1272
1272
|
}
|
|
1273
|
-
.marquee-container {
|
|
1273
|
+
.marquee :global(-container) {
|
|
1274
1274
|
display: flex;
|
|
1275
1275
|
align-items: center;
|
|
1276
1276
|
--preset-gutter: var(--sld-gutter-default);
|
|
1277
1277
|
}
|
|
1278
|
-
.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
|
|
1278
|
+
.marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
|
|
1279
1279
|
padding: var(--sld-gutter-tiny);
|
|
1280
1280
|
gap: var(--sld-gutter-tiny);
|
|
1281
1281
|
--preset-gutter: var(--sld-gutter-tiny);
|
|
1282
1282
|
}
|
|
1283
|
-
.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
|
|
1283
|
+
.marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
|
|
1284
1284
|
padding: var(--sld-gutter-mini);
|
|
1285
1285
|
gap: var(--sld-gutter-mini);
|
|
1286
1286
|
--preset-gutter: var(--sld-gutter-mini);
|
|
1287
1287
|
}
|
|
1288
|
-
.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
|
|
1288
|
+
.marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
|
|
1289
1289
|
padding: var(--sld-gutter-small);
|
|
1290
1290
|
gap: var(--sld-gutter-small);
|
|
1291
1291
|
--preset-gutter: var(--sld-gutter-small);
|
|
1292
1292
|
}
|
|
1293
|
-
.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
|
|
1293
|
+
.marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
|
|
1294
1294
|
padding: var(--sld-gutter-med);
|
|
1295
1295
|
gap: var(--sld-gutter-med);
|
|
1296
1296
|
--preset-gutter: var(--sld-gutter-med);
|
|
1297
1297
|
}
|
|
1298
|
-
.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
|
|
1298
|
+
.marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
|
|
1299
1299
|
padding: var(--sld-gutter-kind);
|
|
1300
1300
|
gap: var(--sld-gutter-kind);
|
|
1301
1301
|
--preset-gutter: var(--sld-gutter-kind);
|
|
1302
1302
|
}
|
|
1303
|
-
.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
|
|
1303
|
+
.marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
|
|
1304
1304
|
padding: var(--sld-gutter-default);
|
|
1305
1305
|
gap: var(--sld-gutter-default);
|
|
1306
1306
|
--preset-gutter: var(--sld-gutter-default);
|
|
1307
1307
|
}
|
|
1308
|
-
.marquee
|
|
1309
|
-
display:
|
|
1308
|
+
.marquee-children {
|
|
1309
|
+
display: flex;
|
|
1310
|
+
border: 1px solid red;
|
|
1310
1311
|
}
|
|
1311
|
-
.marquee
|
|
1312
|
+
.marquee-children > * {
|
|
1312
1313
|
border: 1px solid red;
|
|
1313
|
-
width: 90px;
|
|
1314
1314
|
height: 300px;
|
|
1315
1315
|
}
|
|
1316
1316
|
.marquee-controls-prev {
|
|
@@ -3381,20 +3381,6 @@ label {
|
|
|
3381
3381
|
transform: scale(1.1);
|
|
3382
3382
|
}
|
|
3383
3383
|
|
|
3384
|
-
/** auto-complete.scss ----------------*/
|
|
3385
|
-
:root {
|
|
3386
|
-
--auto-complete-pad: var(--sld-pad-medium);
|
|
3387
|
-
--auto-complete-gap: var(--sld-gap-small);
|
|
3388
|
-
}
|
|
3389
|
-
|
|
3390
|
-
.auto-complete-no-results, .auto-complete-boot {
|
|
3391
|
-
padding: var(--auto-complete-pad);
|
|
3392
|
-
gap: var(--auto-complete-gap);
|
|
3393
|
-
display: flex;
|
|
3394
|
-
flex-direction: row;
|
|
3395
|
-
align-items: center;
|
|
3396
|
-
}
|
|
3397
|
-
|
|
3398
3384
|
/** button.scss ----------------*/
|
|
3399
3385
|
:global(:root) {
|
|
3400
3386
|
--sld-button-font-size: inherit;
|
|
@@ -4595,6 +4581,20 @@ label {
|
|
|
4595
4581
|
flex-shrink: 1;
|
|
4596
4582
|
}
|
|
4597
4583
|
|
|
4584
|
+
/** auto-complete.scss ----------------*/
|
|
4585
|
+
:root {
|
|
4586
|
+
--auto-complete-pad: var(--sld-pad-medium);
|
|
4587
|
+
--auto-complete-gap: var(--sld-gap-small);
|
|
4588
|
+
}
|
|
4589
|
+
|
|
4590
|
+
.auto-complete-no-results, .auto-complete-boot {
|
|
4591
|
+
padding: var(--auto-complete-pad);
|
|
4592
|
+
gap: var(--auto-complete-gap);
|
|
4593
|
+
display: flex;
|
|
4594
|
+
flex-direction: row;
|
|
4595
|
+
align-items: center;
|
|
4596
|
+
}
|
|
4597
|
+
|
|
4598
4598
|
/** title-bar.scss ----------------*/
|
|
4599
4599
|
:root {
|
|
4600
4600
|
--title-bar-gap: var(--sld-gap-med);
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
import { parameters, componentArgs } from './types.js';
|
|
7
7
|
import Marquee from './Marquee.svelte';
|
|
8
|
+
import Looper from '../../utils/looper/Looper.svelte';
|
|
9
|
+
import { dataOp } from '@medyll/idae-engine';
|
|
8
10
|
|
|
9
11
|
let code = `
|
|
10
12
|
<Marquee >
|
|
@@ -13,23 +15,17 @@
|
|
|
13
15
|
<div></div>
|
|
14
16
|
</Marquee>`;
|
|
15
17
|
</script>
|
|
16
|
-
|
|
18
|
+
|
|
17
19
|
<ComponentDemo component="Marquee">
|
|
18
20
|
<DemoPage component="Rating" {code}>
|
|
19
21
|
<Demoer {parameters} {componentArgs}>
|
|
20
22
|
{#snippet children({ activeParams })}
|
|
21
|
-
<Marquee {...activeParams}>
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<div>thumb</div>
|
|
28
|
-
<div>thumb</div>
|
|
29
|
-
<div>thumb</div>
|
|
30
|
-
<div>thumb</div>
|
|
31
|
-
<div>thumb</div>
|
|
32
|
-
<div>thumb</div>
|
|
23
|
+
<Marquee style="width:450px;height:450px;gap!2rem;border:1px solid black;display:flex;" {...activeParams}>
|
|
24
|
+
<Looper style="display:flex;" data={[...Array(90)].map((_,idx)=>({idx}))} >
|
|
25
|
+
{#snippet children({ item ,idx})}
|
|
26
|
+
<div style="min-width:250px;height:250px;border:1px solid green;" >cell {item?.idx} </div>
|
|
27
|
+
{/snippet}
|
|
28
|
+
</Looper>
|
|
33
29
|
</Marquee>
|
|
34
30
|
{/snippet}
|
|
35
31
|
</Demoer>
|
|
@@ -69,13 +69,13 @@
|
|
|
69
69
|
}
|
|
70
70
|
</script>
|
|
71
71
|
|
|
72
|
-
<div class="marquee-container">
|
|
72
|
+
<div class="marquee-container" {...rest}>
|
|
73
73
|
{#if showControls}
|
|
74
74
|
<div class="marquee-controls-prev">
|
|
75
75
|
<button onclick={scrollPrev}>Précédent</button>
|
|
76
76
|
</div>
|
|
77
77
|
{/if}
|
|
78
|
-
<div bind:this={container} class="marquee"
|
|
78
|
+
<div bind:this={container} class="marquee">
|
|
79
79
|
<Content {gutter} tag="div" class="marquee-children" style="scroll-snap-type: x mandatory;">
|
|
80
80
|
{#if children}{@render children()}{:else}
|
|
81
81
|
<div>enter content or data</div>
|
|
@@ -101,47 +101,47 @@
|
|
|
101
101
|
scroll-snap-type: x mandatory;
|
|
102
102
|
width: 300px;
|
|
103
103
|
}
|
|
104
|
-
.marquee-container {
|
|
104
|
+
.marquee :global(-container) {
|
|
105
105
|
display: flex;
|
|
106
106
|
align-items: center;
|
|
107
107
|
--preset-gutter: var(--sld-gutter-default);
|
|
108
108
|
}
|
|
109
|
-
.marquee-container :global([gutter="tiny"]), .marquee-container :global(.gutter-tiny) {
|
|
109
|
+
.marquee :global(-container) :global([gutter="tiny"]), .marquee :global(-container) :global(.gutter-tiny) {
|
|
110
110
|
padding: var(--sld-gutter-tiny);
|
|
111
111
|
gap: var(--sld-gutter-tiny);
|
|
112
112
|
--preset-gutter: var(--sld-gutter-tiny);
|
|
113
113
|
}
|
|
114
|
-
.marquee-container :global([gutter="mini"]), .marquee-container :global(.gutter-mini) {
|
|
114
|
+
.marquee :global(-container) :global([gutter="mini"]), .marquee :global(-container) :global(.gutter-mini) {
|
|
115
115
|
padding: var(--sld-gutter-mini);
|
|
116
116
|
gap: var(--sld-gutter-mini);
|
|
117
117
|
--preset-gutter: var(--sld-gutter-mini);
|
|
118
118
|
}
|
|
119
|
-
.marquee-container :global([gutter="small"]), .marquee-container :global(.gutter-small) {
|
|
119
|
+
.marquee :global(-container) :global([gutter="small"]), .marquee :global(-container) :global(.gutter-small) {
|
|
120
120
|
padding: var(--sld-gutter-small);
|
|
121
121
|
gap: var(--sld-gutter-small);
|
|
122
122
|
--preset-gutter: var(--sld-gutter-small);
|
|
123
123
|
}
|
|
124
|
-
.marquee-container :global([gutter="med"]), .marquee-container :global(.gutter-med) {
|
|
124
|
+
.marquee :global(-container) :global([gutter="med"]), .marquee :global(-container) :global(.gutter-med) {
|
|
125
125
|
padding: var(--sld-gutter-med);
|
|
126
126
|
gap: var(--sld-gutter-med);
|
|
127
127
|
--preset-gutter: var(--sld-gutter-med);
|
|
128
128
|
}
|
|
129
|
-
.marquee-container :global([gutter="kind"]), .marquee-container :global(.gutter-kind) {
|
|
129
|
+
.marquee :global(-container) :global([gutter="kind"]), .marquee :global(-container) :global(.gutter-kind) {
|
|
130
130
|
padding: var(--sld-gutter-kind);
|
|
131
131
|
gap: var(--sld-gutter-kind);
|
|
132
132
|
--preset-gutter: var(--sld-gutter-kind);
|
|
133
133
|
}
|
|
134
|
-
.marquee-container :global([gutter="default"]), .marquee-container :global(.gutter-default) {
|
|
134
|
+
.marquee :global(-container) :global([gutter="default"]), .marquee :global(-container) :global(.gutter-default) {
|
|
135
135
|
padding: var(--sld-gutter-default);
|
|
136
136
|
gap: var(--sld-gutter-default);
|
|
137
137
|
--preset-gutter: var(--sld-gutter-default);
|
|
138
138
|
}
|
|
139
|
-
.marquee
|
|
140
|
-
display:
|
|
139
|
+
.marquee-children {
|
|
140
|
+
display: flex;
|
|
141
|
+
border: 1px solid red;
|
|
141
142
|
}
|
|
142
|
-
.marquee
|
|
143
|
+
.marquee-children > * {
|
|
143
144
|
border: 1px solid red;
|
|
144
|
-
width: 90px;
|
|
145
145
|
height: 300px;
|
|
146
146
|
}
|
|
147
147
|
.marquee-controls-prev {
|
|
@@ -7,19 +7,25 @@
|
|
|
7
7
|
scroll-snap-type: x mandatory;
|
|
8
8
|
|
|
9
9
|
width: 300px;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
&
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
& {
|
|
11
|
+
:global(-container) {
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
@include ui-gutter-presets;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
& {
|
|
18
|
+
&-children {
|
|
19
|
+
display: flex;
|
|
20
|
+
border: 1px solid red;
|
|
21
|
+
& > * {
|
|
22
|
+
border: 1px solid red;
|
|
23
|
+
height: 300px;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
21
26
|
}
|
|
22
27
|
}
|
|
28
|
+
|
|
23
29
|
&-controls {
|
|
24
30
|
&-prev {
|
|
25
31
|
display: contents;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@medyll/idae-slotui-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.41.0",
|
|
4
4
|
"scope": "@medyll",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -87,8 +87,8 @@
|
|
|
87
87
|
"dependencies": {
|
|
88
88
|
"@iconify/svelte": "^4.0.2",
|
|
89
89
|
"@medyll/cssfabric": "^0.4.2",
|
|
90
|
-
"@medyll/idae-be": "^0.
|
|
91
|
-
"@medyll/idae-engine": "^1.
|
|
90
|
+
"@medyll/idae-be": "^0.40.0",
|
|
91
|
+
"@medyll/idae-engine": "^1.38.0",
|
|
92
92
|
"d3": "^7.9.0",
|
|
93
93
|
"lerna": "^8.1.8",
|
|
94
94
|
"npm-check-updates": "^17.0.2",
|