@triptease/tt-navbar 0.0.8 → 0.0.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 (15) hide show
  1. package/dist/src/TtNavbar.js +106 -64
  2. package/dist/src/TtNavbar.js.map +1 -1
  3. package/dist/src/styles.js +160 -45
  4. package/dist/src/styles.js.map +1 -1
  5. package/dist/web/TtNavbar.js +641 -376
  6. package/dist/web/TtNavbar.js.map +4 -4
  7. package/dist/web/index.js +641 -376
  8. package/dist/web/index.js.map +4 -4
  9. package/dist/web/styles.js +161 -46
  10. package/dist/web/styles.js.map +2 -2
  11. package/dist/web/tt-navbar.js +641 -376
  12. package/dist/web/tt-navbar.js.map +4 -4
  13. package/package.json +2 -1
  14. package/src/TtNavbar.ts +106 -64
  15. package/src/styles.ts +160 -45
package/dist/web/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @triptease/tt-navbar v0.0.8
2
+ * @triptease/tt-navbar v0.0.9
3
3
  */
4
4
 
5
5
  // ../../node_modules/@lit/reactive-element/css-tag.js
@@ -564,7 +564,7 @@ var styles = i`
564
564
  }
565
565
 
566
566
  nav {
567
- min-width: var(--nav-bar-width);
567
+ max-width: var(--nav-bar-width);
568
568
  width: var(--nav-bar-width);
569
569
  min-height: 100vh;
570
570
  height: max-content;
@@ -576,58 +576,63 @@ var styles = i`
576
576
  color: var(--color-text-inverted-400);
577
577
  padding-top: var(--space-scale-2);
578
578
  padding-bottom: var(--space-scale-2);
579
- }
579
+ z-index: 1;
580
580
 
581
- nav details div {
582
- display: flex;
583
- flex-direction: column;
584
- }
581
+ .nav-items {
582
+ display: flex;
583
+ flex-direction: column;
584
+ padding: 0 var(--space-scale-1);
585
+ width: 100%;
586
+ }
585
587
 
586
- hr {
587
- width: 100%;
588
- height: 1px;
589
- background-color: var(--color-surface-inverted-200);
590
- border: none;
591
- }
588
+ hr {
589
+ width: 100%;
590
+ height: 1px;
591
+ background-color: var(--color-surface-inverted-200);
592
+ border: none;
593
+ }
592
594
 
593
- #tertiary-nav {
594
- display: flex;
595
- flex-direction: column;
596
- margin-top: auto;
597
- gap: var(--space-scale-2);
598
- width: 100%;
595
+ #tertiary-nav {
596
+ display: flex;
597
+ flex-direction: column;
598
+ margin-top: auto;
599
+ gap: var(--space-scale-2);
600
+ width: 100%;
599
601
 
600
- .external-link {
601
- font-size: var(--font-size-100);
602
- line-height: var(--font-line-height-100);
602
+ .external-link {
603
+ font-size: var(--font-size-100);
604
+ line-height: var(--font-line-height-100);
603
605
 
604
- .icon {
605
- width: var(--space-scale-2);
606
- height: var(--space-scale-2);
606
+ .icon {
607
+ width: var(--space-scale-2);
608
+ height: var(--space-scale-2);
609
+ }
607
610
  }
608
611
  }
609
- }
610
612
 
611
- .icon {
612
- width: var(--space-scale-3);
613
- height: var(--space-scale-3);
614
- display: inline;
615
- color: var(--nav-item-color);
616
- }
613
+ .icon {
614
+ display: flex;
615
+ align-items: center;
616
+ width: var(--space-scale-3);
617
+ height: var(--space-scale-3);
618
+ color: var(--nav-item-color);
619
+ }
617
620
 
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%;
621
+ .nav-item {
622
+ display: flex;
623
+ font-size: var(--font-size-100);
624
+ line-height: var(--font-line-height-100);
625
+ gap: var(--space-scale-1-5);
626
+ border-radius: var(--border-radius-100);
627
+ color: var(--nav-item-color);
628
+ align-items: center;
629
+ padding: var(--space-scale-1);
630
+ width: 100%;
631
+ text-decoration: none;
632
+ }
627
633
  }
628
634
 
