@internetarchive/ia-topnav 1.1.19 → 1.1.21-alpha

package/src/styles/dropdown-menu.js

@@ -1,143 +1,143 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  :host {
-    --topOffset: -1500px;
-  }
-
-  .nav-container {
-    position: relative;
-  }
-
-  nav {
-    position: absolute;
-    right: 0;
-    z-index: 2;
-    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);
-  }
-
-  .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);
-  }
-
-  @media (min-width: 890px) {
-    nav {
-      overflow: visible;
-      top: 0;
-      left: auto;
-      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: #fff;
-      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;
-    }
-
-    a:hover,
-    a:active,
-    a:focus {
-      color: var(--linkHoverColor);
-      background: var(--linkColor);
-    }
-
-    .initial,
-    .closed {
-      opacity: 0;
-      transition-duration: 0.2s;
-    }
-
-    .open {
-      opacity: 1;
-      overflow: visible;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  :host {
+    --topOffset: -1500px;
+  }
+
+  .nav-container {
+    position: relative;
+  }
+
+  nav {
+    position: absolute;
+    right: 0;
+    z-index: 2;
+    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);
+  }
+
+  .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);
+  }
+
+  @media (min-width: 890px) {
+    nav {
+      overflow: visible;
+      top: 0;
+      left: auto;
+      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: #fff;
+      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;
+    }
+
+    a:hover,
+    a:active,
+    a:focus {
+      color: var(--linkHoverColor);
+      background: var(--linkColor);
+    }
+
+    .initial,
+    .closed {
+      opacity: 0;
+      transition-duration: 0.2s;
+    }
+
+    .open {
+      opacity: 1;
+      overflow: visible;
+    }
+  }
+`;

package/src/styles/ia-topnav.js

@@ -1,88 +1,88 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  :host {
-    --white: #fff;
-    --grey13: #222;
-    --grey20: #333;
-    --grey40: #666;
-    --grey28: #474747;
-    --grey60: #999;
-    --grey66: #aaa;
-    --grey80: #ccc;
-    --errorYellow: #ffcd27;
-
-    --linkColor: #428bca;
-    --linkHoverColor: var(--white);
-    --subnavLinkColor: var(--grey66);
-    --primaryTextColor: var(--white);
-    --inverseTextColor: var(--grey20);
-    --lightTextColor: var(--grey60);
-    --activeColor: var(--white);
-    --activeButtonBg: var(--grey20);
-    --iconFill: var(--grey60);
-
-    --searchActiveBg: var(--grey20);
-    --searchActiveInputBg: var(--white);
-    --searchMenuBg: var(--grey20);
-    --desktopSearchIconFill: var(--grey20);
-
-    --mediaMenuBg: var(--grey13);
-    --mediaLabelDesktopColor: var(--grey60);
-    --activeDesktopMenuIcon: var(--grey28);
-
-    --mediaSliderBg: var(--grey20);
-    --mediaSliderDesktopBg: var(--grey28);
-
-    --primaryNavBg: var(--grey13);
-    --primaryNavBottomBorder: var(--grey20);
-
-    --desktopSubnavBg: var(--grey20);
-
-    --dropdownMenuBg: var(--grey20);
-    --dropdownMenuInfoItem: var(--grey60);
-    --dropdownMenuDivider: var(--grey40);
-
-    --loginTextColor: var(--grey60);
-
-    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --logoWidthTablet: 263px;
-
-    --savePageSubmitBg: var(--grey13);
-    --savePageSubmitText: var(--white);
-    --savePageInputBorder: var(--grey60);
-    --savePageErrorText: var(--errorYellow);
-
-    color: var(--primaryTextColor);
-    font-size: 2rem;
-    font-family: var(--themeFontFamily);
-  }
-
-  primary-nav:focus {
-    outline: none !important;
-  }
-
-  #close-layer {
-    display: none;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 0;
-  }
-  #close-layer.visible {
-    display: block;
-  }
-
-  .topnav {
-    position: relative;
-    z-index: 3;
-  }
-
-  @media (max-width: 889px) {
-    desktop-subnav {
-      display: none;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  :host {
+    --white: #fff;
+    --grey13: #222;
+    --grey20: #333;
+    --grey40: #666;
+    --grey28: #474747;
+    --grey60: #999;
+    --grey66: #aaa;
+    --grey80: #ccc;
+    --errorYellow: #ffcd27;
+
+    --linkColor: #428bca;
+    --linkHoverColor: var(--white);
+    --subnavLinkColor: var(--grey66);
+    --primaryTextColor: var(--white);
+    --inverseTextColor: var(--grey20);
+    --lightTextColor: var(--grey60);
+    --activeColor: var(--white);
+    --activeButtonBg: var(--grey20);
+    --iconFill: var(--grey60);
+
+    --searchActiveBg: var(--grey20);
+    --searchActiveInputBg: var(--white);
+    --searchMenuBg: var(--grey20);
+    --desktopSearchIconFill: var(--grey20);
+
+    --mediaMenuBg: var(--grey13);
+    --mediaLabelDesktopColor: var(--grey60);
+    --activeDesktopMenuIcon: var(--grey28);
+
+    --mediaSliderBg: var(--grey20);
+    --mediaSliderDesktopBg: var(--grey28);
+
+    --primaryNavBg: var(--grey13);
+    --primaryNavBottomBorder: var(--grey20);
+
+    --desktopSubnavBg: var(--grey20);
+
+    --dropdownMenuBg: var(--grey20);
+    --dropdownMenuInfoItem: var(--grey60);
+    --dropdownMenuDivider: var(--grey40);
+
+    --loginTextColor: var(--grey60);
+
+    --themeFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --logoWidthTablet: 263px;
+
+    --savePageSubmitBg: var(--grey13);
+    --savePageSubmitText: var(--white);
+    --savePageInputBorder: var(--grey60);
+    --savePageErrorText: var(--errorYellow);
+
+    color: var(--primaryTextColor);
+    font-size: 2rem;
+    font-family: var(--themeFontFamily);
+  }
+
+  primary-nav:focus {
+    outline: none !important;
+  }
+
+  #close-layer {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 0;
+  }
+  #close-layer.visible {
+    display: block;
+  }
+
+  .topnav {
+    position: relative;
+    z-index: 3;
+  }
+
+  @media (max-width: 889px) {
+    desktop-subnav {
+      display: none;
+    }
+  }
+`;

