@internetarchive/ia-topnav 2.0.1 → 2.1.0-alpha-webdev8170.0

package/src/styles/dropdown-menu.ts

@@ -1,172 +1,173 @@
-import { css } from 'lit';
-
-export default css`
-  .nav-container {
-    position: relative;
-  }
-
-  nav {
-    position: absolute;
-    right: 0;
-    z-index: 4;
-    overflow: hidden;
-    font-size: 1.6rem;
-    background-color: var(--dropdownMenuBg);
-    transition-property: top;
-    transition-duration: 0.2s;
-    transition-timing-function: ease;
-  }
-
-  .initial,
-  .closed {
-    top: var(--topOffset, -1500px);
-  }
-
-  .closed {
-    transition-duration: 0.5s;
-  }
-
-  .open {
-    max-width: 100vw;
-    overflow: auto;
-  }
-
-  h3 {
-    padding: 0.6rem 2rem;
-    margin: 0;
-    font-size: inherit;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  ul {
-    padding: 0.4rem 0 0.7rem 0;
-    margin: 0;
-    list-style: none;
-    /* viewport height - nav height + bottom nav border */
-    max-height: calc(100vh - 7.2rem + 1px);
-    overflow: auto;
-    box-sizing: border-box;
-  }
-
-  .divider {
-    margin: 0.5rem 0;
-    border-bottom: 1px solid var(--dropdownMenuDivider);
-  }
-
-  a,
-  .info-item {
-    display: block;
-    color: var(--primaryTextColor);
-    text-decoration: none;
-    padding: 1rem 2rem;
-  }
-
-  .info-item {
-    font-size: 0.8em;
-    color: var(--dropdownMenuInfoItem);
-  }
-
-  .callout {
-    position: absolute;
-    margin-left: 10px;
-    padding: 0 5px;
-    border-radius: 2px;
-    background: #fee257;
-    color: #2c2c2c;
-    font-size: 1.4rem;
-    font-weight: bold;
-  }
-
-  a.mobile-upload {
-    display: flex;
-    justify-content: left;
-    align-items: center;
-  }
-  a.mobile-upload svg {
-    fill: var(--white);
-    margin-right: 1rem;
-    height: 1.4rem;
-    width: 1.4rem;
-  }
-
-  @media (min-width: 890px) {
-    nav {
-      display: flex;
-      overflow: visible;
-      top: 0;
-      left: auto;
-      right: var(--dropdownMenuRight, 0);
-      z-index: 5;
-      transition: opacity 0.2s ease-in-out;
-      font-size: 1.4rem;
-      border-radius: 2px;
-      background: var(--primaryTextColor);
-      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
-    }
-
-    nav:after {
-      position: absolute;
-      right: 7px;
-      top: -7px;
-      width: 12px;
-      height: 7px;
-      box-sizing: border-box;
-      color: var(--white);
-      content: '';
-      border-bottom: 7px solid currentColor;
-      border-left: 6px solid transparent;
-      border-right: 6px solid transparent;
-    }
-
-    h3 {
-      display: none;
-    }
-
-    ul {
-      /* viewport height - nav height + bottom nav border */
-      max-height: calc(100vh - 8.5rem + 1px);
-    }
-
-    .divider {
-      border-bottom-color: var(--dropdownMenuDivider);
-    }
-
-    a {
-      padding: 0.5rem 2rem;
-      color: var(--inverseTextColor);
-      transition:
-        background 0.1s ease-out,
-        color 0.1s ease-out;
-    }
-
-    .info-item {
-      padding: 0.5rem 2rem;
-      font-size: 0.8em;
-      color: var(--inverseDropdownMenuInfoItem);
-    }
-
-    a:hover,
-    a:active,
-    a:focus {
-      color: var(--linkHoverColor);
-      background: var(--linkColor);
-      outline: none;
-    }
-
-    .initial,
-    .closed {
-      opacity: 0;
-      transition-duration: 0.2s;
-    }
-
-    .open {
-      opacity: 1;
-      overflow: visible;
-    }
-
-    a.mobile-upload {
-      display: none;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  .nav-container {
+    position: relative;
+  }
+
+  nav {
+    position: absolute;
+    right: 0;
+    z-index: 4;
+    overflow: hidden;
+    font-size: 1.6rem;
+    background-color: var(--dropdownMenuBg);
+    transition-property: top;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+
+  .initial,
+  .closed {
+    top: var(--topOffset, -1500px);
+  }
+
+  .closed {
+    transition-duration: 0.5s;
+  }
+
+  .open {
+    max-width: 100vw;
+    overflow: auto;
+  }
+
+  h3 {
+    padding: 0.6rem 2rem;
+    margin: 0;
+    font-size: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ul {
+    padding: 0.4rem 0 0.7rem 0;
+    margin: 0;
+    list-style: none;
+    /* viewport height - nav height + bottom nav border */
+    max-height: calc(100vh - 7.2rem + 1px);
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .divider {
+    margin: 0.5rem 0;
+    border-bottom: 1px solid var(--dropdownMenuDivider);
+  }
+
+  a,
+  .info-item {
+    display: block;
+    color: var(--primaryTextColor);
+    text-decoration: none;
+    padding: 1rem 2rem;
+  }
+
+  .info-item {
+    font-size: 0.8em;
+    color: var(--dropdownMenuInfoItem);
+  }
+
+  .callout {
+    position: absolute;
+    margin-left: 10px;
+    padding: 0 5px;
+    border-radius: 2px;
+    background: #fee257;
+    color: #2c2c2c;
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+
+  a.mobile-upload {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+  }
+  a.mobile-upload svg {
+    fill: var(--white);
+    margin-right: 1rem;
+    height: 1.4rem;
+    width: 1.4rem;
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    nav {
+      display: flex;
+      overflow: visible;
+      top: 0;
+      left: auto;
+      right: var(--dropdownMenuRight, 0);
+      z-index: 5;
+      transition: opacity 0.2s ease-in-out;
+      font-size: 1.4rem;
+      border-radius: 2px;
+      background: var(--primaryTextColor);
+      box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15);
+    }
+
+    nav:after {
+      position: absolute;
+      right: 7px;
+      top: -7px;
+      width: 12px;
+      height: 7px;
+      box-sizing: border-box;
+      color: var(--white);
+      content: '';
+      border-bottom: 7px solid currentColor;
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+
+    h3 {
+      display: none;
+    }
+
+    ul {
+      /* viewport height - nav height + bottom nav border */
+      max-height: calc(100vh - 8.5rem + 1px);
+    }
+
+    .divider {
+      border-bottom-color: var(--dropdownMenuDivider);
+    }
+
+    a {
+      padding: 0.5rem 2rem;
+      color: var(--inverseTextColor);
+      transition:
+        background 0.1s ease-out,
+        color 0.1s ease-out;
+    }
+
+    .info-item {
+      padding: 0.5rem 2rem;
+      font-size: 0.8em;
+      color: var(--inverseDropdownMenuInfoItem);
+    }
+
+    a:hover,
+    a:active,
+    a:focus {
+      color: var(--linkHoverColor);
+      background: var(--linkColor);
+      outline: none;
+    }
+
+    .initial,
+    .closed {
+      opacity: 0;
+      transition-duration: 0.2s;
+    }
+
+    .open {
+      opacity: 1;
+      overflow: visible;
+    }
+
+    a.mobile-upload {
+      display: none;
+    }
+  }
+`;

