@triptease/tt-navbar 0.0.28 → 0.0.29
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/styles.js +10 -1
- package/dist/src/styles.js.map +1 -1
- package/dist/web/Routes.js +1 -1
- package/dist/web/TtNavbar.js +11 -2
- package/dist/web/TtNavbar.js.map +2 -2
- package/dist/web/index.js +11 -2
- package/dist/web/index.js.map +2 -2
- package/dist/web/styles.js +11 -2
- package/dist/web/styles.js.map +2 -2
- package/dist/web/triptease-logo.js +1 -1
- package/dist/web/tt-navbar.js +11 -2
- package/dist/web/tt-navbar.js.map +2 -2
- package/dist/web/urlMappings.js +1 -1
- package/package.json +1 -1
- package/src/styles.ts +10 -1
package/dist/src/styles.js
CHANGED
|
@@ -13,12 +13,17 @@ const visuallyHiddenCss = css `
|
|
|
13
13
|
`;
|
|
14
14
|
export const styles = css `
|
|
15
15
|
:host {
|
|
16
|
-
--nav-bar-width:
|
|
16
|
+
--nav-bar-width: 250px;
|
|
17
17
|
|
|
18
18
|
display: block;
|
|
19
19
|
height: 100vh;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
:host:has(.sidebar-closed) {
|
|
23
|
+
--nav-bar-width: fit-content;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
|
|
22
27
|
* {
|
|
23
28
|
box-sizing: border-box;
|
|
24
29
|
}
|
|
@@ -140,6 +145,10 @@ export const styles = css `
|
|
|
140
145
|
|
|
141
146
|
nav.sidebar-closed {
|
|
142
147
|
width: fit-content;
|
|
148
|
+
|
|
149
|
+
:host {
|
|
150
|
+
--nav-bar-width: fit-content;
|
|
151
|
+
}
|
|
143
152
|
}
|
|
144
153
|
|
|
145
154
|
details {
|
package/dist/src/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;CAW5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAyCf,iBAAiB;;;;UAIjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6DjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkQ1B,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst visuallyHiddenCss = css`\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n`;\n\nexport const styles = css`\n :host {\n --nav-bar-width: 250px;\n\n display: block;\n height: 100vh;\n }\n\n :host:has(.sidebar-closed) {\n --nav-bar-width: fit-content;\n }\n\n\n * {\n box-sizing: border-box;\n }\n\n nav {\n max-width: var(--nav-bar-width);\n width: var(--nav-bar-width);\n min-height: 100vh;\n height: max-content;\n display: flex;\n align-items: start;\n gap: var(--space-scale-3-5);\n flex-direction: column;\n background-color: var(--color-surface-inverted-100);\n color: var(--color-text-inverted-400);\n padding-top: var(--space-scale-2);\n padding-bottom: var(--space-scale-2);\n z-index: 1;\n\n .nav-items {\n display: flex;\n flex-direction: column;\n padding: 0 var(--space-scale-1);\n width: 100%;\n }\n\n .nav-items.sidebar-closed {\n a span {\n ${visuallyHiddenCss}\n }\n\n details summary span {\n ${visuallyHiddenCss}\n }\n }\n\n .sidebar-header {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-scale-2);\n\n button {\n background-color: transparent;\n color: var(--color-text-inverted-400);\n border: none;\n }\n }\n\n .sidebar-header.sidebar-closed {\n padding: 0 var(--space-scale-1);\n .logo {\n display: none;\n visibility: hidden;\n }\n }\n\n hr {\n width: 100%;\n height: 1px;\n background-color: var(--color-surface-inverted-200);\n border: none;\n }\n\n .tertiary-nav {\n display: flex;\n flex-direction: column;\n margin-top: auto;\n gap: var(--space-scale-2);\n width: 100%;\n\n .external-link {\n font-size: var(--font-size-100);\n line-height: var(--font-line-height-100);\n\n .icon {\n width: var(--space-scale-2);\n height: var(--space-scale-2);\n }\n }\n }\n\n .tertiary-nav.sidebar-closed {\n .external-link,\n hr,\n #client-selector {\n display: none;\n visibility: hidden;\n }\n\n a span {\n ${visuallyHiddenCss}\n }\n }\n\n .icon {\n display: flex;\n align-items: center;\n width: var(--space-scale-3);\n height: var(--space-scale-3);\n color: var(--nav-item-color);\n }\n\n .nav-item {\n display: flex;\n font-size: var(--font-size-100);\n line-height: var(--font-line-height-100);\n gap: var(--space-scale-1-5);\n border-radius: var(--border-radius-100);\n color: var(--nav-item-color);\n align-items: center;\n padding: var(--space-scale-1);\n width: 100%;\n text-decoration: none;\n }\n }\n\n nav.sidebar-closed {\n width: fit-content;\n\n :host {\n --nav-bar-width: fit-content;\n }\n }\n\n details {\n border-radius: var(--border-radius-100);\n\n summary {\n font-size: var(--font-size-100);\n line-height: var(--font-line-height-100);\n position: relative;\n display: flex;\n align-items: baseline;\n\n &::marker {\n content: '';\n }\n }\n\n .chevron {\n margin-left: auto;\n margin-right: var(--space-scale-1);\n width: var(--space-scale-2);\n }\n\n &[open] .chevron {\n transform: rotate(180deg);\n }\n\n .dropdown-items {\n display: flex;\n flex-direction: column;\n }\n }\n\n details > summary {\n display: flex;\n gap: var(--space-scale-1-5);\n padding: var(--space-scale-1);\n border-radius: var(--border-radius-100);\n color: var(--nav-item-color);\n align-items: center;\n\n a {\n color: var(--nav-item-color);\n }\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-surface-inverted-200);\n border-radius: var(--border-radius-100);\n text-decoration: none;\n }\n }\n\n .sidebar-closed details:has(.current-page) > summary {\n --nav-item-color: var(--color-primary-400);\n border-radius: var(--border-radius-100);\n background-color: var(--color-primary-100);\n color: var(--nav-item-color);\n }\n\n .sub-nav-item {\n width: 100%;\n display: flex;\n padding-left: 44px;\n padding-top: 10px;\n padding-bottom: 10px;\n color: var(--color-text-inverted-400);\n font-size: var(--font-size-100);\n line-height: var(--font-line-height-100);\n text-decoration: none;\n\n button {\n color: var(--color-text-inverted-400);\n padding: 0;\n }\n }\n\n .sub-nav-item:hover,\n .sub-nav-item:focus-visible,\n .nav-item:hover,\n .nav-item:focus-visible {\n background-color: var(--color-surface-inverted-200);\n border-radius: var(--border-radius-100);\n text-decoration: none;\n color: var(--color-text-inverted-400);\n\n .icon {\n color: var(--color-text-inverted-400);\n }\n }\n\n .current-page {\n --nav-item-color: var(--color-primary-400);\n border-radius: var(--border-radius-100);\n background-color: var(--color-primary-100);\n color: var(--nav-item-color);\n }\n\n .link-page {\n display: flex;\n position: absolute;\n overflow: auto;\n flex-direction: column;\n gap: var(--space-scale-4);\n padding: var(--space-scale-5);\n left: var(--nav-bar-width);\n background-color: var(--color-surface-200);\n width: calc(100% - var(--nav-bar-width));\n height: 100%;\n transition-property: left, visibility;\n transition-duration: 700ms, 400ms;\n transition-timing-function: ease-out, ease-in;\n\n &.hidden {\n left: -100%;\n visibility: hidden;\n }\n }\n\n .link-page > .section {\n display: flex;\n flex-direction: column;\n gap: var(--space-scale-2);\n }\n\n .section > .links-container {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: var(--space-scale-3);\n overflow-y: auto;\n height: 100%;\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n white-space: nowrap;\n }\n\n .tooltip {\n position: absolute;\n display: flex;\n white-space: nowrap;\n align-items: center;\n gap: var(--space-scale-1);\n color: black;\n background-color: var(--color-surface-600);\n padding: var(--space-scale-1);\n z-index: 1000;\n border-radius: var(--border-radius-50);\n font-weight: var(--font-weight-medium);\n }\n\n .auth-container {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n }\n\n .error-container {\n padding: 4rem 1rem 1rem;\n max-width: 1280px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .error-stack {\n width: 100%;\n padding: 1rem;\n overflow-x: auto;\n }\n\n .fullscreen-iframe {\n width: 100%;\n height: 100vh;\n border: 0;\n }\n\n .nav-toggle-button {\n position: relative;\n }\n\n .nav-toggle-tooltip {\n left: 100%;\n top: 100%;\n visibility: hidden;\n opacity: 0;\n }\n\n .nav-toggle-button:hover .nav-toggle-tooltip {\n visibility: visible;\n opacity: 1;\n }\n\n #client-selector {\n display: flex;\n align-items: center;\n }\n\n #client-selector tt-combobox {\n --tt-combobox-color: var(--color-text-inverted-400);\n --tt-combobox-dropdown-color: var(--color-text-inverted-400);\n --tt-combobox-list-background-color: var(--color-surface-inverted-100);\n --tt-combobox-option-background-color-hover: var(--color-surface-inverted-200);\n --tt-combobox-placeholder-color: var(--color-text-inverted-300);\n --tt-combobox-background-color: var(--color-surface-inverted-100);\n --tt-combobox-hover-background-color: var(--color-surface-inverted-200);\n --tt-combobox-list-max-width: 80ch;\n --tt-combobox-min-width: 244px;\n --tt-combobox-max-width: 244px;\n }\n\n .single-client-name {\n height: 39px;\n padding: var(--space-scale-1); /* match tt-combobox height */\n font-size: var(--font-size-100);\n color: var(--color-text-inverted-400);\n }\n`;\n"]}
|
package/dist/web/Routes.js
CHANGED
package/dist/web/TtNavbar.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @triptease/tt-navbar v0.0.
|
|
2
|
+
* @triptease/tt-navbar v0.0.29
|
|
3
3
|
*/
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
5
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -1626,12 +1626,17 @@ var visuallyHiddenCss = i`
|
|
|
1626
1626
|
`;
|
|
1627
1627
|
var styles2 = i`
|
|
1628
1628
|
:host {
|
|
1629
|
-
--nav-bar-width:
|
|
1629
|
+
--nav-bar-width: 250px;
|
|
1630
1630
|
|
|
1631
1631
|
display: block;
|
|
1632
1632
|
height: 100vh;
|
|
1633
1633
|
}
|
|
1634
1634
|
|
|
1635
|
+
:host:has(.sidebar-closed) {
|
|
1636
|
+
--nav-bar-width: fit-content;
|
|
1637
|
+
}
|
|
1638
|
+
|
|
1639
|
+
|
|
1635
1640
|
* {
|
|
1636
1641
|
box-sizing: border-box;
|
|
1637
1642
|
}
|
|
@@ -1753,6 +1758,10 @@ var styles2 = i`
|
|
|
1753
1758
|
|
|
1754
1759
|
nav.sidebar-closed {
|
|
1755
1760
|
width: fit-content;
|
|
1761
|
+
|
|
1762
|
+
:host {
|
|
1763
|
+
--nav-bar-width: fit-content;
|
|
1764
|
+
}
|
|
1756
1765
|
}
|
|
1757
1766
|
|
|
1758
1767
|
details {
|