@onsvisual/svelte-components 1.1.20 → 1.1.22
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/components/AnalyticsBanner/AnalyticsBanner.svelte +0 -4
- package/dist/components/Scroller/Scroller.svelte +11 -6
- package/dist/components/Scroller/ScrollerSection.svelte +2 -1
- package/dist/components/Textarea/Textarea.svelte +1 -1
- package/dist/components/Toolbar/HelpModal.svelte +2 -2
- package/package.json +1 -1
|
@@ -142,21 +142,26 @@
|
|
|
142
142
|
*/
|
|
143
143
|
export let cls = null;
|
|
144
144
|
|
|
145
|
-
const sections = writable([]);
|
|
146
|
-
setContext("sections", sections);
|
|
147
|
-
|
|
148
145
|
let scroller;
|
|
149
146
|
let outer;
|
|
150
147
|
let foreground;
|
|
151
148
|
let background;
|
|
152
149
|
let left;
|
|
153
150
|
let wh = 0;
|
|
151
|
+
let ww = 0;
|
|
154
152
|
let fixed;
|
|
155
153
|
let offset_top = 0;
|
|
156
154
|
let width = 1;
|
|
157
155
|
let height;
|
|
158
156
|
let inverted;
|
|
159
157
|
|
|
158
|
+
const sections = writable([]);
|
|
159
|
+
setContext("sections", sections);
|
|
160
|
+
|
|
161
|
+
const isSplit = writable();
|
|
162
|
+
$: isSplit.set(splitscreen && ww >= 992);
|
|
163
|
+
setContext("isSplit", isSplit);
|
|
164
|
+
|
|
160
165
|
$: top_px = Math.round(top * wh);
|
|
161
166
|
$: bottom_px = Math.round(bottom * wh);
|
|
162
167
|
$: threshold_px = Math.round(threshold * wh);
|
|
@@ -250,7 +255,7 @@
|
|
|
250
255
|
}
|
|
251
256
|
</script>
|
|
252
257
|
|
|
253
|
-
<svelte:window bind:innerHeight={wh} />
|
|
258
|
+
<svelte:window bind:innerHeight={wh} bind:innerWidth={ww} />
|
|
254
259
|
|
|
255
260
|
{#if marginTop}
|
|
256
261
|
<div class="ons-u-mt-xl"></div>
|
|
@@ -332,7 +337,7 @@
|
|
|
332
337
|
}
|
|
333
338
|
|
|
334
339
|
:global([slot="foreground"] section > div:before) {
|
|
335
|
-
background-color: var(--
|
|
340
|
+
background-color: var(--ons-color-page-light);
|
|
336
341
|
opacity: 80%;
|
|
337
342
|
}
|
|
338
343
|
|
|
@@ -362,7 +367,7 @@
|
|
|
362
367
|
width: 480px;
|
|
363
368
|
max-width: 35%;
|
|
364
369
|
margin: 0 auto 0 0;
|
|
365
|
-
background-color: var(--
|
|
370
|
+
background-color: var(--ons-color-page-light);
|
|
366
371
|
}
|
|
367
372
|
}
|
|
368
373
|
</style>
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
let section;
|
|
27
27
|
|
|
28
28
|
const sections = getContext("sections");
|
|
29
|
+
const isSplit = getContext("isSplit");
|
|
29
30
|
|
|
30
31
|
onMount(() => {
|
|
31
32
|
if (sections) {
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
</script>
|
|
42
43
|
|
|
43
44
|
<section data-id={id} bind:this={section} class={cls}>
|
|
44
|
-
<Container width="narrow">
|
|
45
|
+
<Container width={$isSplit ? "wider" : "narrow"}>
|
|
45
46
|
<div class="ons-scroller-section">
|
|
46
47
|
{#if title}
|
|
47
48
|
<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
|
|
209
209
|
button.btn-link {
|
|
210
210
|
line-height: 1.3;
|
|
211
|
-
color: var(--link, #206095);
|
|
211
|
+
color: var(--ons-color-text-link, #206095);
|
|
212
212
|
background: none;
|
|
213
213
|
margin: 0;
|
|
214
214
|
padding: 0;
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
text-underline-position: under;
|
|
219
219
|
}
|
|
220
220
|
button.btn-link:hover {
|
|
221
|
-
color: var(--link-hover, #003c57) !important;
|
|
221
|
+
color: var(--ons-color-text-link-hover, #003c57) !important;
|
|
222
222
|
text-decoration-thickness: 2px;
|
|
223
223
|
}
|
|
224
224
|
button.btn-link:focus {
|