@streamscloud/kit 0.2.24 → 0.2.26
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.
|
@@ -172,6 +172,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
|
|
|
172
172
|
overflow: hidden;
|
|
173
173
|
}
|
|
174
174
|
.dialog-container__content {
|
|
175
|
+
container-type: inline-size;
|
|
175
176
|
width: 100%;
|
|
176
177
|
max-width: var(--_dialog-container--custom-width, var(--_dialog-container--max-width));
|
|
177
178
|
border-radius: var(--_dialog-container--border-radius);
|
|
@@ -53,6 +53,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
53
53
|
| `--sc-kit--dialog--min-height` | Minimum height | `auto` |
|
|
54
54
|
| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
|
|
55
55
|
| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
|
|
56
|
+
| `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
|
|
56
57
|
| `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
|
|
57
58
|
| `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
|
|
58
59
|
| `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
|
|
@@ -70,6 +71,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
70
71
|
--_dialog--min-height: var(--sc-kit--dialog--min-height, auto);
|
|
71
72
|
--_dialog--padding-block: var(--sc-kit--dialog--padding-block, 1.25rem);
|
|
72
73
|
--_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1.5rem);
|
|
74
|
+
--_dialog--body--overflow-y: var(--sc-kit--dialog--body--overflow-y, visible);
|
|
73
75
|
--_dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
|
|
74
76
|
--_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
|
|
75
77
|
--_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
|
|
@@ -84,6 +86,12 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
84
86
|
color: var(--_dialog--color);
|
|
85
87
|
border-radius: var(--_dialog--border-radius);
|
|
86
88
|
box-shadow: 0 4px 24px var(--_dialog--shadow-color);
|
|
89
|
+
/* Set 'container-type: inline-size;' to reference container*/
|
|
90
|
+
}
|
|
91
|
+
@container (width < 768px) {
|
|
92
|
+
.dialog {
|
|
93
|
+
--_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1rem);
|
|
94
|
+
}
|
|
87
95
|
}
|
|
88
96
|
.dialog__header {
|
|
89
97
|
display: flex;
|
|
@@ -93,6 +101,11 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
93
101
|
gap: 1rem;
|
|
94
102
|
padding: var(--_dialog--header--padding-block) var(--_dialog--header--padding-inline);
|
|
95
103
|
border-bottom: 1px solid var(--_dialog--border-color);
|
|
104
|
+
-webkit-user-drag: none;
|
|
105
|
+
user-select: none;
|
|
106
|
+
}
|
|
107
|
+
.dialog__header :global([contenteditable]) {
|
|
108
|
+
user-select: text;
|
|
96
109
|
}
|
|
97
110
|
.dialog__title {
|
|
98
111
|
flex: 1;
|
|
@@ -103,7 +116,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
103
116
|
.dialog__body {
|
|
104
117
|
flex: 1;
|
|
105
118
|
min-height: 0;
|
|
106
|
-
overflow-y:
|
|
119
|
+
overflow-y: var(--_dialog--body--overflow-y);
|
|
107
120
|
padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
|
|
108
121
|
--_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#d1d5db, #4b5563));
|
|
109
122
|
--_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
|
|
@@ -129,9 +142,15 @@ A structured dialog panel with header (title + close button), scrollable body, a
|
|
|
129
142
|
.dialog__footer {
|
|
130
143
|
display: flex;
|
|
131
144
|
flex-shrink: 0;
|
|
145
|
+
margin-top: auto;
|
|
132
146
|
align-items: center;
|
|
133
147
|
justify-content: flex-end;
|
|
134
148
|
gap: 0.75rem;
|
|
135
149
|
padding: var(--_dialog--padding-block) var(--_dialog--padding-inline);
|
|
136
150
|
border-top: 1px solid var(--_dialog--border-color);
|
|
151
|
+
-webkit-user-drag: none;
|
|
152
|
+
user-select: none;
|
|
153
|
+
}
|
|
154
|
+
.dialog__footer :global([contenteditable]) {
|
|
155
|
+
user-select: text;
|
|
137
156
|
}</style>
|
|
@@ -54,6 +54,7 @@ interface $$IsomorphicComponent {
|
|
|
54
54
|
* | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
|
|
55
55
|
* | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
|
|
56
56
|
* | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
|
|
57
|
+
* | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
|
|
57
58
|
* | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
|
|
58
59
|
* | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
|
|
59
60
|
* | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
|