@internetarchive/ia-topnav 1.4.1-alpha-webdev8259.9 → 1.4.1-alpha-webdev8259.10

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.
@@ -341,9 +341,6 @@ export default css `
341
341
  background: transparent;
342
342
  border-radius: 0;
343
343
  z-index: auto;
344
- opacity: 0;
345
- animation: fade-in 0.1s ease forwards;
346
- animation-delay: 0.5s;
347
344
  }
348
345
 
349
346
  .search-container slot {
@@ -1 +1 @@
1
- {"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../../src/styles/primary-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8WjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n button:focus,\n input:focus {\n outline: none;\n }\n\n nav {\n position: relative;\n display: flex;\n height: 4rem;\n grid-template-areas: 'hamburger empty heart search user';\n -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;\n grid-template-columns: 4rem auto 4rem 4rem 4rem;\n -ms-grid-rows: 100%;\n grid-template-rows: 100%;\n background: var(--primaryNavBg);\n border-bottom: 1px solid var(--primaryNavBottomBorder);\n }\n\n nav.hide-search {\n grid-template-areas: 'hamburger empty heart user';\n -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;\n grid-template-columns: 4rem auto 4rem 4rem;\n }\n\n .right-side-section {\n display: flex;\n margin-left: auto;\n user-select: none;\n }\n button {\n background: none;\n color: inherit;\n border: none;\n font: inherit;\n cursor: pointer;\n }\n\n .branding {\n position: static;\n float: left;\n margin: 0 !important;\n padding: 0 5px 0 10px;\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n }\n\n slot,\n .branding {\n display: flex;\n justify-content: left;\n align-items: center;\n }\n\n media-menu {\n flex: 1;\n justify-self: stretch;\n }\n\n .ia-logo {\n height: 3rem;\n width: 2.7rem;\n display: inline-block;\n }\n .ia-wordmark {\n height: 3rem;\n width: 9.5rem;\n }\n .ia-logo,\n .ia-wordmark {\n margin-right: 5px;\n }\n\n .hamburger {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n grid-area: hamburger;\n padding: 0;\n }\n .hamburger svg {\n height: 4rem;\n width: 4rem;\n fill: var(--activeColor);\n }\n\n .mobile-donate-link {\n display: inline-block;\n }\n .mobile-donate-link svg {\n height: 4rem;\n width: 4rem;\n }\n .mobile-donate-link .fill-color {\n fill: rgb(255, 0, 0);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n white-space: nowrap;\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n user-select: none;\n }\n\n .search-trigger {\n padding: 0;\n }\n .search-trigger svg {\n height: 4rem;\n width: 4rem;\n }\n .search-trigger .fill-color {\n fill: var(--iconFill);\n }\n\n .search-activated {\n position: relative;\n z-index: 3;\n }\n\n .search-container {\n display: none;\n }\n\n .search-container.open {\n display: flex;\n position: absolute;\n top: 0;\n right: 4rem;\n bottom: 0;\n left: 4rem;\n z-index: 3;\n padding: 0.5rem;\n border-radius: 1rem 1rem 0 0;\n background: var(--primaryNavBg);\n align-items: center;\n animation: fade-in 0.2s forwards;\n }\n\n .search-container ::slotted(*) {\n display: block;\n }\n\n .search-container slot {\n width: 100%;\n }\n\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n .upload {\n display: none;\n }\n\n .upload span {\n display: none;\n }\n\n .upload svg {\n height: 3rem;\n width: 3rem;\n }\n\n .screen-name {\n display: none;\n font-size: 1.3rem;\n vertical-align: middle;\n text-transform: uppercase;\n }\n\n .user-menu {\n color: var(--lightTextColor);\n padding: 0.5rem;\n height: 100%;\n }\n\n button.user-menu:hover,\n button.user-menu:focus {\n color: var(--linkHoverColor);\n outline: none;\n }\n\n .user-menu.active {\n border-radius: 1rem 1rem 0 0;\n background: var(--activeButtonBg);\n }\n\n .user-menu img {\n display: block;\n width: 3rem;\n height: 3rem;\n }\n\n .link-home {\n text-decoration: none;\n display: inline-flex;\n }\n a.link-home:focus,\n a.link-home:focus-visible {\n outline-offset: 1px;\n }\n\n @media only screen and (min-width: 890px) and (max-device-width: 905px) {\n .branding.second-logo {\n padding-right: 0;\n }\n }\n\n @media (min-width: 906px) {\n .branding.second-logo {\n padding-right: 20px;\n }\n }\n\n @media (max-width: 889px) {\n slot[name='opt-sec-logo'] {\n display: none;\n }\n\n .right-side-section {\n display: initial;\n }\n .right-side-section .user-info {\n float: right;\n }\n }\n\n @media (min-width: 890px) {\n :host {\n --userIconWidth: 3.2rem;\n --userIconHeight: 3.2rem;\n }\n\n nav {\n display: flex;\n z-index: 4;\n height: 5rem;\n padding-right: 1.5rem;\n }\n\n slot[name='opt-sec-logo-mobile'] {\n display: none;\n }\n\n .ia-logo,\n .ia-wordmark {\n margin-right: 10px;\n }\n\n .hamburger,\n .search-trigger,\n .mobile-donate-link {\n display: none;\n }\n\n .user-info {\n display: block;\n float: right;\n vertical-align: middle;\n height: 100%;\n }\n\n .user-info .user-menu img {\n height: 3rem;\n width: 3rem;\n margin-right: 0.5rem;\n }\n\n .user-menu {\n padding: 1rem 0.5rem;\n }\n .user-menu.active {\n background: transparent;\n }\n\n .user-menu img {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.5rem;\n }\n\n .upload {\n display: block;\n padding: 1rem 0.5rem;\n float: right;\n font-size: 1.4rem;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--lightTextColor);\n }\n .upload:active,\n .upload:focus,\n .upload:hover {\n color: var(--linkHoverColor);\n }\n .upload:focus-visible {\n outline: none;\n }\n\n .upload svg {\n vertical-align: middle;\n fill: var(--iconFill);\n }\n\n .upload:hover svg,\n .upload:focus svg,\n .upload:active svg {\n fill: var(--linkHoverColor);\n }\n\n nav-search {\n float: right;\n margin-left: 1rem;\n }\n\n .search-container,\n .search-container.open {\n display: flex;\n position: static;\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n align-items: center;\n padding: 0 0 0 1rem;\n background: transparent;\n border-radius: 0;\n z-index: auto;\n opacity: 0;\n animation: fade-in 0.1s ease forwards;\n animation-delay: 0.5s;\n }\n\n .search-container slot {\n width: auto;\n }\n }\n\n @media (min-width: 990px) {\n .screen-name {\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 165px;\n }\n\n .upload span {\n display: inline-block;\n vertical-align: middle;\n }\n }\n`;\n"]}
1
+ {"version":3,"file":"primary-nav.js","sourceRoot":"","sources":["../../../src/styles/primary-nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2WjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n button:focus,\n input:focus {\n outline: none;\n }\n\n nav {\n position: relative;\n display: flex;\n height: 4rem;\n grid-template-areas: 'hamburger empty heart search user';\n -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem 4rem;\n grid-template-columns: 4rem auto 4rem 4rem 4rem;\n -ms-grid-rows: 100%;\n grid-template-rows: 100%;\n background: var(--primaryNavBg);\n border-bottom: 1px solid var(--primaryNavBottomBorder);\n }\n\n nav.hide-search {\n grid-template-areas: 'hamburger empty heart user';\n -ms-grid-columns: 4rem minmax(1rem, 100%) 4rem 4rem;\n grid-template-columns: 4rem auto 4rem 4rem;\n }\n\n .right-side-section {\n display: flex;\n margin-left: auto;\n user-select: none;\n }\n button {\n background: none;\n color: inherit;\n border: none;\n font: inherit;\n cursor: pointer;\n }\n\n .branding {\n position: static;\n float: left;\n margin: 0 !important;\n padding: 0 5px 0 10px;\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n }\n\n slot,\n .branding {\n display: flex;\n justify-content: left;\n align-items: center;\n }\n\n media-menu {\n flex: 1;\n justify-self: stretch;\n }\n\n .ia-logo {\n height: 3rem;\n width: 2.7rem;\n display: inline-block;\n }\n .ia-wordmark {\n height: 3rem;\n width: 9.5rem;\n }\n .ia-logo,\n .ia-wordmark {\n margin-right: 5px;\n }\n\n .hamburger {\n -ms-grid-row: 1;\n -ms-grid-column: 1;\n grid-area: hamburger;\n padding: 0;\n }\n .hamburger svg {\n height: 4rem;\n width: 4rem;\n fill: var(--activeColor);\n }\n\n .mobile-donate-link {\n display: inline-block;\n }\n .mobile-donate-link svg {\n height: 4rem;\n width: 4rem;\n }\n .mobile-donate-link .fill-color {\n fill: rgb(255, 0, 0);\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n white-space: nowrap;\n clip: rect(1px, 1px, 1px, 1px);\n -webkit-clip-path: inset(50%);\n clip-path: inset(50%);\n user-select: none;\n }\n\n .search-trigger {\n padding: 0;\n }\n .search-trigger svg {\n height: 4rem;\n width: 4rem;\n }\n .search-trigger .fill-color {\n fill: var(--iconFill);\n }\n\n .search-activated {\n position: relative;\n z-index: 3;\n }\n\n .search-container {\n display: none;\n }\n\n .search-container.open {\n display: flex;\n position: absolute;\n top: 0;\n right: 4rem;\n bottom: 0;\n left: 4rem;\n z-index: 3;\n padding: 0.5rem;\n border-radius: 1rem 1rem 0 0;\n background: var(--primaryNavBg);\n align-items: center;\n animation: fade-in 0.2s forwards;\n }\n\n .search-container ::slotted(*) {\n display: block;\n }\n\n .search-container slot {\n width: 100%;\n }\n\n @keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n\n .upload {\n display: none;\n }\n\n .upload span {\n display: none;\n }\n\n .upload svg {\n height: 3rem;\n width: 3rem;\n }\n\n .screen-name {\n display: none;\n font-size: 1.3rem;\n vertical-align: middle;\n text-transform: uppercase;\n }\n\n .user-menu {\n color: var(--lightTextColor);\n padding: 0.5rem;\n height: 100%;\n }\n\n button.user-menu:hover,\n button.user-menu:focus {\n color: var(--linkHoverColor);\n outline: none;\n }\n\n .user-menu.active {\n border-radius: 1rem 1rem 0 0;\n background: var(--activeButtonBg);\n }\n\n .user-menu img {\n display: block;\n width: 3rem;\n height: 3rem;\n }\n\n .link-home {\n text-decoration: none;\n display: inline-flex;\n }\n a.link-home:focus,\n a.link-home:focus-visible {\n outline-offset: 1px;\n }\n\n @media only screen and (min-width: 890px) and (max-device-width: 905px) {\n .branding.second-logo {\n padding-right: 0;\n }\n }\n\n @media (min-width: 906px) {\n .branding.second-logo {\n padding-right: 20px;\n }\n }\n\n @media (max-width: 889px) {\n slot[name='opt-sec-logo'] {\n display: none;\n }\n\n .right-side-section {\n display: initial;\n }\n .right-side-section .user-info {\n float: right;\n }\n }\n\n @media (min-width: 890px) {\n :host {\n --userIconWidth: 3.2rem;\n --userIconHeight: 3.2rem;\n }\n\n nav {\n display: flex;\n z-index: 4;\n height: 5rem;\n padding-right: 1.5rem;\n }\n\n slot[name='opt-sec-logo-mobile'] {\n display: none;\n }\n\n .ia-logo,\n .ia-wordmark {\n margin-right: 10px;\n }\n\n .hamburger,\n .search-trigger,\n .mobile-donate-link {\n display: none;\n }\n\n .user-info {\n display: block;\n float: right;\n vertical-align: middle;\n height: 100%;\n }\n\n .user-info .user-menu img {\n height: 3rem;\n width: 3rem;\n margin-right: 0.5rem;\n }\n\n .user-menu {\n padding: 1rem 0.5rem;\n }\n .user-menu.active {\n background: transparent;\n }\n\n .user-menu img {\n display: inline-block;\n vertical-align: middle;\n margin-right: 0.5rem;\n }\n\n .upload {\n display: block;\n padding: 1rem 0.5rem;\n float: right;\n font-size: 1.4rem;\n text-transform: uppercase;\n text-decoration: none;\n color: var(--lightTextColor);\n }\n .upload:active,\n .upload:focus,\n .upload:hover {\n color: var(--linkHoverColor);\n }\n .upload:focus-visible {\n outline: none;\n }\n\n .upload svg {\n vertical-align: middle;\n fill: var(--iconFill);\n }\n\n .upload:hover svg,\n .upload:focus svg,\n .upload:active svg {\n fill: var(--linkHoverColor);\n }\n\n nav-search {\n float: right;\n margin-left: 1rem;\n }\n\n .search-container,\n .search-container.open {\n display: flex;\n position: static;\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n align-items: center;\n padding: 0 0 0 1rem;\n background: transparent;\n border-radius: 0;\n z-index: auto;\n }\n\n .search-container slot {\n width: auto;\n }\n }\n\n @media (min-width: 990px) {\n .screen-name {\n display: inline-block;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n max-width: 165px;\n }\n\n .upload span {\n display: inline-block;\n vertical-align: middle;\n }\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetarchive/ia-topnav",
3
- "version": "1.4.1-alpha-webdev8259.9",
3
+ "version": "1.4.1-alpha-webdev8259.10",
4
4
  "description": "Top nav for Internet Archive",
5
5
  "license": "AGPL-3.0-only",
6
6
  "main": "dist/index.js",
@@ -342,9 +342,6 @@ export default css`
342
342
  background: transparent;
343
343
  border-radius: 0;
344
344
  z-index: auto;
345
- opacity: 0;
346
- animation: fade-in 0.1s ease forwards;
347
- animation-delay: 0.5s;
348
345
  }
349
346
 
350
347
  .search-container slot {