@triptease/tt-navbar 0.0.11 → 0.0.14
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/src/TtNavbar.d.ts +5 -0
- package/dist/src/TtNavbar.js +97 -17
- package/dist/src/TtNavbar.js.map +1 -1
- package/dist/src/styles.js +67 -3
- package/dist/src/styles.js.map +1 -1
- package/dist/src/triptease-logo.d.ts +1 -0
- package/dist/src/triptease-logo.js +10 -0
- package/dist/src/triptease-logo.js.map +1 -0
- package/dist/test/tt-navbar.test.js +87 -3
- package/dist/test/tt-navbar.test.js.map +1 -1
- package/dist/web/TtNavbar.js +316 -132
- package/dist/web/TtNavbar.js.map +4 -4
- package/dist/web/index.js +316 -132
- package/dist/web/index.js.map +4 -4
- package/dist/web/styles.js +68 -4
- package/dist/web/styles.js.map +2 -2
- package/dist/web/triptease-logo.js +18 -0
- package/dist/web/triptease-logo.js.map +7 -0
- package/dist/web/tt-navbar.js +316 -132
- package/dist/web/tt-navbar.js.map +4 -4
- package/package.json +1 -1
- package/src/TtNavbar.ts +112 -17
- package/src/styles.ts +68 -3
- package/src/triptease-logo.ts +9 -0
- package/test/tt-navbar.test.ts +136 -7
package/dist/web/styles.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @triptease/tt-navbar v0.0.
|
|
2
|
+
* @triptease/tt-navbar v0.0.14
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
// ../../node_modules/@lit/reactive-element/css-tag.js
|
|
@@ -551,6 +551,18 @@ o4?.({ LitElement: i4 });
|
|
|
551
551
|
(s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.0");
|
|
552
552
|
|
|
553
553
|
// src/styles.ts
|
|
554
|
+
var visuallyHiddenCss = i`
|
|
555
|
+
position: absolute;
|
|
556
|
+
width: 1px;
|
|
557
|
+
height: 1px;
|
|
558
|
+
margin: -1px;
|
|
559
|
+
padding: 0;
|
|
560
|
+
border: 0;
|
|
561
|
+
overflow: hidden;
|
|
562
|
+
clip: rect(0 0 0 0);
|
|
563
|
+
clip-path: inset(50%);
|
|
564
|
+
white-space: nowrap;
|
|
565
|
+
`;
|
|
554
566
|
var styles = i`
|
|
555
567
|
:host {
|
|
556
568
|
--nav-bar-width: 260px;
|
|
@@ -585,6 +597,39 @@ var styles = i`
|
|
|
585
597
|
width: 100%;
|
|
586
598
|
}
|
|
587
599
|
|
|
600
|
+
.nav-items.sidebar-closed {
|
|
601
|
+
a span {
|
|
602
|
+
${visuallyHiddenCss}
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
details summary span {
|
|
606
|
+
${visuallyHiddenCss}
|
|
607
|
+
}
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.sidebar-header {
|
|
611
|
+
width: 100%;
|
|
612
|
+
display: grid;
|
|
613
|
+
grid-template-columns: 1fr auto;
|
|
614
|
+
align-items: center;
|
|
615
|
+
justify-content: center;
|
|
616
|
+
padding: 0 var(--space-scale-2);
|
|
617
|
+
|
|
618
|
+
button {
|
|
619
|
+
background-color: transparent;
|
|
620
|
+
color: var(--color-text-inverted-400);
|
|
621
|
+
border: none;
|
|
622
|
+
}
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.sidebar-header.sidebar-closed {
|
|
626
|
+
padding: 0 var(--space-scale-1);
|
|
627
|
+
.logo {
|
|
628
|
+
display: none;
|
|
629
|
+
visibility: hidden;
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
|
|
588
633
|
hr {
|
|
589
634
|
width: 100%;
|
|
590
635
|
height: 1px;
|
|
@@ -592,7 +637,7 @@ var styles = i`
|
|
|
592
637
|
border: none;
|
|
593
638
|
}
|
|
594
639
|
|
|
595
|
-
|
|
640
|
+
.tertiary-nav {
|
|
596
641
|
display: flex;
|
|
597
642
|
flex-direction: column;
|
|
598
643
|
margin-top: auto;
|
|
@@ -610,6 +655,19 @@ var styles = i`
|
|
|
610
655
|
}
|
|
611
656
|
}
|
|
612
657
|
|
|
658
|
+
.tertiary-nav.sidebar-closed {
|
|
659
|
+
.external-link,
|
|
660
|
+
slot,
|
|
661
|
+
hr {
|
|
662
|
+
display: none;
|
|
663
|
+
visibility: hidden;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
a span {
|
|
667
|
+
${visuallyHiddenCss}
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
|
|
613
671
|
.icon {
|
|
614
672
|
display: flex;
|
|
615
673
|
align-items: center;
|
|
@@ -632,6 +690,10 @@ var styles = i`
|
|
|
632
690
|
}
|
|
633
691
|
}
|
|
634
692
|
|
|
693
|
+
nav.sidebar-closed {
|
|
694
|
+
width: fit-content;
|
|
695
|
+
}
|
|
696
|
+
|
|
635
697
|
details {
|
|
636
698
|
border-radius: var(--border-radius-100);
|
|
637
699
|
|
|
@@ -647,13 +709,13 @@ var styles = i`
|
|
|
647
709
|
}
|
|
648
710
|
}
|
|
649
711
|
|
|
650
|
-
.chevron
|
|
712
|
+
.chevron {
|
|
651
713
|
margin-left: auto;
|
|
652
714
|
margin-right: var(--space-scale-1);
|
|
653
715
|
width: var(--space-scale-2);
|
|
654
716
|
}
|
|
655
717
|
|
|
656
|
-
&[open] .chevron
|
|
718
|
+
&[open] .chevron {
|
|
657
719
|
transform: rotate(180deg);
|
|
658
720
|
}
|
|
659
721
|
|
|
@@ -684,6 +746,8 @@ var styles = i`
|
|
|
684
746
|
}
|
|
685
747
|
|
|
686
748
|
.sub-nav-item {
|
|
749
|
+
width: 100%;
|
|
750
|
+
display: flex;
|
|
687
751
|
padding-left: 44px;
|
|
688
752
|
padding-top: 10px;
|
|
689
753
|
padding-bottom: 10px;
|