@triptease/tt-navbar 0.0.6 → 0.0.8

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 (22) hide show
  1. package/dist/src/TtNavbar.js +2 -2
  2. package/dist/src/TtNavbar.js.map +1 -1
  3. package/dist/src/styles.js +140 -2
  4. package/dist/src/styles.js.map +1 -1
  5. package/dist/stories/index.stories.js +1 -2
  6. package/dist/stories/index.stories.js.map +1 -1
  7. package/dist/test/tt-navbar.test.js +4 -4
  8. package/dist/test/tt-navbar.test.js.map +1 -1
  9. package/dist/web/TtNavbar.js +143 -5
  10. package/dist/web/TtNavbar.js.map +2 -2
  11. package/dist/web/index.js +143 -5
  12. package/dist/web/index.js.map +2 -2
  13. package/dist/web/styles.js +141 -3
  14. package/dist/web/styles.js.map +2 -2
  15. package/dist/web/tt-navbar.js +143 -5
  16. package/dist/web/tt-navbar.js.map +2 -2
  17. package/package.json +1 -1
  18. package/src/TtNavbar.ts +2 -2
  19. package/src/styles.ts +140 -2
  20. package/stories/index.stories.ts +1 -5
  21. package/test/tt-navbar.test.ts +4 -4
  22. package/demo/index.html +0 -30
package/dist/web/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @triptease/tt-navbar v0.0.6
2
+ * @triptease/tt-navbar v0.0.8
3
3
  */
4
4
 
5
5
  // ../../node_modules/@lit/reactive-element/css-tag.js
@@ -552,10 +552,30 @@ o4?.({ LitElement: i4 });
552
552
 
553
553
  // src/styles.ts
554
554
  var styles = i`
555
+ :host {
556
+ --nav-bar-width: 260px;
557
+
558
+ display: block;
559
+ height: 100vh;
560
+ }
561
+
562
+ * {
563
+ box-sizing: border-box;
564
+ }
565
+
555
566
  nav {
556
- max-width: 260px;
567
+ min-width: var(--nav-bar-width);
568
+ width: var(--nav-bar-width);
569
+ min-height: 100vh;
570
+ height: max-content;
557
571
  display: flex;
572
+ align-items: start;
573
+ gap: var(--space-scale-3-5);
558
574
  flex-direction: column;
575
+ background-color: var(--color-surface-inverted-100);
576
+ color: var(--color-text-inverted-400);
577
+ padding-top: var(--space-scale-2);
578
+ padding-bottom: var(--space-scale-2);
559
579
  }
560
580
 
561
581
  nav details div {
@@ -564,11 +584,129 @@ var styles = i`
564
584
  }
565
585
 
566
586
  hr {
567
- background: black;
568
587
  width: 100%;
569
588
  height: 1px;
589
+ background-color: var(--color-surface-inverted-200);
570
590
  border: none;
571
591
  }
592
+
593
+ #tertiary-nav {
594
+ display: flex;
595
+ flex-direction: column;
596
+ margin-top: auto;
597
+ gap: var(--space-scale-2);
598
+ width: 100%;
599
+
600
+ .external-link {
601
+ font-size: var(--font-size-100);
602
+ line-height: var(--font-line-height-100);
603
+
604
+ .icon {
605
+ width: var(--space-scale-2);
606
+ height: var(--space-scale-2);
607
+ }
608
+ }
609
+ }
610
+
611
+ .icon {
612
+ width: var(--space-scale-3);
613
+ height: var(--space-scale-3);
614
+ display: inline;
615
+ color: var(--nav-item-color);
616
+ }
617
+
618
+ a {
619
+ font-size: var(--font-size-100);
620
+ line-height: var(--font-line-height-100);
621
+ gap: var(--space-scale-1-5);
622
+ border-radius: var(--border-radius-100);
623
+ color: var(--nav-item-color);
624
+ text-decoration: none;
625
+ padding: var(--space-scale-1);
626
+ width: 100%;
627
+ }
628
+
629
+ details {
630
+ width: 100%;
631
+ border-radius: var(--border-radius-100);
632
+
633
+ summary {
634
+ font-size: var(--font-size-100);
635
+ line-height: var(--font-line-height-100);
636
+ position: relative;
637
+ display: flex;
638
+ align-items: baseline;
639
+
640
+ &::marker {
641
+ content: '';
642
+ }
643
+ }
644
+
645
+ svg.chevron {
646
+ margin-left: auto;
647
+ margin-right: var(--space-scale-1);
648
+ width: var(--space-scale-2);
649
+ }
650
+
651
+ &[open] svg.chevron {
652
+ transform: rotate(180deg);
653
+ }
654
+
655
+ .dropdown-items {
656
+ display: flex;
657
+ flex-direction: column;
658
+ }
659
+ }
660
+
661
+ details > summary {
662
+ display: flex;
663
+ gap: var(--space-scale-1-5);
664
+ padding: var(--space-scale-1);
665
+ border-radius: var(--border-radius-100);
666
+ color: var(--nav-item-color);
667
+ align-items: center;
668
+
669
+ a {
670
+ color: var(--nav-item-color);
671
+ }
672
+
673
+ &:hover,
674
+ &:focus-visible {
675
+ background-color: var(--color-surface-inverted-200);
676
+ border-radius: var(--border-radius-100);
677
+ text-decoration: none;
678
+ }
679
+ }
680
+
681
+ .sub-nav-item {
682
+ padding-left: 44px;
683
+ padding-top: 10px;
684
+ padding-bottom: 10px;
685
+ color: var(--color-text-inverted-400);
686
+ font-size: var(--font-size-100);
687
+ line-height: var(--font-line-height-100);
688
+
689
+ button {
690
+ color: var(--color-text-inverted-400);
691
+ padding: 0;
692
+ }
693
+ }
694
+
695
+ .sub-nav-item:hover,
696
+ .sub-nav-item:focus-visible,
697
+ a:hover,
698
+ a:focus-visible {
699
+ background-color: var(--color-surface-inverted-200);
700
+ border-radius: var(--border-radius-100);
701
+ text-decoration: none;
702
+ color: var(--color-text-inverted-400);
703
+
704
+ .icon {
705
+ color: var(--color-text-inverted-400);
706
+ }
707
+ }
708
+
709
+
572
710
  `;
573
711
  export {
574
712
  styles