@internetarchive/ia-topnav 2.0.1-alpha-webdev8396.0 → 2.0.1
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/dropdown-menu.d.ts +2 -2
- package/dist/src/dropdown-menu.js +27 -27
- package/dist/src/dropdown-menu.js.map +1 -1
- package/dist/src/ia-topnav.js +66 -66
- package/dist/src/ia-topnav.js.map +1 -1
- package/dist/src/login-button.js +17 -17
- package/dist/src/login-button.js.map +1 -1
- package/dist/src/primary-nav.js +89 -89
- package/dist/src/primary-nav.js.map +1 -1
- package/dist/src/signed-out-dropdown.d.ts +2 -1
- package/dist/src/signed-out-dropdown.js.map +1 -1
- package/dist/src/styles/dropdown-menu.js +169 -169
- package/dist/src/styles/dropdown-menu.js.map +1 -1
- package/dist/src/user-menu.d.ts +2 -1
- package/dist/src/user-menu.js +13 -13
- package/dist/src/user-menu.js.map +1 -1
- package/package.json +1 -1
- package/src/dropdown-menu.ts +132 -126
- package/src/ia-topnav.ts +332 -332
- package/src/login-button.ts +89 -89
- package/src/primary-nav.ts +300 -300
- package/src/signed-out-dropdown.ts +11 -10
- package/src/styles/dropdown-menu.ts +172 -172
- package/src/user-menu.ts +31 -31
package/dist/src/primary-nav.js
CHANGED
|
@@ -107,30 +107,30 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
107
107
|
var _a;
|
|
108
108
|
const userMenuClass = this.openMenu === 'user' ? 'active' : '';
|
|
109
109
|
const userMenuToolTip = this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';
|
|
110
|
-
return html `
|
|
111
|
-
<button
|
|
112
|
-
class="user-menu ${userMenuClass}"
|
|
113
|
-
title="${userMenuToolTip}"
|
|
114
|
-
@click="${this.toggleUserMenu}"
|
|
115
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
|
|
116
|
-
>
|
|
117
|
-
<img
|
|
118
|
-
src="${this.mediaBaseHost}${this.userProfileImagePath}"
|
|
119
|
-
alt="Profile picture for ${this.screenName}"
|
|
120
|
-
/>
|
|
121
|
-
<span class="screen-name" dir="auto">${this.screenName}</span>
|
|
122
|
-
</button>
|
|
110
|
+
return html `
|
|
111
|
+
<button
|
|
112
|
+
class="user-menu ${userMenuClass}"
|
|
113
|
+
title="${userMenuToolTip}"
|
|
114
|
+
@click="${this.toggleUserMenu}"
|
|
115
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavUserMenu"
|
|
116
|
+
>
|
|
117
|
+
<img
|
|
118
|
+
src="${this.mediaBaseHost}${this.userProfileImagePath}"
|
|
119
|
+
alt="Profile picture for ${this.screenName}"
|
|
120
|
+
/>
|
|
121
|
+
<span class="screen-name" dir="auto">${this.screenName}</span>
|
|
122
|
+
</button>
|
|
123
123
|
`;
|
|
124
124
|
}
|
|
125
125
|
get loginIcon() {
|
|
126
|
-
return html `
|
|
127
|
-
<login-button
|
|
128
|
-
.baseHost=${this.baseHost}
|
|
129
|
-
.config=${this.config}
|
|
130
|
-
.dropdownOpen=${this.signedOutMenuOpen}
|
|
131
|
-
.openMenu=${this.openMenu}
|
|
132
|
-
@signedOutMenuToggled=${this.signedOutMenuToggled}
|
|
133
|
-
></login-button>
|
|
126
|
+
return html `
|
|
127
|
+
<login-button
|
|
128
|
+
.baseHost=${this.baseHost}
|
|
129
|
+
.config=${this.config}
|
|
130
|
+
.dropdownOpen=${this.signedOutMenuOpen}
|
|
131
|
+
.openMenu=${this.openMenu}
|
|
132
|
+
@signedOutMenuToggled=${this.signedOutMenuToggled}
|
|
133
|
+
></login-button>
|
|
134
134
|
`;
|
|
135
135
|
}
|
|
136
136
|
get searchMenuOpen() {
|
|
@@ -146,57 +146,57 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
146
146
|
get searchSlotContainer() {
|
|
147
147
|
if (this.hideSearch)
|
|
148
148
|
return nothing;
|
|
149
|
-
return html `
|
|
150
|
-
<div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
|
|
151
|
-
<slot name="search"></slot>
|
|
152
|
-
</div>
|
|
149
|
+
return html `
|
|
150
|
+
<div class="search-container ${this.searchMenuOpen ? 'open' : ''}">
|
|
151
|
+
<slot name="search"></slot>
|
|
152
|
+
</div>
|
|
153
153
|
`;
|
|
154
154
|
}
|
|
155
155
|
get searchMenu() {
|
|
156
156
|
var _a;
|
|
157
157
|
if (this.hideSearch)
|
|
158
158
|
return nothing;
|
|
159
|
-
return html `
|
|
160
|
-
<button
|
|
161
|
-
class="search-trigger"
|
|
162
|
-
@click="${this.toggleSearchMenu}"
|
|
163
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
|
|
164
|
-
>
|
|
165
|
-
${icons.search}
|
|
166
|
-
</button>
|
|
159
|
+
return html `
|
|
160
|
+
<button
|
|
161
|
+
class="search-trigger"
|
|
162
|
+
@click="${this.toggleSearchMenu}"
|
|
163
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavSearchOpen"
|
|
164
|
+
>
|
|
165
|
+
${icons.search}
|
|
166
|
+
</button>
|
|
167
167
|
`;
|
|
168
168
|
}
|
|
169
169
|
get mobileDonateHeart() {
|
|
170
|
-
return html `
|
|
171
|
-
<a
|
|
172
|
-
class="mobile-donate-link"
|
|
173
|
-
.href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
|
|
174
|
-
>
|
|
175
|
-
${icons.donateUnpadded}
|
|
176
|
-
<span class="sr-only">"Donate to the archive"</span>
|
|
177
|
-
</a>
|
|
170
|
+
return html `
|
|
171
|
+
<a
|
|
172
|
+
class="mobile-donate-link"
|
|
173
|
+
.href=${formatUrl('/donate/?origin=iawww-mbhrt', this.baseHost)}
|
|
174
|
+
>
|
|
175
|
+
${icons.donateUnpadded}
|
|
176
|
+
<span class="sr-only">"Donate to the archive"</span>
|
|
177
|
+
</a>
|
|
178
178
|
`;
|
|
179
179
|
}
|
|
180
180
|
get uploadButtonTemplate() {
|
|
181
|
-
return html ` <a
|
|
182
|
-
.href="${formatUrl('/upload', this.baseHost)}"
|
|
183
|
-
class="upload"
|
|
184
|
-
@focus=${this.toggleMediaMenu}
|
|
185
|
-
>
|
|
186
|
-
${icons.upload}
|
|
187
|
-
<span>Upload</span>
|
|
181
|
+
return html ` <a
|
|
182
|
+
.href="${formatUrl('/upload', this.baseHost)}"
|
|
183
|
+
class="upload"
|
|
184
|
+
@focus=${this.toggleMediaMenu}
|
|
185
|
+
>
|
|
186
|
+
${icons.upload}
|
|
187
|
+
<span>Upload</span>
|
|
188
188
|
</a>`;
|
|
189
189
|
}
|
|
190
190
|
get userStateTemplate() {
|
|
191
|
-
return html `<div class="user-info">
|
|
192
|
-
${this.username ? this.userIcon : this.loginIcon}
|
|
191
|
+
return html `<div class="user-info">
|
|
192
|
+
${this.username ? this.userIcon : this.loginIcon}
|
|
193
193
|
</div>`;
|
|
194
194
|
}
|
|
195
195
|
get secondLogoSlot() {
|
|
196
196
|
return this.allowSecondaryIcon
|
|
197
|
-
? html `
|
|
198
|
-
<slot name="opt-sec-logo"></slot>
|
|
199
|
-
<slot name="opt-sec-logo-mobile"></slot>
|
|
197
|
+
? html `
|
|
198
|
+
<slot name="opt-sec-logo"></slot>
|
|
199
|
+
<slot name="opt-sec-logo-mobile"></slot>
|
|
200
200
|
`
|
|
201
201
|
: nothing;
|
|
202
202
|
}
|
|
@@ -206,42 +206,42 @@ let PrimaryNav = class PrimaryNav extends TrackedElement {
|
|
|
206
206
|
render() {
|
|
207
207
|
var _a, _b;
|
|
208
208
|
// const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';
|
|
209
|
-
return html `
|
|
210
|
-
<nav class=${this.hideSearch ? 'hide-search' : ''}>
|
|
211
|
-
<button
|
|
212
|
-
class="hamburger"
|
|
213
|
-
@click="${this.toggleMediaMenu}"
|
|
214
|
-
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
|
|
215
|
-
title="Open main menu"
|
|
216
|
-
>
|
|
217
|
-
<icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
|
|
218
|
-
</button>
|
|
219
|
-
|
|
220
|
-
<div class=${`branding ${this.secondLogoClass}`}>
|
|
221
|
-
<a
|
|
222
|
-
.href=${formatUrl('/', this.baseHost)}
|
|
223
|
-
@click=${this.trackClick}
|
|
224
|
-
data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
|
|
225
|
-
title="Go home"
|
|
226
|
-
class="link-home"
|
|
227
|
-
>${icons.iaLogo}${logoWordmarkStacked}</a
|
|
228
|
-
>
|
|
229
|
-
${this.secondLogoSlot}
|
|
230
|
-
</div>
|
|
231
|
-
<media-menu
|
|
232
|
-
.baseHost=${this.baseHost}
|
|
233
|
-
.config=${this.config}
|
|
234
|
-
?mediaMenuAnimate=${this.mediaMenuAnimate}
|
|
235
|
-
.selectedMenuOption=${this.selectedMenuOption}
|
|
236
|
-
.openMenu=${this.openMenu}
|
|
237
|
-
.currentTab=${this.currentTab}
|
|
238
|
-
></media-menu>
|
|
239
|
-
${this.searchSlotContainer}
|
|
240
|
-
<div class="right-side-section">
|
|
241
|
-
${this.mobileDonateHeart} ${this.userStateTemplate}
|
|
242
|
-
${this.uploadButtonTemplate} ${this.searchMenu}
|
|
243
|
-
</div>
|
|
244
|
-
</nav>
|
|
209
|
+
return html `
|
|
210
|
+
<nav class=${this.hideSearch ? 'hide-search' : ''}>
|
|
211
|
+
<button
|
|
212
|
+
class="hamburger"
|
|
213
|
+
@click="${this.toggleMediaMenu}"
|
|
214
|
+
data-event-click-tracking="${(_a = this.config) === null || _a === void 0 ? void 0 : _a.eventCategory}|NavHamburger"
|
|
215
|
+
title="Open main menu"
|
|
216
|
+
>
|
|
217
|
+
<icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
|
|
218
|
+
</button>
|
|
219
|
+
|
|
220
|
+
<div class=${`branding ${this.secondLogoClass}`}>
|
|
221
|
+
<a
|
|
222
|
+
.href=${formatUrl('/', this.baseHost)}
|
|
223
|
+
@click=${this.trackClick}
|
|
224
|
+
data-event-click-tracking="${(_b = this.config) === null || _b === void 0 ? void 0 : _b.eventCategory}|NavHome"
|
|
225
|
+
title="Go home"
|
|
226
|
+
class="link-home"
|
|
227
|
+
>${icons.iaLogo}${logoWordmarkStacked}</a
|
|
228
|
+
>
|
|
229
|
+
${this.secondLogoSlot}
|
|
230
|
+
</div>
|
|
231
|
+
<media-menu
|
|
232
|
+
.baseHost=${this.baseHost}
|
|
233
|
+
.config=${this.config}
|
|
234
|
+
?mediaMenuAnimate=${this.mediaMenuAnimate}
|
|
235
|
+
.selectedMenuOption=${this.selectedMenuOption}
|
|
236
|
+
.openMenu=${this.openMenu}
|
|
237
|
+
.currentTab=${this.currentTab}
|
|
238
|
+
></media-menu>
|
|
239
|
+
${this.searchSlotContainer}
|
|
240
|
+
<div class="right-side-section">
|
|
241
|
+
${this.mobileDonateHeart} ${this.userStateTemplate}
|
|
242
|
+
${this.uploadButtonTemplate} ${this.searchMenu}
|
|
243
|
+
</div>
|
|
244
|
+
</nav>
|
|
245
245
|
`;
|
|
246
246
|
}
|
|
247
247
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\nimport TrackedElement from './tracked-element';\nimport icons from './assets/img/icons';\nimport './assets/img/hamburger';\nimport './login-button';\nimport type { LoginButton } from './login-button';\nimport './media-menu';\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\nimport primaryNavCSS from './styles/primary-nav';\nimport formatUrl from './lib/format-url';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\nimport { defaultTopNavConfig } from './data/menus';\n\n@customElement('primary-nav')\nexport class PrimaryNav extends TrackedElement {\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\n @property({ type: String }) baseHost = '';\n @property({ type: Boolean }) hideSearch = false;\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\n @property({ type: String }) openMenu = '';\n @property({ type: String }) screenName = '';\n @property({ type: String })\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\n @property({ type: String }) selectedMenuOption = '';\n @property({ type: Boolean }) signedOutMenuOpen = false;\n @property({ type: Boolean }) userMenuOpen = false;\n @property({ type: Boolean }) mediaMenuAnimate = false;\n @property({ type: String }) username = '';\n @property({ type: String }) userProfileImagePath = '';\n @property({ type: Object }) currentTab:\n | { mediatype: string; moveTo: string }\n | undefined;\n signedOutMenuToggled: unknown;\n\n @query('button.user-menu') private userMenuButton?: HTMLButtonElement;\n @query('login-button') private loginButton?: HTMLElement;\n\n static get styles() {\n return primaryNavCSS;\n }\n\n /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */\n getAccountDropdownOffset(): number {\n const hostRect = this.getBoundingClientRect();\n\n if (this.userMenuButton) {\n return hostRect.right - this.userMenuButton.getBoundingClientRect().right;\n }\n\n if (this.loginButton) {\n const loginRect = this.loginButton.getBoundingClientRect();\n const innerOffset = (\n this.loginButton as LoginButton\n ).getDropdownToggleOffset();\n return hostRect.right - loginRect.right + innerOffset;\n }\n\n return 0;\n }\n\n toggleMediaMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'media',\n },\n }),\n );\n }\n\n toggleSearchMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'search',\n },\n }),\n );\n }\n\n toggleUserMenu(e: Event) {\n this.trackClick(e);\n this.dispatchEvent(\n new CustomEvent('menuToggled', {\n detail: {\n menuName: 'user',\n },\n }),\n );\n }\n\n updated(props: PropertyValues) {\n if (props.has('currentTab')) {\n // early return\n if (!this.currentTab || Object.keys(this.currentTab).length === 0)\n return nothing;\n\n const isUserMenuTab =\n this.currentTab && this.currentTab.mediatype === 'usermenu';\n if (isUserMenuTab) {\n const mediaButtons = Array.from(\n this.shadowRoot\n ?.querySelector('media-menu')\n ?.shadowRoot?.querySelectorAll('media-button') ?? [],\n );\n const lastMediaButton = mediaButtons.filter((element) => {\n return element.shadowRoot\n ?.querySelector('a')\n ?.classList.contains('images');\n });\n\n let nextElement;\n if (this.username) {\n nextElement = this.shadowRoot?.querySelector('a.upload');\n } else {\n nextElement = this.shadowRoot\n ?.querySelector('login-button')\n ?.shadowRoot?.querySelector('span a');\n }\n\n const menuItemElement =\n lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\n\n const focusElement =\n this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\n\n if (focusElement) {\n (focusElement as HTMLElement).focus();\n }\n } else if (this.currentTab.moveTo === 'next') {\n if (this.shadowRoot?.querySelector('.user-menu')) {\n (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\n } else {\n (\n this.shadowRoot\n ?.querySelector('login-button')\n ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\n )?.focus();\n }\n }\n }\n }\n\n get userIcon() {\n const userMenuClass = this.openMenu === 'user' ? 'active' : '';\n const userMenuToolTip =\n this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\n\n return html`\n <button\n class=\"user-menu ${userMenuClass}\"\n title=\"${userMenuToolTip}\"\n @click=\"${this.toggleUserMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\n >\n <img\n src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\n alt=\"Profile picture for ${this.screenName}\"\n />\n <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\n </button>\n `;\n }\n\n get loginIcon() {\n return html`\n <login-button\n .baseHost=${this.baseHost}\n .config=${this.config}\n .dropdownOpen=${this.signedOutMenuOpen}\n .openMenu=${this.openMenu}\n @signedOutMenuToggled=${this.signedOutMenuToggled}\n ></login-button>\n `;\n }\n\n get searchMenuOpen() {\n return this.openMenu === 'search';\n }\n\n get allowSecondaryIcon() {\n return this.secondIdentitySlotMode === 'allow';\n }\n\n /**\n * The search slot container, rendered between media-menu and\n * right-side-section so it sits left of the Upload button on desktop.\n */\n get searchSlotContainer() {\n if (this.hideSearch) return nothing;\n return html`\n <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\n <slot name=\"search\"></slot>\n </div>\n `;\n }\n\n get searchMenu() {\n if (this.hideSearch) return nothing;\n\n return html`\n <button\n class=\"search-trigger\"\n @click=\"${this.toggleSearchMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\n >\n ${icons.search}\n </button>\n `;\n }\n\n get mobileDonateHeart() {\n return html`\n <a\n class=\"mobile-donate-link\"\n .href=${formatUrl(\n '/donate/?origin=iawww-mbhrt' as string & Location,\n this.baseHost,\n )}\n >\n ${icons.donateUnpadded}\n <span class=\"sr-only\">\"Donate to the archive\"</span>\n </a>\n `;\n }\n\n get uploadButtonTemplate() {\n return html` <a\n .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\n class=\"upload\"\n @focus=${this.toggleMediaMenu}\n >\n ${icons.upload}\n <span>Upload</span>\n </a>`;\n }\n\n get userStateTemplate() {\n return html`<div class=\"user-info\">\n ${this.username ? this.userIcon : this.loginIcon}\n </div>`;\n }\n\n get secondLogoSlot() {\n return this.allowSecondaryIcon\n ? html`\n <slot name=\"opt-sec-logo\"></slot>\n <slot name=\"opt-sec-logo-mobile\"></slot>\n `\n : nothing;\n }\n\n get secondLogoClass() {\n return this.allowSecondaryIcon ? 'second-logo' : '';\n }\n\n render() {\n // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\n return html`\n <nav class=${this.hideSearch ? 'hide-search' : ''}>\n <button\n class=\"hamburger\"\n @click=\"${this.toggleMediaMenu}\"\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\n title=\"Open main menu\"\n >\n <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\n </button>\n\n <div class=${`branding ${this.secondLogoClass}`}>\n <a\n .href=${formatUrl('/' as string & Location, this.baseHost)}\n @click=${this.trackClick}\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\n title=\"Go home\"\n class=\"link-home\"\n >${icons.iaLogo}${logoWordmarkStacked}</a\n >\n ${this.secondLogoSlot}\n </div>\n <media-menu\n .baseHost=${this.baseHost}\n .config=${this.config}\n ?mediaMenuAnimate=${this.mediaMenuAnimate}\n .selectedMenuOption=${this.selectedMenuOption}\n .openMenu=${this.openMenu}\n .currentTab=${this.currentTab}\n ></media-menu>\n ${this.searchSlotContainer}\n <div class=\"right-side-section\">\n ${this.mobileDonateHeart} ${this.userStateTemplate}\n ${this.uploadButtonTemplate} ${this.searchMenu}\n </div>\n </nav>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../src/primary-nav.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues } from 'lit';\r\nimport TrackedElement from './tracked-element';\r\nimport icons from './assets/img/icons';\r\nimport './assets/img/hamburger';\r\nimport './login-button';\r\nimport type { LoginButton } from './login-button';\r\nimport './media-menu';\r\nimport logoWordmarkStacked from './assets/img/wordmark-stacked';\r\nimport primaryNavCSS from './styles/primary-nav';\r\nimport formatUrl from './lib/format-url';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport { IATopNavConfig, IATopNavSecondIdentitySlotMode } from './models';\r\nimport { defaultTopNavConfig } from './data/menus';\r\n\r\n@customElement('primary-nav')\r\nexport class PrimaryNav extends TrackedElement {\r\n @property({ type: String }) mediaBaseHost = 'https://archive.org';\r\n @property({ type: String }) baseHost = '';\r\n @property({ type: Boolean }) hideSearch = false;\r\n @property({ type: Object }) config: IATopNavConfig = defaultTopNavConfig;\r\n @property({ type: String }) openMenu = '';\r\n @property({ type: String }) screenName = '';\r\n @property({ type: String })\r\n secondIdentitySlotMode: IATopNavSecondIdentitySlotMode = '';\r\n @property({ type: String }) selectedMenuOption = '';\r\n @property({ type: Boolean }) signedOutMenuOpen = false;\r\n @property({ type: Boolean }) userMenuOpen = false;\r\n @property({ type: Boolean }) mediaMenuAnimate = false;\r\n @property({ type: String }) username = '';\r\n @property({ type: String }) userProfileImagePath = '';\r\n @property({ type: Object }) currentTab:\r\n | { mediatype: string; moveTo: string }\r\n | undefined;\r\n signedOutMenuToggled: unknown;\r\n\r\n @query('button.user-menu') private userMenuButton?: HTMLButtonElement;\r\n @query('login-button') private loginButton?: HTMLElement;\r\n\r\n static get styles() {\r\n return primaryNavCSS;\r\n }\r\n\r\n /** Distance (px) from this element's right edge to the right edge of the account dropdown toggle. */\r\n getAccountDropdownOffset(): number {\r\n const hostRect = this.getBoundingClientRect();\r\n\r\n if (this.userMenuButton) {\r\n return hostRect.right - this.userMenuButton.getBoundingClientRect().right;\r\n }\r\n\r\n if (this.loginButton) {\r\n const loginRect = this.loginButton.getBoundingClientRect();\r\n const innerOffset = (\r\n this.loginButton as LoginButton\r\n ).getDropdownToggleOffset();\r\n return hostRect.right - loginRect.right + innerOffset;\r\n }\r\n\r\n return 0;\r\n }\r\n\r\n toggleMediaMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'media',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n toggleSearchMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'search',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n toggleUserMenu(e: Event) {\r\n this.trackClick(e);\r\n this.dispatchEvent(\r\n new CustomEvent('menuToggled', {\r\n detail: {\r\n menuName: 'user',\r\n },\r\n }),\r\n );\r\n }\r\n\r\n updated(props: PropertyValues) {\r\n if (props.has('currentTab')) {\r\n // early return\r\n if (!this.currentTab || Object.keys(this.currentTab).length === 0)\r\n return nothing;\r\n\r\n const isUserMenuTab =\r\n this.currentTab && this.currentTab.mediatype === 'usermenu';\r\n if (isUserMenuTab) {\r\n const mediaButtons = Array.from(\r\n this.shadowRoot\r\n ?.querySelector('media-menu')\r\n ?.shadowRoot?.querySelectorAll('media-button') ?? [],\r\n );\r\n const lastMediaButton = mediaButtons.filter((element) => {\r\n return element.shadowRoot\r\n ?.querySelector('a')\r\n ?.classList.contains('images');\r\n });\r\n\r\n let nextElement;\r\n if (this.username) {\r\n nextElement = this.shadowRoot?.querySelector('a.upload');\r\n } else {\r\n nextElement = this.shadowRoot\r\n ?.querySelector('login-button')\r\n ?.shadowRoot?.querySelector('span a');\r\n }\r\n\r\n const menuItemElement =\r\n lastMediaButton[0]?.shadowRoot?.querySelector('a.menu-item');\r\n\r\n const focusElement =\r\n this.currentTab.moveTo === 'next' ? nextElement : menuItemElement;\r\n\r\n if (focusElement) {\r\n (focusElement as HTMLElement).focus();\r\n }\r\n } else if (this.currentTab.moveTo === 'next') {\r\n if (this.shadowRoot?.querySelector('.user-menu')) {\r\n (this.shadowRoot?.querySelector('.user-menu') as HTMLElement).focus();\r\n } else {\r\n (\r\n this.shadowRoot\r\n ?.querySelector('login-button')\r\n ?.shadowRoot?.querySelectorAll('span a')[0] as HTMLElement\r\n )?.focus();\r\n }\r\n }\r\n }\r\n }\r\n\r\n get userIcon() {\r\n const userMenuClass = this.openMenu === 'user' ? 'active' : '';\r\n const userMenuToolTip =\r\n this.openMenu === 'user' ? 'Close user menu' : 'Expand user menu';\r\n\r\n return html`\r\n <button\r\n class=\"user-menu ${userMenuClass}\"\r\n title=\"${userMenuToolTip}\"\r\n @click=\"${this.toggleUserMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavUserMenu\"\r\n >\r\n <img\r\n src=\"${this.mediaBaseHost}${this.userProfileImagePath}\"\r\n alt=\"Profile picture for ${this.screenName}\"\r\n />\r\n <span class=\"screen-name\" dir=\"auto\">${this.screenName}</span>\r\n </button>\r\n `;\r\n }\r\n\r\n get loginIcon() {\r\n return html`\r\n <login-button\r\n .baseHost=${this.baseHost}\r\n .config=${this.config}\r\n .dropdownOpen=${this.signedOutMenuOpen}\r\n .openMenu=${this.openMenu}\r\n @signedOutMenuToggled=${this.signedOutMenuToggled}\r\n ></login-button>\r\n `;\r\n }\r\n\r\n get searchMenuOpen() {\r\n return this.openMenu === 'search';\r\n }\r\n\r\n get allowSecondaryIcon() {\r\n return this.secondIdentitySlotMode === 'allow';\r\n }\r\n\r\n /**\r\n * The search slot container, rendered between media-menu and\r\n * right-side-section so it sits left of the Upload button on desktop.\r\n */\r\n get searchSlotContainer() {\r\n if (this.hideSearch) return nothing;\r\n return html`\r\n <div class=\"search-container ${this.searchMenuOpen ? 'open' : ''}\">\r\n <slot name=\"search\"></slot>\r\n </div>\r\n `;\r\n }\r\n\r\n get searchMenu() {\r\n if (this.hideSearch) return nothing;\r\n\r\n return html`\r\n <button\r\n class=\"search-trigger\"\r\n @click=\"${this.toggleSearchMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavSearchOpen\"\r\n >\r\n ${icons.search}\r\n </button>\r\n `;\r\n }\r\n\r\n get mobileDonateHeart() {\r\n return html`\r\n <a\r\n class=\"mobile-donate-link\"\r\n .href=${formatUrl(\r\n '/donate/?origin=iawww-mbhrt' as string & Location,\r\n this.baseHost,\r\n )}\r\n >\r\n ${icons.donateUnpadded}\r\n <span class=\"sr-only\">\"Donate to the archive\"</span>\r\n </a>\r\n `;\r\n }\r\n\r\n get uploadButtonTemplate() {\r\n return html` <a\r\n .href=\"${formatUrl('/upload' as string & Location, this.baseHost)}\"\r\n class=\"upload\"\r\n @focus=${this.toggleMediaMenu}\r\n >\r\n ${icons.upload}\r\n <span>Upload</span>\r\n </a>`;\r\n }\r\n\r\n get userStateTemplate() {\r\n return html`<div class=\"user-info\">\r\n ${this.username ? this.userIcon : this.loginIcon}\r\n </div>`;\r\n }\r\n\r\n get secondLogoSlot() {\r\n return this.allowSecondaryIcon\r\n ? html`\r\n <slot name=\"opt-sec-logo\"></slot>\r\n <slot name=\"opt-sec-logo-mobile\"></slot>\r\n `\r\n : nothing;\r\n }\r\n\r\n get secondLogoClass() {\r\n return this.allowSecondaryIcon ? 'second-logo' : '';\r\n }\r\n\r\n render() {\r\n // const mediaMenuTabIndex = this.openMenu === 'media' ? '' : '-1';\r\n return html`\r\n <nav class=${this.hideSearch ? 'hide-search' : ''}>\r\n <button\r\n class=\"hamburger\"\r\n @click=\"${this.toggleMediaMenu}\"\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHamburger\"\r\n title=\"Open main menu\"\r\n >\r\n <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>\r\n </button>\r\n\r\n <div class=${`branding ${this.secondLogoClass}`}>\r\n <a\r\n .href=${formatUrl('/' as string & Location, this.baseHost)}\r\n @click=${this.trackClick}\r\n data-event-click-tracking=\"${this.config?.eventCategory}|NavHome\"\r\n title=\"Go home\"\r\n class=\"link-home\"\r\n >${icons.iaLogo}${logoWordmarkStacked}</a\r\n >\r\n ${this.secondLogoSlot}\r\n </div>\r\n <media-menu\r\n .baseHost=${this.baseHost}\r\n .config=${this.config}\r\n ?mediaMenuAnimate=${this.mediaMenuAnimate}\r\n .selectedMenuOption=${this.selectedMenuOption}\r\n .openMenu=${this.openMenu}\r\n .currentTab=${this.currentTab}\r\n ></media-menu>\r\n ${this.searchSlotContainer}\r\n <div class=\"right-side-section\">\r\n ${this.mobileDonateHeart} ${this.userStateTemplate}\r\n ${this.uploadButtonTemplate} ${this.searchMenu}\r\n </div>\r\n </nav>\r\n `;\r\n }\r\n}\r\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"signed-out-dropdown.js","sourceRoot":"","sources":["../../src/signed-out-dropdown.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"signed-out-dropdown.js","sourceRoot":"","sources":["../../src/signed-out-dropdown.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,eAAe,MAAM,wBAAwB,CAAC;AAG9C,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,YAAY;IACjD,MAAM,KAAK,MAAM;QACf,OAAO,eAAe,CAAC;IACzB,CAAC;CACF,CAAA;AAJY,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAI7B","sourcesContent":["import { CSSResultGroup } from 'lit';\r\nimport { customElement } from 'lit/decorators.js';\r\nimport DropdownMenu from './dropdown-menu';\r\nimport dropdownMenuCSS from './styles/dropdown-menu';\r\n\r\n@customElement('signed-out-dropdown')\r\nexport class SignedOutDropdown extends DropdownMenu {\r\n static get styles(): CSSResultGroup {\r\n return dropdownMenuCSS;\r\n }\r\n}\r\n"]}
|
|
@@ -1,172 +1,172 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export default css `
|
|
3
|
-
.nav-container {
|
|
4
|
-
position: relative;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
nav {
|
|
8
|
-
position: absolute;
|
|
9
|
-
right: 0;
|
|
10
|
-
z-index: 4;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
font-size: 1.6rem;
|
|
13
|
-
background-color: var(--dropdownMenuBg);
|
|
14
|
-
transition-property: top;
|
|
15
|
-
transition-duration: 0.2s;
|
|
16
|
-
transition-timing-function: ease;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.initial,
|
|
20
|
-
.closed {
|
|
21
|
-
top: var(--topOffset, -1500px);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.closed {
|
|
25
|
-
transition-duration: 0.5s;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.open {
|
|
29
|
-
max-width: 100vw;
|
|
30
|
-
overflow: auto;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
h3 {
|
|
34
|
-
padding: 0.6rem 2rem;
|
|
35
|
-
margin: 0;
|
|
36
|
-
font-size: inherit;
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
text-overflow: ellipsis;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
ul {
|
|
42
|
-
padding: 0.4rem 0 0.7rem 0;
|
|
43
|
-
margin: 0;
|
|
44
|
-
list-style: none;
|
|
45
|
-
/* viewport height - nav height + bottom nav border */
|
|
46
|
-
max-height: calc(100vh - 7.2rem + 1px);
|
|
47
|
-
overflow: auto;
|
|
48
|
-
box-sizing: border-box;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.divider {
|
|
52
|
-
margin: 0.5rem 0;
|
|
53
|
-
border-bottom: 1px solid var(--dropdownMenuDivider);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
a,
|
|
57
|
-
.info-item {
|
|
58
|
-
display: block;
|
|
59
|
-
color: var(--primaryTextColor);
|
|
60
|
-
text-decoration: none;
|
|
61
|
-
padding: 1rem 2rem;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.info-item {
|
|
65
|
-
font-size: 0.8em;
|
|
66
|
-
color: var(--dropdownMenuInfoItem);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.callout {
|
|
70
|
-
position: absolute;
|
|
71
|
-
margin-left: 10px;
|
|
72
|
-
padding: 0 5px;
|
|
73
|
-
border-radius: 2px;
|
|
74
|
-
background: #fee257;
|
|
75
|
-
color: #2c2c2c;
|
|
76
|
-
font-size: 1.4rem;
|
|
77
|
-
font-weight: bold;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
a.mobile-upload {
|
|
81
|
-
display: flex;
|
|
82
|
-
justify-content: left;
|
|
83
|
-
align-items: center;
|
|
84
|
-
}
|
|
85
|
-
a.mobile-upload svg {
|
|
86
|
-
fill: var(--white);
|
|
87
|
-
margin-right: 1rem;
|
|
88
|
-
height: 1.4rem;
|
|
89
|
-
width: 1.4rem;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
@media (min-width: 890px) {
|
|
93
|
-
nav {
|
|
94
|
-
display: flex;
|
|
95
|
-
overflow: visible;
|
|
96
|
-
top: 0;
|
|
97
|
-
left: auto;
|
|
98
|
-
right: var(--dropdownMenuRight, 0);
|
|
99
|
-
z-index: 5;
|
|
100
|
-
transition: opacity 0.2s ease-in-out;
|
|
101
|
-
font-size: 1.4rem;
|
|
102
|
-
border-radius: 2px;
|
|
103
|
-
background: var(--primaryTextColor);
|
|
104
|
-
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
nav:after {
|
|
108
|
-
position: absolute;
|
|
109
|
-
right: 7px;
|
|
110
|
-
top: -7px;
|
|
111
|
-
width: 12px;
|
|
112
|
-
height: 7px;
|
|
113
|
-
box-sizing: border-box;
|
|
114
|
-
color: var(--white);
|
|
115
|
-
content: '';
|
|
116
|
-
border-bottom: 7px solid currentColor;
|
|
117
|
-
border-left: 6px solid transparent;
|
|
118
|
-
border-right: 6px solid transparent;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
h3 {
|
|
122
|
-
display: none;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
ul {
|
|
126
|
-
/* viewport height - nav height + bottom nav border */
|
|
127
|
-
max-height: calc(100vh - 8.5rem + 1px);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.divider {
|
|
131
|
-
border-bottom-color: var(--dropdownMenuDivider);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
a {
|
|
135
|
-
padding: 0.5rem 2rem;
|
|
136
|
-
color: var(--inverseTextColor);
|
|
137
|
-
transition:
|
|
138
|
-
background 0.1s ease-out,
|
|
139
|
-
color 0.1s ease-out;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.info-item {
|
|
143
|
-
padding: 0.5rem 2rem;
|
|
144
|
-
font-size: 0.8em;
|
|
145
|
-
color: var(--inverseDropdownMenuInfoItem);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
a:hover,
|
|
149
|
-
a:active,
|
|
150
|
-
a:focus {
|
|
151
|
-
color: var(--linkHoverColor);
|
|
152
|
-
background: var(--linkColor);
|
|
153
|
-
outline: none;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.initial,
|
|
157
|
-
.closed {
|
|
158
|
-
opacity: 0;
|
|
159
|
-
transition-duration: 0.2s;
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.open {
|
|
163
|
-
opacity: 1;
|
|
164
|
-
overflow: visible;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
a.mobile-upload {
|
|
168
|
-
display: none;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
2
|
+
export default css `
|
|
3
|
+
.nav-container {
|
|
4
|
+
position: relative;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
nav {
|
|
8
|
+
position: absolute;
|
|
9
|
+
right: 0;
|
|
10
|
+
z-index: 4;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
font-size: 1.6rem;
|
|
13
|
+
background-color: var(--dropdownMenuBg);
|
|
14
|
+
transition-property: top;
|
|
15
|
+
transition-duration: 0.2s;
|
|
16
|
+
transition-timing-function: ease;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.initial,
|
|
20
|
+
.closed {
|
|
21
|
+
top: var(--topOffset, -1500px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.closed {
|
|
25
|
+
transition-duration: 0.5s;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.open {
|
|
29
|
+
max-width: 100vw;
|
|
30
|
+
overflow: auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
h3 {
|
|
34
|
+
padding: 0.6rem 2rem;
|
|
35
|
+
margin: 0;
|
|
36
|
+
font-size: inherit;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
text-overflow: ellipsis;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
ul {
|
|
42
|
+
padding: 0.4rem 0 0.7rem 0;
|
|
43
|
+
margin: 0;
|
|
44
|
+
list-style: none;
|
|
45
|
+
/* viewport height - nav height + bottom nav border */
|
|
46
|
+
max-height: calc(100vh - 7.2rem + 1px);
|
|
47
|
+
overflow: auto;
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.divider {
|
|
52
|
+
margin: 0.5rem 0;
|
|
53
|
+
border-bottom: 1px solid var(--dropdownMenuDivider);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
a,
|
|
57
|
+
.info-item {
|
|
58
|
+
display: block;
|
|
59
|
+
color: var(--primaryTextColor);
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
padding: 1rem 2rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.info-item {
|
|
65
|
+
font-size: 0.8em;
|
|
66
|
+
color: var(--dropdownMenuInfoItem);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.callout {
|
|
70
|
+
position: absolute;
|
|
71
|
+
margin-left: 10px;
|
|
72
|
+
padding: 0 5px;
|
|
73
|
+
border-radius: 2px;
|
|
74
|
+
background: #fee257;
|
|
75
|
+
color: #2c2c2c;
|
|
76
|
+
font-size: 1.4rem;
|
|
77
|
+
font-weight: bold;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
a.mobile-upload {
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: left;
|
|
83
|
+
align-items: center;
|
|
84
|
+
}
|
|
85
|
+
a.mobile-upload svg {
|
|
86
|
+
fill: var(--white);
|
|
87
|
+
margin-right: 1rem;
|
|
88
|
+
height: 1.4rem;
|
|
89
|
+
width: 1.4rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media (min-width: 890px) {
|
|
93
|
+
nav {
|
|
94
|
+
display: flex;
|
|
95
|
+
overflow: visible;
|
|
96
|
+
top: 0;
|
|
97
|
+
left: auto;
|
|
98
|
+
right: var(--dropdownMenuRight, 0);
|
|
99
|
+
z-index: 5;
|
|
100
|
+
transition: opacity 0.2s ease-in-out;
|
|
101
|
+
font-size: 1.4rem;
|
|
102
|
+
border-radius: 2px;
|
|
103
|
+
background: var(--primaryTextColor);
|
|
104
|
+
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
nav:after {
|
|
108
|
+
position: absolute;
|
|
109
|
+
right: 7px;
|
|
110
|
+
top: -7px;
|
|
111
|
+
width: 12px;
|
|
112
|
+
height: 7px;
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
color: var(--white);
|
|
115
|
+
content: '';
|
|
116
|
+
border-bottom: 7px solid currentColor;
|
|
117
|
+
border-left: 6px solid transparent;
|
|
118
|
+
border-right: 6px solid transparent;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
h3 {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
ul {
|
|
126
|
+
/* viewport height - nav height + bottom nav border */
|
|
127
|
+
max-height: calc(100vh - 8.5rem + 1px);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.divider {
|
|
131
|
+
border-bottom-color: var(--dropdownMenuDivider);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
a {
|
|
135
|
+
padding: 0.5rem 2rem;
|
|
136
|
+
color: var(--inverseTextColor);
|
|
137
|
+
transition:
|
|
138
|
+
background 0.1s ease-out,
|
|
139
|
+
color 0.1s ease-out;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.info-item {
|
|
143
|
+
padding: 0.5rem 2rem;
|
|
144
|
+
font-size: 0.8em;
|
|
145
|
+
color: var(--inverseDropdownMenuInfoItem);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
a:hover,
|
|
149
|
+
a:active,
|
|
150
|
+
a:focus {
|
|
151
|
+
color: var(--linkHoverColor);
|
|
152
|
+
background: var(--linkColor);
|
|
153
|
+
outline: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.initial,
|
|
157
|
+
.closed {
|
|
158
|
+
opacity: 0;
|
|
159
|
+
transition-duration: 0.2s;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.open {
|
|
163
|
+
opacity: 1;
|
|
164
|
+
overflow: visible;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
a.mobile-upload {
|
|
168
|
+
display: none;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
171
|
`;
|
|
172
172
|
//# sourceMappingURL=dropdown-menu.js.map
|