package/src/styles/ia-topnav.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   :host {
@@ -77,7 +78,7 @@ export default css`
     z-index: 4;
   }
 
-  @media (max-width: 889px) {
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
     desktop-subnav {
       display: none;
     }

package/src/styles/login-button.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   .logged-out-menu {
@@ -61,7 +62,7 @@ export default css`
     outline-offset: inherit !important;
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     .logged-out-toolbar {
       padding: 1rem 0.5rem;
       vertical-align: middle;

package/src/styles/media-button.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   a {
@@ -64,7 +65,7 @@ export default css`
     fill: #f00;
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     .menu-item {
       width: auto;
       height: 5rem;

package/src/styles/media-menu.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   :host {
@@ -22,7 +23,7 @@ export default css`
   }
 
   /* Mobile view styles */
-  @media (max-width: 889px) {
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
     .media-menu-inner {
       position: absolute;
       width: 100%;
@@ -50,7 +51,7 @@ export default css`
   }
 
   /* Desktop view styles */
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     .media-menu-inner {
       display: block;
       position: static;

package/src/styles/media-slider.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   .media-slider-container {
@@ -40,7 +41,7 @@ export default css`
     padding: 1rem;
   }
 
-  @media (max-width: 889px) {
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
     .overflow-clip.open {
       display: block;
       height: 35.8rem;
@@ -49,7 +50,7 @@ export default css`
     }
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     .overflow-clip {
       display: block;
     }

package/src/styles/media-subnav.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 import { subnavListCSS } from './base';
 
 export default [
@@ -45,7 +46,7 @@ export default [
       display: none;
     }
 
-    @media (min-width: 890px) {
+    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
       :host {
         display: -ms-grid;
         display: grid;

package/src/styles/primary-nav.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   button:focus,
@@ -211,7 +212,7 @@ export default css`
     outline-offset: 1px;
   }
 
-  @media only screen and (min-width: 890px) and (max-device-width: 905px) {
+  @media only screen and (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) and (max-device-width: 905px) {
     .branding.second-logo {
       padding-right: 0;
     }
@@ -223,7 +224,7 @@ export default css`
     }
   }
 
-  @media (max-width: 889px) {
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
     slot[name='opt-sec-logo'] {
       display: none;
     }
@@ -236,7 +237,7 @@ export default css`
     }
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     :host {
       --userIconWidth: 3.2rem;
       --userIconHeight: 3.2rem;

package/src/styles/save-page-form.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   div {
@@ -45,7 +46,7 @@ export default css`
     display: block;
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     h3 {
       margin-top: 0;
       font: normal 100 1.6rem var(--themeFontFamily);

package/src/styles/wayback-search.ts

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 
 export default css`
   form {
@@ -34,7 +35,7 @@ export default css`
     transform: translateY(-50%);
   }
 
-  @media (min-width: 890px) {
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
     fieldset a,
     .search-field {
       display: block;

package/src/styles/wayback-slider.ts

@@ -1,10 +1,11 @@
 import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
 import { subnavListCSS } from './base';
 
 export default [
   subnavListCSS,
   css`
-    @media (min-width: 890px) {
+    @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
       :host {
         display: block;
         grid-column: 1 / 4;

package/src/user-menu.ts

@@ -1,31 +1,31 @@
-import { CSSResultGroup, html } from 'lit';
-import DropdownMenu from './dropdown-menu';
-import dropdownStyles from './styles/dropdown-menu';
-import { customElement, property } from 'lit/decorators.js';
-
-@customElement('user-menu')
-export default class UserMenu extends DropdownMenu {
-  @property({ type: String }) username = '';
-  @property({ type: String }) screenName = '';
-
-  static get styles(): CSSResultGroup {
-    return dropdownStyles;
-  }
-
-  render() {
-    return html`
-      <div class="nav-container">
-        <nav
-          class="${this.menuClass}"
-          aria-hidden=${!this.open}
-          aria-expanded=${this.open}
-        >
-          <h3>${this.screenName}</h3>
-          <ul>
-            ${this.dropdownItems}
-          </ul>
-        </nav>
-      </div>
-    `;
-  }
-}
+import { CSSResultGroup, html } from 'lit';
+import DropdownMenu from './dropdown-menu';
+import dropdownStyles from './styles/dropdown-menu';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('user-menu')
+export default class UserMenu extends DropdownMenu {
+  @property({ type: String }) username = '';
+  @property({ type: String }) screenName = '';
+
+  static get styles(): CSSResultGroup {
+    return dropdownStyles;
+  }
+
+  render() {
+    return html`
+      <div class="nav-container">
+        <nav
+          class="${this.menuClass}"
+          aria-hidden=${!this.open}
+          aria-expanded=${this.open}
+        >
+          <h3>${this.screenName}</h3>
+          <ul>
+            ${this.dropdownItems}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+}