@vsn-ux/gaia-styles 0.6.8 → 0.6.9

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 (9) hide show
  1. package/dist/all-10pt.css +9 -3
  2. package/dist/all-no-reset-10pt.css +9 -3
  3. package/dist/all-no-reset.css +9 -3
  4. package/dist/all.css +9 -3
  5. package/dist/components/side-navigation.css +9 -3
  6. package/dist/components.css +9 -3
  7. package/dist/docs/SideNavigation.md +28 -2
  8. package/package.json +1 -1
  9. package/src/styles/components/side-navigation.css +11 -3
package/dist/all-10pt.css CHANGED
@@ -4657,13 +4657,19 @@
4657
4657
  }
4658
4658
  }
4659
4659
  .ga-side-navigation__item--level-2 {
4660
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4660
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4661
4661
  }
4662
4662
  .ga-side-navigation__item--level-3 {
4663
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4663
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4664
4664
  }
4665
4665
  .ga-side-navigation__item--level-4 {
4666
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4666
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4667
+ }
4668
+ .ga-side-navigation__item--level-5 {
4669
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4670
+ }
4671
+ .ga-side-navigation__item--level-6 {
4672
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4667
4673
  }
4668
4674
  .ga-side-navigation__item-icon {
4669
4675
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/all-no-reset-10pt.css CHANGED
@@ -4504,13 +4504,19 @@
4504
4504
  }
4505
4505
  }
4506
4506
  .ga-side-navigation__item--level-2 {
4507
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4507
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4508
4508
  }
4509
4509
  .ga-side-navigation__item--level-3 {
4510
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4510
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4511
4511
  }
4512
4512
  .ga-side-navigation__item--level-4 {
4513
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4513
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4514
+ }
4515
+ .ga-side-navigation__item--level-5 {
4516
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4517
+ }
4518
+ .ga-side-navigation__item--level-6 {
4519
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4514
4520
  }
4515
4521
  .ga-side-navigation__item-icon {
4516
4522
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/all-no-reset.css CHANGED
@@ -4504,13 +4504,19 @@
4504
4504
  }
4505
4505
  }
4506
4506
  .ga-side-navigation__item--level-2 {
4507
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4507
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4508
4508
  }
4509
4509
  .ga-side-navigation__item--level-3 {
4510
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4510
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4511
4511
  }
4512
4512
  .ga-side-navigation__item--level-4 {
4513
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4513
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4514
+ }
4515
+ .ga-side-navigation__item--level-5 {
4516
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4517
+ }
4518
+ .ga-side-navigation__item--level-6 {
4519
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4514
4520
  }
4515
4521
  .ga-side-navigation__item-icon {
4516
4522
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/all.css CHANGED
@@ -4657,13 +4657,19 @@
4657
4657
  }
4658
4658
  }
4659
4659
  .ga-side-navigation__item--level-2 {
4660
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4660
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4661
4661
  }
4662
4662
  .ga-side-navigation__item--level-3 {
4663
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4663
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4664
4664
  }
4665
4665
  .ga-side-navigation__item--level-4 {
4666
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4666
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4667
+ }
4668
+ .ga-side-navigation__item--level-5 {
4669
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4670
+ }
4671
+ .ga-side-navigation__item--level-6 {
4672
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4667
4673
  }
4668
4674
  .ga-side-navigation__item-icon {
4669
4675
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/components/side-navigation.css CHANGED
@@ -311,13 +311,19 @@
311
311
  }
312
312
  }
313
313
  .ga-side-navigation__item--level-2 {
314
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
314
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
315
315
  }
316
316
  .ga-side-navigation__item--level-3 {
317
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
317
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
318
318
  }
319
319
  .ga-side-navigation__item--level-4 {
320
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
320
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
321
+ }
322
+ .ga-side-navigation__item--level-5 {
323
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
324
+ }
325
+ .ga-side-navigation__item--level-6 {
326
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
321
327
  }
322
328
  .ga-side-navigation__item-icon {
323
329
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/components.css CHANGED
@@ -4159,13 +4159,19 @@ textarea.ga-text-area {
4159
4159
  }
4160
4160
  }
4161
4161
  .ga-side-navigation__item--level-2 {
4162
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 8);
4162
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 10);
4163
4163
  }
4164
4164
  .ga-side-navigation__item--level-3 {
4165
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 14);
4165
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 16);
4166
4166
  }
