@medyll/idae-slotui-svelte 0.121.0 → 0.122.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.
Files changed (112) hide show
  1. package/dist/base/icon/Icon.svelte.d.ts +1 -1
  2. package/dist/controls/button/Button.svelte.d.ts +1 -1
  3. package/dist/controls/rating/Rating.svelte.d.ts +1 -1
  4. package/dist/controls/textfield/TextField.svelte.d.ts +1 -1
  5. package/dist/index.d.ts +44 -44
  6. package/dist/index.js +44 -44
  7. package/dist/slotui-css/alert.css +95 -95
  8. package/dist/slotui-css/alert.min.css +95 -95
  9. package/dist/slotui-css/auto-complete.css +11 -11
  10. package/dist/slotui-css/auto-complete.min.css +11 -11
  11. package/dist/slotui-css/avatar.css +12 -12
  12. package/dist/slotui-css/avatar.min.css +12 -12
  13. package/dist/slotui-css/backdrop.css +31 -31
  14. package/dist/slotui-css/backdrop.min.css +31 -31
  15. package/dist/slotui-css/badge.css +15 -15
  16. package/dist/slotui-css/badge.min.css +15 -15
  17. package/dist/slotui-css/boot-menu.css +76 -76
  18. package/dist/slotui-css/boot-menu.min.css +76 -76
  19. package/dist/slotui-css/box.css +28 -28
  20. package/dist/slotui-css/box.min.css +28 -28
  21. package/dist/slotui-css/breadcrumb.css +2 -2
  22. package/dist/slotui-css/breadcrumb.min.css +2 -2
  23. package/dist/slotui-css/button-action.css +7 -7
  24. package/dist/slotui-css/button-action.min.css +7 -7
  25. package/dist/slotui-css/button-menu.css +30 -30
  26. package/dist/slotui-css/button-menu.min.css +30 -30
  27. package/dist/slotui-css/button.css +760 -760
  28. package/dist/slotui-css/button.min.css +760 -760
  29. package/dist/slotui-css/cartouche.css +113 -113
  30. package/dist/slotui-css/cartouche.min.css +113 -113
  31. package/dist/slotui-css/checkbox.css +126 -126
  32. package/dist/slotui-css/checkbox.min.css +126 -126
  33. package/dist/slotui-css/chipper.css +55 -55
  34. package/dist/slotui-css/chipper.min.css +55 -55
  35. package/dist/slotui-css/chrome-frame.css +33 -33
  36. package/dist/slotui-css/chrome-frame.min.css +33 -33
  37. package/dist/slotui-css/confirm.css +8 -8
  38. package/dist/slotui-css/confirm.min.css +8 -8
  39. package/dist/slotui-css/containerConfig.css +6 -6
  40. package/dist/slotui-css/containerConfig.min.css +6 -6
  41. package/dist/slotui-css/content-switcher.css +20 -20
  42. package/dist/slotui-css/content-switcher.min.css +20 -20
  43. package/dist/slotui-css/csss.css +9 -9
  44. package/dist/slotui-css/csss.min.css +9 -9
  45. package/dist/slotui-css/datalist.css +135 -135
  46. package/dist/slotui-css/datalist.min.css +135 -135
  47. package/dist/slotui-css/divider.css +15 -15
  48. package/dist/slotui-css/divider.min.css +15 -15
  49. package/dist/slotui-css/drawer.css +87 -87
  50. package/dist/slotui-css/drawer.min.css +87 -87
  51. package/dist/slotui-css/finder.css +73 -73
  52. package/dist/slotui-css/finder.min.css +73 -73
  53. package/dist/slotui-css/frame.css +48 -48
  54. package/dist/slotui-css/frame.min.css +48 -48
  55. package/dist/slotui-css/icon.css +15 -15
  56. package/dist/slotui-css/icon.min.css +15 -15
  57. package/dist/slotui-css/loader.css +45 -45
  58. package/dist/slotui-css/loader.min.css +45 -45
  59. package/dist/slotui-css/marquee.css +57 -57
  60. package/dist/slotui-css/marquee.min.css +57 -57
  61. package/dist/slotui-css/menu-list.css +216 -216
  62. package/dist/slotui-css/menu-list.min.css +216 -216
  63. package/dist/slotui-css/menu.css +95 -95
  64. package/dist/slotui-css/menu.min.css +95 -95
  65. package/dist/slotui-css/panel.css +24 -24
  66. package/dist/slotui-css/panel.min.css +24 -24
  67. package/dist/slotui-css/paper.css +20 -20
  68. package/dist/slotui-css/paper.min.css +20 -20
  69. package/dist/slotui-css/popper.css +84 -84
  70. package/dist/slotui-css/popper.min.css +84 -84
  71. package/dist/slotui-css/progress.css +19 -19
  72. package/dist/slotui-css/progress.min.css +19 -19
  73. package/dist/slotui-css/rating.css +8 -8
  74. package/dist/slotui-css/rating.min.css +8 -8
  75. package/dist/slotui-css/select.css +10 -10
  76. package/dist/slotui-css/select.min.css +10 -10
  77. package/dist/slotui-css/sheetConfig.css +6 -6
  78. package/dist/slotui-css/sheetConfig.min.css +6 -6
  79. package/dist/slotui-css/slider.css +73 -73
  80. package/dist/slotui-css/slider.min.css +73 -73
  81. package/dist/slotui-css/slotui-css.css +4574 -4574
  82. package/dist/slotui-css/slotui-min-css.css +4574 -4574
  83. package/dist/slotui-css/slotui-sheet.css +294 -294
  84. package/dist/slotui-css/slotui-sheet.min.css +294 -294
  85. package/dist/slotui-css/sorterer.css +10 -10
  86. package/dist/slotui-css/sorterer.min.css +10 -10
  87. package/dist/slotui-css/stepper.css +19 -19
  88. package/dist/slotui-css/stepper.min.css +19 -19
  89. package/dist/slotui-css/stylesheet-container.css +373 -373
  90. package/dist/slotui-css/stylesheet-container.min.css +373 -373
  91. package/dist/slotui-css/stylesheet.css +370 -370
  92. package/dist/slotui-css/stylesheet.min.css +370 -370
  93. package/dist/slotui-css/switch.css +62 -62
  94. package/dist/slotui-css/switch.min.css +62 -62
  95. package/dist/slotui-css/tabs.css +84 -84
  96. package/dist/slotui-css/tabs.min.css +84 -84
  97. package/dist/slotui-css/taskbar.css +24 -24
  98. package/dist/slotui-css/taskbar.min.css +24 -24
  99. package/dist/slotui-css/textfield.css +127 -127
  100. package/dist/slotui-css/textfield.min.css +127 -127
  101. package/dist/slotui-css/title-bar.css +27 -27
  102. package/dist/slotui-css/title-bar.min.css +27 -27
  103. package/dist/slotui-css/toggle-bar.css +40 -40
  104. package/dist/slotui-css/toggle-bar.min.css +40 -40
  105. package/dist/slotui-css/toolbar.css +27 -27
  106. package/dist/slotui-css/toolbar.min.css +27 -27
  107. package/dist/slotui-css/tree.css +49 -49
  108. package/dist/slotui-css/tree.min.css +49 -49
  109. package/dist/slotui-css/window.css +59 -59
  110. package/dist/slotui-css/window.min.css +59 -59
  111. package/dist/ui/toggleBar/ToggleBar.svelte.d.ts +1 -1
  112. package/package.json +4 -4