package/src/styles/login-button.js

@@ -1,70 +1,70 @@
-import { css } from 'https://offshoot.ux.archive.org/lit.js';
-
-export default css`
-  .dropdown-toggle {
-    display: block;
-    height: 4rem;
-    font-size: 1.6rem;
-    text-transform: uppercase;
-    text-decoration: none;
-    color: var(--grey80);
-    cursor: pointer;
-  }
-
-  .dropdown-toggle .fill-color {
-    fill: var(--iconFill);
-  }
-
-  .dropdown-toggle:active .fill-color,
-  .dropdown-toggle:focus .fill-color,
-  .dropdown-toggle:hover .fill-color {
-    fill: var(--linkHoverColor);
-  }
-
-  .active {
-    border-radius: 1rem 1rem 0 0;
-    background: var(--activeButtonBg);
-  }
-
-  .active .fill-color {
-    fill: var(--activeColor);
-  }
-
-  span {
-    display: none;
-    font-size: 1.4rem;
-    text-transform: uppercase;
-    color: var(--loginTextColor);
-  }
-
-  span a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    color: var(--linkHoverColor);
-  }
-
-  @media (min-width: 890px) {
-    .logged-out-toolbar {
-      transform: translateY(-.5rem);
-    }
-
-    .active {
-      background: transparent;
-    }
-
-    .dropdown-toggle {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    span {
-      display: inline;
-      vertical-align: middle;
-    }
-  }
-`;
+import { css } from 'https://offshoot.ux.archive.org/lit.js';
+
+export default css`
+  .dropdown-toggle {
+    display: block;
+    height: 4rem;
+    font-size: 1.6rem;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: var(--grey80);
+    cursor: pointer;
+  }
+
+  .dropdown-toggle .fill-color {
+    fill: var(--iconFill);
+  }
+
+  .dropdown-toggle:active .fill-color,
+  .dropdown-toggle:focus .fill-color,
+  .dropdown-toggle:hover .fill-color {
+    fill: var(--linkHoverColor);
+  }
+
+  .active {
+    border-radius: 1rem 1rem 0 0;
+    background: var(--activeButtonBg);
+  }
+
+  .active .fill-color {
+    fill: var(--activeColor);
+  }
+
+  span {
+    display: none;
+    font-size: 1.4rem;
+    text-transform: uppercase;
+    color: var(--loginTextColor);
+  }
+
+  span a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  a:hover,
+  a:active,
+  a:focus {
+    color: var(--linkHoverColor);
+  }
+
+  @media (min-width: 890px) {
+    .logged-out-toolbar {
+      transform: translateY(-.5rem);
+    }
+
+    .active {
+      background: transparent;
+    }
+
+    .dropdown-toggle {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    span {
+      display: inline;
+      vertical-align: middle;
+    }
+  }
+`;