4167
4167
  .ga-side-navigation__item--level-4 {
4168
- padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 20);
4168
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 22);
4169
+ }
4170
+ .ga-side-navigation__item--level-5 {
4171
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 28);
4172
+ }
4173
+ .ga-side-navigation__item--level-6 {
4174
+ padding-left: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 34);
4169
4175
  }
4170
4176
  .ga-side-navigation__item-icon {
4171
4177
  height: calc(calc(0.25rem * var(--ga-base-scaling-factor, 1)) * 4);
package/dist/docs/SideNavigation.md CHANGED
@@ -115,6 +115,8 @@ ga-side-navigation
115
115
  - `ga-side-navigation__item--level-2` - Second-level tree item
116
116
  - `ga-side-navigation__item--level-3` - Third-level tree item
117
117
  - `ga-side-navigation__item--level-4` - Fourth-level tree item
118
+ - `ga-side-navigation__item--level-5` - Fifth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles)
119
+ - `ga-side-navigation__item--level-6` - Sixth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles)
118
120
 
119
121
  ## Examples
120
122
 
@@ -328,7 +330,7 @@ ga-side-navigation
328
330
  <!-- icon: chevron-down, size=16 -->
329
331
  </span>
330
332
  <div class="ga-side-navigation__item-content">
331
- <div class="ga-side-navigation__item-label">Accounts</div>
333
+ <div class="ga-side-navigation__item-label">Settings</div>
332
334
  </div>
333
335
  </div>
334
336
  <div
@@ -350,11 +352,35 @@ ga-side-navigation
350
352
  </div>
351
353
  </div>
352
354
  <div class="ga-side-navigation__item ga-side-navigation__item--level-3">
353
- <span class="ga-side-navigation__item-icon"></span>
355
+ <span class="ga-side-navigation__item-icon">
356
+ <!-- icon: chevron-down, size=16 -->
357
+ </span>
354
358
  <div class="ga-side-navigation__item-content">
355
359
  <div class="ga-side-navigation__item-label">Account balances</div>
356
360
  </div>
357
361
  </div>
362
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-4">
363
+ <span class="ga-side-navigation__item-icon">
364
+ <!-- icon: chevron-down, size=16 -->
365
+ </span>
366
+ <div class="ga-side-navigation__item-content">
367
+ <div class="ga-side-navigation__item-label">Level 4 label</div>
368
+ </div>
369
+ </div>
370
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-5">
371
+ <span class="ga-side-navigation__item-icon">
372
+ <!-- icon: chevron-down, size=16 -->
373
+ </span>
374
+ <div class="ga-side-navigation__item-content">
375
+ <div class="ga-side-navigation__item-label">Level 5 label</div>
376
+ </div>
377
+ </div>
378
+ <div class="ga-side-navigation__item ga-side-navigation__item--level-6">
379
+ <span class="ga-side-navigation__item-icon"></span>
380
+ <div class="ga-side-navigation__item-content">
381
+ <div class="ga-side-navigation__item-label">Level 6 label</div>
382
+ </div>
383
+ </div>
358
384
  <div class="ga-side-navigation__item ga-side-navigation__item--level-2">
359
385
  <span class="ga-side-navigation__item-icon">
360
386
  <!-- icon: chevron-right, size=16 -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vsn-ux/gaia-styles",
3
- "version": "0.6.8",
3
+ "version": "0.6.9",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "scripts": {
package/src/styles/components/side-navigation.css CHANGED
@@ -161,15 +161,23 @@
161
161
  }
162
162
 
163
163
  .ga-side-navigation__item--level-2 {
164
- @apply pl-8;
164
+ @apply pl-10;
165
165
  }
166
166
 
167
167
  .ga-side-navigation__item--level-3 {
168
- @apply pl-14;
168
+ @apply pl-16;
169
169
  }
170
170
 
171
171
  .ga-side-navigation__item--level-4 {
172
- @apply pl-20;
172
+ @apply pl-22;
173
+ }
174
+
175
+ .ga-side-navigation__item--level-5 {
176
+ @apply pl-28;
177
+ }
178
+
179
+ .ga-side-navigation__item--level-6 {
180
+ @apply pl-34;
173
181
  }
174
182
 
175
183
  .ga-side-navigation__item-icon {