package/dist/slotui-css/frame.css CHANGED
@@ -1,49 +1,49 @@
1
- :root {
2
- --frame-background-color: var(--sld-color-paper);
3
- --frame-backdrop-filter: blur(30px);
4
- --frame-container-border-right: var(--sld-color-primary);
5
- }
6
-
7
- .frame {
8
- z-index: 1;
9
- height: 100%;
10
- display: flex;
11
- flex-direction: "column";
12
- align-items: flex-start;
13
- overflow: hidden;
14
- position: relative;
15
- background-color: var(--frame-background-color);
16
- --moz-backdrop-filter: var(--frame-backdrop-filter);
17
- backdrop-filter: var(--frame-backdrop-filter);
18
- overflow: hidden;
19
- }
20
- .frame-container {
21
- display: flex;
22
- flex-direction: "row";
23
- align-items: flex-start;
24
- flex: 1 1 0;
25
- position: relative;
26
- overflow: hidden;
27
- }
28
- .frame-container-nav {
29
- display: flex;
30
- flex-direction: "column";
31
- align-items: flex-start;
32
- flex: 1 1 0;
33
- z-index: 1;
34
- border-right: 1px solid var(--frame-container-border-right);
35
- position: relative;
36
- }
37
- .frame-container-main {
38
- flex: 1;
39
- height: 100%;
40
- overflow: hidden;
41
- display: flex;
42
- flex-direction: "column";
43
- align-items: flex-start;
44
- }
45
- .frame-container-main-content {
46
- flex: 1 1 0;
47
- overflow: hidden;
48
- position: relative;
1
+ :root {
2
+ --frame-background-color: var(--sld-color-paper);
3
+ --frame-backdrop-filter: blur(30px);
4
+ --frame-container-border-right: var(--sld-color-primary);
5
+ }
6
+
7
+ .frame {
8
+ z-index: 1;
9
+ height: 100%;
10
+ display: flex;
11
+ flex-direction: "column";
12
+ align-items: flex-start;
13
+ overflow: hidden;
14
+ position: relative;
15
+ background-color: var(--frame-background-color);
16
+ --moz-backdrop-filter: var(--frame-backdrop-filter);
17
+ backdrop-filter: var(--frame-backdrop-filter);
18
+ overflow: hidden;
19
+ }
20
+ .frame-container {
21
+ display: flex;
22
+ flex-direction: "row";
23
+ align-items: flex-start;
24
+ flex: 1 1 0;
25
+ position: relative;
26
+ overflow: hidden;
27
+ }
28
+ .frame-container-nav {
29
+ display: flex;
30
+ flex-direction: "column";
31
+ align-items: flex-start;
32
+ flex: 1 1 0;
33
+ z-index: 1;
34
+ border-right: 1px solid var(--frame-container-border-right);
35
+ position: relative;
36
+ }
37
+ .frame-container-main {
38
+ flex: 1;
39
+ height: 100%;
40
+ overflow: hidden;
41
+ display: flex;
42
+ flex-direction: "column";
43
+ align-items: flex-start;
44
+ }
45
+ .frame-container-main-content {
46
+ flex: 1 1 0;
47
+ overflow: hidden;
48
+ position: relative;
49
49
  }
package/dist/slotui-css/frame.min.css CHANGED
@@ -1,49 +1,49 @@
1
- :root {
2
- --frame-background-color: var(--sld-color-paper);
3
- --frame-backdrop-filter: blur(30px);
4
- --frame-container-border-right: var(--sld-color-primary);
5
- }
6
-
7
- .frame {
8
- z-index: 1;
9
- height: 100%;
10
- display: flex;
11
- flex-direction: "column";
12
- align-items: flex-start;
13
- overflow: hidden;
14
- position: relative;
15
- background-color: var(--frame-background-color);
16
- --moz-backdrop-filter: var(--frame-backdrop-filter);
17
- backdrop-filter: var(--frame-backdrop-filter);
18
- overflow: hidden;
19
- }
20
- .frame-container {
21
- display: flex;
22
- flex-direction: "row";
23
- align-items: flex-start;
24
- flex: 1 1 0;
25
- position: relative;
26
- overflow: hidden;
27
- }
28
- .frame-container-nav {
29
- display: flex;
30
- flex-direction: "column";
31
- align-items: flex-start;
32
- flex: 1 1 0;
33
- z-index: 1;
34
- border-right: 1px solid var(--frame-container-border-right);
35
- position: relative;
36
- }
37
- .frame-container-main {
38
- flex: 1;
39
- height: 100%;
40
- overflow: hidden;
41
- display: flex;
42
- flex-direction: "column";
43
- align-items: flex-start;
44
- }
45
- .frame-container-main-content {
46
- flex: 1 1 0;
47
- overflow: hidden;
48
- position: relative;
1
+ :root {
2
+ --frame-background-color: var(--sld-color-paper);
3
+ --frame-backdrop-filter: blur(30px);
4
+ --frame-container-border-right: var(--sld-color-primary);
5
+ }
6
+
7
+ .frame {
8
+ z-index: 1;
9
+ height: 100%;
10
+ display: flex;
11
+ flex-direction: "column";
12
+ align-items: flex-start;
13
+ overflow: hidden;
14
+ position: relative;
15
+ background-color: var(--frame-background-color);
16
+ --moz-backdrop-filter: var(--frame-backdrop-filter);
17
+ backdrop-filter: var(--frame-backdrop-filter);
18
+ overflow: hidden;
19
+ }
20
+ .frame-container {
21
+ display: flex;
22
+ flex-direction: "row";
23
+ align-items: flex-start;
24
+ flex: 1 1 0;
25
+ position: relative;
26
+ overflow: hidden;
27
+ }
28
+ .frame-container-nav {
29
+ display: flex;
30
+ flex-direction: "column";
31
+ align-items: flex-start;
32
+ flex: 1 1 0;
33
+ z-index: 1;
34
+ border-right: 1px solid var(--frame-container-border-right);
35
+ position: relative;
36
+ }
37
+ .frame-container-main {
38
+ flex: 1;
39
+ height: 100%;
40
+ overflow: hidden;
41
+ display: flex;
42
+ flex-direction: "column";
43
+ align-items: flex-start;
44
+ }
45
+ .frame-container-main-content {
46
+ flex: 1 1 0;
47
+ overflow: hidden;
48
+ position: relative;
49
49
  }
package/dist/slotui-css/icon.css CHANGED
@@ -1,16 +1,16 @@
1
- :global(.icon) {
2
- transition: all 0.2;
3
- }
4
-
5
- .rotate {
6
- animation: spinner-frames 3s infinite linear;
7
- }
8
-
9
- @keyframes spinner-frames {
10
- 0% {
11
- transform: rotate(0deg);
12
- }
13
- 100% {
14
- transform: rotate(360deg);
15
- }
1
+ :global(.icon) {
2
+ transition: all 0.2;
3
+ }
4
+
5
+ .rotate {
6
+ animation: spinner-frames 3s infinite linear;
7
+ }
8
+
9
+ @keyframes spinner-frames {
10
+ 0% {
11
+ transform: rotate(0deg);
12
+ }
13
+ 100% {
14
+ transform: rotate(360deg);
15
+ }
16
16
  }
package/dist/slotui-css/icon.min.css CHANGED
@@ -1,16 +1,16 @@
1
- :global(.icon) {
2
- transition: all 0.2;
3
- }
4
-
5
- .rotate {
6
- animation: spinner-frames 3s infinite linear;
7
- }
8
-
9
- @keyframes spinner-frames {
10
- 0% {
11
- transform: rotate(0deg);
12
- }
13
- 100% {
14
- transform: rotate(360deg);
15
- }
1
+ :global(.icon) {
2
+ transition: all 0.2;
3
+ }
4
+
5
+ .rotate {
6
+ animation: spinner-frames 3s infinite linear;
7
+ }
8
+
9
+ @keyframes spinner-frames {
10
+ 0% {
11
+ transform: rotate(0deg);
12
+ }
13
+ 100% {
14
+ transform: rotate(360deg);
15
+ }
16
16
  }
package/dist/slotui-css/loader.css CHANGED
@@ -1,46 +1,46 @@
1
- :root {
2
- --loader-background-color: var(--sld-color-background-alpha-mid);
3
- --loader-box-shadow: var(--sld-elevation-1);
4
- --loader-radius: var(--sld-radius-tiny);
5
- --loader-border: var(--sld-color-foreground-alpha-high);
6
- --loader-message-border-radius: var(--sld-radius-small);
7
- --loader-message-border-bottom: var(--sld-color-primary);
8
- --loader-message-padding: var(--box-density-1) var(--box-density-2);
9
- }
10
-
11
- .loader {
12
- position: absolute;
13
- top: 0;
14
- background-color: var(--loader-background-color);
15
- height: 100%;
16
- min-width: 128px;
17
- max-width: 100%;
18
- display: inline-flex;
19
- flex-direction: column;
20
- align-items: center;
21
- justify-content: center;
22
- left: 50%;
23
- transform: translate(-50%, 0);
24
- }
25
- .loader .loader-box {
26
- box-shadow: var(--loader-box-shadow);
27
- border-radius: var(--loader-radius);
28
- border: 1px solid var(--loader-border);
29
- padding: 1rem 0;
30
- min-width: 128px;
31
- width: 100%;
32
- margin: 1rem;
33
- text-align: center;
34
- background-color: var(--loader-background-color);
35
- display: flex;
36
- flex-direction: column;
37
- align-items: center;
38
- }
39
- .loader .loader-box .loader-message {
40
- border-radius: var(--loader-message-border-radius);
41
- border-bottom: 1px solid;
42
- border-color: var(--loader-message-border-bottom);
43
- padding: var(--loader-message-padding);
44
- display: inline-block;
45
- box-shadow: var(--loader-box-shadow);
1
+ :root {
2
+ --loader-background-color: var(--sld-color-background-alpha-mid);
3
+ --loader-box-shadow: var(--sld-elevation-1);
4
+ --loader-radius: var(--sld-radius-tiny);
5
+ --loader-border: var(--sld-color-foreground-alpha-high);
6
+ --loader-message-border-radius: var(--sld-radius-small);
7
+ --loader-message-border-bottom: var(--sld-color-primary);
8
+ --loader-message-padding: var(--box-density-1) var(--box-density-2);
9
+ }
10
+
11
+ .loader {
12
+ position: absolute;
13
+ top: 0;
14
+ background-color: var(--loader-background-color);
15
+ height: 100%;
16
+ min-width: 128px;
17
+ max-width: 100%;
18
+ display: inline-flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ justify-content: center;
22
+ left: 50%;
23
+ transform: translate(-50%, 0);
24
+ }
25
+ .loader .loader-box {
26
+ box-shadow: var(--loader-box-shadow);
27
+ border-radius: var(--loader-radius);
28
+ border: 1px solid var(--loader-border);
29
+ padding: 1rem 0;
30
+ min-width: 128px;
31
+ width: 100%;
32
+ margin: 1rem;
33
+ text-align: center;
34
+ background-color: var(--loader-background-color);
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: center;
38
+ }
39
+ .loader .loader-box .loader-message {
40
+ border-radius: var(--loader-message-border-radius);
41
+ border-bottom: 1px solid;
42
+ border-color: var(--loader-message-border-bottom);
43
+ padding: var(--loader-message-padding);
44
+ display: inline-block;
45
+ box-shadow: var(--loader-box-shadow);
46
46
  }
package/dist/slotui-css/loader.min.css CHANGED
@@ -1,46 +1,46 @@
1
- :root {
2
- --loader-background-color: var(--sld-color-background-alpha-mid);
3
- --loader-box-shadow: var(--sld-elevation-1);
4
- --loader-radius: var(--sld-radius-tiny);
5
- --loader-border: var(--sld-color-foreground-alpha-high);
6
- --loader-message-border-radius: var(--sld-radius-small);
7
- --loader-message-border-bottom: var(--sld-color-primary);
8
- --loader-message-padding: var(--box-density-1) var(--box-density-2);
9
- }
10
-
11
- .loader {
12
- position: absolute;
13
- top: 0;
14
- background-color: var(--loader-background-color);
15
- height: 100%;
16
- min-width: 128px;
17
- max-width: 100%;
18
- display: inline-flex;
19
- flex-direction: column;
20
- align-items: center;
21
- justify-content: center;
22
- left: 50%;
23
- transform: translate(-50%, 0);
24
- }
25
- .loader .loader-box {
26
- box-shadow: var(--loader-box-shadow);
27
- border-radius: var(--loader-radius);
28
- border: 1px solid var(--loader-border);
29
- padding: 1rem 0;
30
- min-width: 128px;
31
- width: 100%;
32
- margin: 1rem;
33
- text-align: center;
34
- background-color: var(--loader-background-color);
35
- display: flex;
36
- flex-direction: column;
37
- align-items: center;
38
- }
39
- .loader .loader-box .loader-message {
40
- border-radius: var(--loader-message-border-radius);
41
- border-bottom: 1px solid;
42
- border-color: var(--loader-message-border-bottom);
43
- padding: var(--loader-message-padding);
44
- display: inline-block;
45
- box-shadow: var(--loader-box-shadow);
1
+ :root {
2
+ --loader-background-color: var(--sld-color-background-alpha-mid);
3
+ --loader-box-shadow: var(--sld-elevation-1);
4
+ --loader-radius: var(--sld-radius-tiny);
5
+ --loader-border: var(--sld-color-foreground-alpha-high);
6
+ --loader-message-border-radius: var(--sld-radius-small);
7
+ --loader-message-border-bottom: var(--sld-color-primary);
8
+ --loader-message-padding: var(--box-density-1) var(--box-density-2);
9
+ }
10
+
11
+ .loader {
12
+ position: absolute;
13
+ top: 0;
14
+ background-color: var(--loader-background-color);
15
+ height: 100%;
16
+ min-width: 128px;
17
+ max-width: 100%;
18
+ display: inline-flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ justify-content: center;
22
+ left: 50%;
23
+ transform: translate(-50%, 0);
24
+ }
25
+ .loader .loader-box {
26
+ box-shadow: var(--loader-box-shadow);
27
+ border-radius: var(--loader-radius);
28
+ border: 1px solid var(--loader-border);
29
+ padding: 1rem 0;
30
+ min-width: 128px;
31
+ width: 100%;
32
+ margin: 1rem;
33
+ text-align: center;
34
+ background-color: var(--loader-background-color);
35
+ display: flex;
36
+ flex-direction: column;
37
+ align-items: center;
38
+ }
39
+ .loader .loader-box .loader-message {
40
+ border-radius: var(--loader-message-border-radius);
41
+ border-bottom: 1px solid;
42
+ border-color: var(--loader-message-border-bottom);
43
+ padding: var(--loader-message-padding);
44
+ display: inline-block;
45
+ box-shadow: var(--loader-box-shadow);
46
46
  }
package/dist/slotui-css/marquee.css CHANGED
@@ -1,58 +1,58 @@
1
- .marquee {
2
- flex: 1;
3
- overflow-x: hidden;
4
- scroll-behavior: smooth;
5
- scroll-snap-type: x mandatory;
6
- width: 300px;
7
- }
8
- .marquee-container {
9
- display: flex;
10
- align-items: center;
11
- }
12
- .marquee-container {
13
- --preset-gutter: var(--sld-gutter-default);
14
- }
15
- .marquee-container [gutter=tiny], .marquee-container .gutter-tiny {
16
- padding: var(--sld-gutter-tiny);
17
- gap: var(--sld-gutter-tiny);
18
- --preset-gutter: var(--sld-gutter-tiny);
19
- }
20
- .marquee-container [gutter=mini], .marquee-container .gutter-mini {
21
- padding: var(--sld-gutter-mini);
22
- gap: var(--sld-gutter-mini);
23
- --preset-gutter: var(--sld-gutter-mini);
24
- }
25
- .marquee-container [gutter=small], .marquee-container .gutter-small {
26
- padding: var(--sld-gutter-small);
27
- gap: var(--sld-gutter-small);
28
- --preset-gutter: var(--sld-gutter-small);
29
- }
30
- .marquee-container [gutter=med], .marquee-container .gutter-med {
31
- padding: var(--sld-gutter-med);
32
- gap: var(--sld-gutter-med);
33
- --preset-gutter: var(--sld-gutter-med);
34
- }
35
- .marquee-container [gutter=kind], .marquee-container .gutter-kind {
36
- padding: var(--sld-gutter-kind);
37
- gap: var(--sld-gutter-kind);
38
- --preset-gutter: var(--sld-gutter-kind);
39
- }
40
- .marquee-container [gutter=default], .marquee-container .gutter-default {
41
- padding: var(--sld-gutter-default);
42
- gap: var(--sld-gutter-default);
43
- --preset-gutter: var(--sld-gutter-default);
44
- }
45
- .marquee-children {
46
- display: flex;
47
- border: 1px solid red;
48
- }
49
- .marquee-children > * {
50
- border: 1px solid red;
51
- height: 300px;
52
- }
53
- .marquee-controls-prev {
54
- display: contents;
55
- }
56
- .marquee-controls-next {
57
- display: contents;
1
+ .marquee {
2
+ flex: 1;
3
+ overflow-x: hidden;
4
+ scroll-behavior: smooth;
5
+ scroll-snap-type: x mandatory;
6
+ width: 300px;
7
+ }
8
+ .marquee-container {
9
+ display: flex;
10
+ align-items: center;
11
+ }
12
+ .marquee-container {
13
+ --preset-gutter: var(--sld-gutter-default);
14
+ }
15
+ .marquee-container [gutter=tiny], .marquee-container .gutter-tiny {
16
+ padding: var(--sld-gutter-tiny);
17
+ gap: var(--sld-gutter-tiny);
18
+ --preset-gutter: var(--sld-gutter-tiny);
19
+ }
20
+ .marquee-container [gutter=mini], .marquee-container .gutter-mini {
21
+ padding: var(--sld-gutter-mini);
22
+ gap: var(--sld-gutter-mini);
23
+ --preset-gutter: var(--sld-gutter-mini);
24
+ }
25
+ .marquee-container [gutter=small], .marquee-container .gutter-small {
26
+ padding: var(--sld-gutter-small);
27
+ gap: var(--sld-gutter-small);
28
+ --preset-gutter: var(--sld-gutter-small);
29
+ }
30
+ .marquee-container [gutter=med], .marquee-container .gutter-med {
31
+ padding: var(--sld-gutter-med);
32
+ gap: var(--sld-gutter-med);
33
+ --preset-gutter: var(--sld-gutter-med);
34
+ }
35
+ .marquee-container [gutter=kind], .marquee-container .gutter-kind {
36
+ padding: var(--sld-gutter-kind);
37
+ gap: var(--sld-gutter-kind);
38
+ --preset-gutter: var(--sld-gutter-kind);
39
+ }
40
+ .marquee-container [gutter=default], .marquee-container .gutter-default {
41
+ padding: var(--sld-gutter-default);
42
+ gap: var(--sld-gutter-default);
43
+ --preset-gutter: var(--sld-gutter-default);
44
+ }
45
+ .marquee-children {
46
+ display: flex;
47
+ border: 1px solid red;
48
+ }
49
+ .marquee-children > * {
50
+ border: 1px solid red;
51
+ height: 300px;
52
+ }
53
+ .marquee-controls-prev {
54
+ display: contents;
55
+ }
56
+ .marquee-controls-next {
57
+ display: contents;
58
58
  }
package/dist/slotui-css/marquee.min.css CHANGED
@@ -1,58 +1,58 @@
1
- .marquee {
2
- flex: 1;
3
- overflow-x: hidden;
4
- scroll-behavior: smooth;
5
- scroll-snap-type: x mandatory;
6
- width: 300px;
7
- }
8
- .marquee-container {
9
- display: flex;
10
- align-items: center;
11
- }
12
- .marquee-container {
13
- --preset-gutter: var(--sld-gutter-default);
14
- }
15
- .marquee-container [gutter=tiny], .marquee-container .gutter-tiny {
16
- padding: var(--sld-gutter-tiny);
17
- gap: var(--sld-gutter-tiny);
18
- --preset-gutter: var(--sld-gutter-tiny);
19
- }
20
- .marquee-container [gutter=mini], .marquee-container .gutter-mini {
21
- padding: var(--sld-gutter-mini);
22
- gap: var(--sld-gutter-mini);
23
- --preset-gutter: var(--sld-gutter-mini);
24
- }
25
- .marquee-container [gutter=small], .marquee-container .gutter-small {
26
- padding: var(--sld-gutter-small);
27
- gap: var(--sld-gutter-small);
28
- --preset-gutter: var(--sld-gutter-small);
29
- }
30
- .marquee-container [gutter=med], .marquee-container .gutter-med {
31
- padding: var(--sld-gutter-med);
32
- gap: var(--sld-gutter-med);
33
- --preset-gutter: var(--sld-gutter-med);
34
- }
35
- .marquee-container [gutter=kind], .marquee-container .gutter-kind {
36
- padding: var(--sld-gutter-kind);
37
- gap: var(--sld-gutter-kind);
38
- --preset-gutter: var(--sld-gutter-kind);
39
- }
40
- .marquee-container [gutter=default], .marquee-container .gutter-default {
41
- padding: var(--sld-gutter-default);
42
- gap: var(--sld-gutter-default);
43
- --preset-gutter: var(--sld-gutter-default);
44
- }
45
- .marquee-children {
46
- display: flex;
47
- border: 1px solid red;
48
- }
49
- .marquee-children > * {
50
- border: 1px solid red;
51
- height: 300px;
52
- }
53
- .marquee-controls-prev {
54
- display: contents;
55
- }
56
- .marquee-controls-next {
57
- display: contents;
1
+ .marquee {
2
+ flex: 1;
3
+ overflow-x: hidden;
4
+ scroll-behavior: smooth;
5
+ scroll-snap-type: x mandatory;
6
+ width: 300px;
7
+ }
8
+ .marquee-container {
9
+ display: flex;
10
+ align-items: center;
11
+ }
12
+ .marquee-container {
13
+ --preset-gutter: var(--sld-gutter-default);
14
+ }
15
+ .marquee-container [gutter=tiny], .marquee-container .gutter-tiny {
16
+ padding: var(--sld-gutter-tiny);
17
+ gap: var(--sld-gutter-tiny);
18
+ --preset-gutter: var(--sld-gutter-tiny);
19
+ }
20
+ .marquee-container [gutter=mini], .marquee-container .gutter-mini {
21
+ padding: var(--sld-gutter-mini);
22
+ gap: var(--sld-gutter-mini);
23
+ --preset-gutter: var(--sld-gutter-mini);
24
+ }
25
+ .marquee-container [gutter=small], .marquee-container .gutter-small {
26
+ padding: var(--sld-gutter-small);
27
+ gap: var(--sld-gutter-small);
28
+ --preset-gutter: var(--sld-gutter-small);
29
+ }
30
+ .marquee-container [gutter=med], .marquee-container .gutter-med {
31
+ padding: var(--sld-gutter-med);
32
+ gap: var(--sld-gutter-med);
33
+ --preset-gutter: var(--sld-gutter-med);
34
+ }
35
+ .marquee-container [gutter=kind], .marquee-container .gutter-kind {
36
+ padding: var(--sld-gutter-kind);
37
+ gap: var(--sld-gutter-kind);
38
+ --preset-gutter: var(--sld-gutter-kind);
39
+ }
40
+ .marquee-container [gutter=default], .marquee-container .gutter-default {
41
+ padding: var(--sld-gutter-default);
42
+ gap: var(--sld-gutter-default);
43
+ --preset-gutter: var(--sld-gutter-default);
44
+ }
45
+ .marquee-children {
46
+ display: flex;
47
+ border: 1px solid red;
48
+ }
49
+ .marquee-children > * {
50
+ border: 1px solid red;
51
+ height: 300px;
52
+ }
53
+ .marquee-controls-prev {
54
+ display: contents;
55
+ }
56
+ .marquee-controls-next {
57
+ display: contents;
58
58
  }