@x33025/sveltely 0.0.10 → 0.0.12

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.
@@ -42,15 +42,18 @@
42
42
  {#if left}
43
43
  <div
44
44
  class="h-full overflow-hidden border-r border-gray-200 transition-all duration-300 ease-in-out"
45
- style="width: {leftOpen ? '16rem' : '0'}; opacity: {leftOpen ? '1' : '0'}"
45
+ style="width: {leftOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
46
46
  >
47
- <div class="vstack h-full w-64 overflow-auto bg-gray-50 p-4">
47
+ <div
48
+ class="vstack h-full overflow-auto bg-gray-50 p-4"
49
+ style="width: var(--navigation-stack-sidebar-width);"
50
+ >
48
51
  {@render left()}
49
52
  </div>
50
53
  </div>
51
54
  {/if}
52
55
 
53
- <div class="vstack w-full">
56
+ <div class="vstack flex-1">
54
57
  {#if children}
55
58
  {@render children()}
56
59
  {/if}
@@ -59,9 +62,12 @@
59
62
  {#if right}
60
63
  <div
61
64
  class="h-full overflow-hidden border-l border-gray-200 transition-all duration-300 ease-in-out"
62
- style="width: {rightOpen ? '16rem' : '0'}; opacity: {rightOpen ? '1' : '0'}"
65
+ style="width: {rightOpen ? 'var(--navigation-stack-sidebar-width)' : '0'}"
63
66
  >
64
- <div class="vstack h-full w-64 overflow-auto bg-gray-50 p-4">
67
+ <div
68
+ class="vstack h-full overflow-auto bg-gray-50 p-4"
69
+ style="width: var(--navigation-stack-sidebar-width);"
70
+ >
65
71
  {@render right()}
66
72
  </div>
67
73
  </div>
@@ -17,11 +17,11 @@
17
17
  }
18
18
 
19
19
  .vstack {
20
- @apply flex h-full min-h-0 flex-col;
20
+ @apply flex min-h-0 flex-col;
21
21
  }
22
22
 
23
23
  .hstack {
24
- @apply flex w-full min-w-0 flex-row;
24
+ @apply flex min-w-0 flex-row;
25
25
  }
26
26
 
27
27
  .spacer {
@@ -64,5 +64,7 @@
64
64
  --tooltip-font-size: 12px;
65
65
  --tooltip-background: var(--color-black);
66
66
  --tooltip-text: var(--color-white);
67
+
68
+ --navigation-stack-sidebar-width: 16rem;
67
69
  }
68
70
  }
package/dist/style.css CHANGED
@@ -256,9 +256,6 @@
256
256
  .w-5 {
257
257
  width: calc(var(--spacing) * 5);
258
258
  }
259
- .w-64 {
260
- width: calc(var(--spacing) * 64);
261
- }
262
259
  .w-full {
263
260
  width: 100%;
264
261
  }
@@ -516,13 +513,11 @@
516
513
  }
517
514
  .vstack {
518
515
  display: flex;
519
- height: 100%;
520
516
  min-height: calc(var(--spacing) * 0);
521
517
  flex-direction: column;
522
518
  }
523
519
  .hstack {
524
520
  display: flex;
525
- width: 100%;
526
521
  min-width: calc(var(--spacing) * 0);
527
522
  flex-direction: row;
528
523
  }
@@ -564,6 +559,7 @@
564
559
  --tooltip-font-size: 12px;
565
560
  --tooltip-background: var(--color-black);
566
561
  --tooltip-text: var(--color-white);
562
+ --navigation-stack-sidebar-width: 16rem;
567
563
  }
568
564
  }
569
565
  @property --tw-rotate-x {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x33025/sveltely",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run prepack",