629
635
  details {
630
- width: 100%;
631
636
  border-radius: var(--border-radius-100);
632
637
 
633
638
  summary {
@@ -642,13 +647,13 @@ var styles = i`
642
647
  }
643
648
  }
644
649
 
645
- svg.chevron {
650
+ .chevron > svg {
646
651
  margin-left: auto;
647
652
  margin-right: var(--space-scale-1);
648
653
  width: var(--space-scale-2);
649
654
  }
650
655
 
651
- &[open] svg.chevron {
656
+ &[open] .chevron > svg {
652
657
  transform: rotate(180deg);
653
658
  }
654
659
 
@@ -685,6 +690,7 @@ var styles = i`
685
690
  color: var(--color-text-inverted-400);
686
691
  font-size: var(--font-size-100);
687
692
  line-height: var(--font-line-height-100);
693
+ text-decoration: none;
688
694
 
689
695
  button {
690
696
  color: var(--color-text-inverted-400);
@@ -694,8 +700,8 @@ var styles = i`
694
700
 
695
701
  .sub-nav-item:hover,
696
702
  .sub-nav-item:focus-visible,
697
- a:hover,
698
- a:focus-visible {
703
+ .nav-item:hover,
704
+ .nav-item:focus-visible {
699
705
  background-color: var(--color-surface-inverted-200);
700
706
  border-radius: var(--border-radius-100);
701
707
  text-decoration: none;
@@ -706,7 +712,116 @@ var styles = i`
706
712
  }
707
713
  }
708
714
 
715
+ .current-page {
716
+ --nav-item-color: var(--color-primary-400);
717
+ border-radius: var(--border-radius-100);
718
+ background-color: var(--color-primary-100);
719
+ color: var(--nav-item-color);
720
+ }
721
+
722
+ .link-page {
723
+ display: flex;
724
+ position: absolute;
725
+ overflow: auto;
726
+ flex-direction: column;
727
+ gap: var(--space-scale-4);
728
+ padding: var(--space-scale-5);
729
+ left: var(--nav-bar-width);
730
+ background-color: var(--color-surface-200);
731
+ width: calc(100% - var(--nav-bar-width));
732
+ height: 100%;
733
+ transition-property: left, visibility;
734
+ transition-duration: 700ms, 400ms;
735
+ transition-timing-function: ease-out, ease-in;
736
+
737
+ &.hidden {
738
+ left: -100%;
739
+ visibility: hidden;
740
+ }
741
+ }
742
+
743
+ .link-page > .section {
744
+ display: flex;
745
+ flex-direction: column;
746
+ gap: var(--space-scale-2);
747
+ }
748
+
749
+ .section > .links-container {
750
+ display: grid;
751
+ grid-template-columns: repeat(3, 1fr);
752
+ gap: var(--space-scale-3);
753
+ overflow-y: auto;
754
+ height: 100%;
755
+ }
756
+
757
+ .visually-hidden {
758
+ position: absolute;
759
+ width: 1px;
760
+ height: 1px;
761
+ margin: -1px;
762
+ padding: 0;
763
+ border: 0;
764
+ overflow: hidden;
765
+ clip: rect(0 0 0 0);
766
+ clip-path: inset(50%);
767
+ white-space: nowrap;
768
+ }
769
+
770
+ .tooltip {
771
+ position: absolute;
772
+ display: flex;
773
+ white-space: nowrap;
774
+ align-items: center;
775
+ gap: var(--space-scale-1);
776
+ color: black;
777
+ background-color: var(--color-surface-600);
778
+ padding: var(--space-scale-1);
779
+ z-index: 1000;
780
+ border-radius: var(--border-radius-50);
781
+ font-weight: var(--font-weight-medium);
782
+ }
783
+
784
+ .auth-container {
785
+ display: flex;
786
+ align-items: center;
787
+ justify-content: center;
788
+ min-height: 100vh;
789
+ }
790
+
791
+ .error-container {
792
+ padding: 4rem 1rem 1rem;
793
+ max-width: 1280px;
794
+ margin-left: auto;
795
+ margin-right: auto;
796
+ }
797
+
798
+ .error-stack {
799
+ width: 100%;
800
+ padding: 1rem;
801
+ overflow-x: auto;
802
+ }
803
+
804
+ .fullscreen-iframe {
805
+ width: 100%;
806
+ height: 100vh;
807
+ border: 0;
808
+ }
709
809
 
810
+ .nav-toggle-button {
811
+ position: relative;
812
+ }
813
+
814
+ .nav-toggle-tooltip {
815
+ left: 100%;
816
+ top: 100%;
817
+ visibility: hidden;
818
+ opacity: 0;
819
+ }
820
+
821
+ .nav-toggle-button:hover .nav-toggle-tooltip {
822
+ visibility: visible;
823
+ opacity: 1;
824
+ }
710
825
  `;
711
826
  export {
712
827
  styles