@internetarchive/ia-topnav 2.1.0 → 2.1.1

package/src/styles/ia-topnav.ts

@@ -1,86 +1,86 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export default css`
-  :host {
-    --white: #fff;
-    --grey13: #222;
-    --grey20: #333;
-    --grey40: #666;
-    --grey28: #474747;
-    --grey60: #999;
-    --grey66: #aaa;
-    --grey80: #ccc;
-    --greya0: #a0a0a0;
-    --grey6f: #6f6f6f;
-    --errorYellow: #ffcd27;
-
-    --linkColor: #4b64ff;
-    --linkHoverColor: var(--white);
-    --subnavLinkColor: var(--grey66);
-    --primaryTextColor: var(--white);
-    --inverseTextColor: var(--grey20);
-    --lightTextColor: var(--grey60);
-    --activeColor: var(--white);
-    --activeButtonBg: var(--grey20);
-    --iconFill: var(--grey60);
-
-    --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(--greya0);
-    --dropdownMenuDivider: var(--grey40);
-    --inverseDropdownMenuInfoItem: var(--grey6f);
-
-    --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-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: 3;
-  }
-  #close-layer.visible {
-    display: block;
-  }
-
-  .topnav {
-    position: relative;
-    z-index: 4;
-  }
-
-  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
-    desktop-subnav {
-      display: none;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  :host {
+    --white: #fff;
+    --grey13: #222;
+    --grey20: #333;
+    --grey40: #666;
+    --grey28: #474747;
+    --grey60: #999;
+    --grey66: #aaa;
+    --grey80: #ccc;
+    --greya0: #a0a0a0;
+    --grey6f: #6f6f6f;
+    --errorYellow: #ffcd27;
+
+    --linkColor: #4b64ff;
+    --linkHoverColor: var(--white);
+    --subnavLinkColor: var(--grey66);
+    --primaryTextColor: var(--white);
+    --inverseTextColor: var(--grey20);
+    --lightTextColor: var(--grey60);
+    --activeColor: var(--white);
+    --activeButtonBg: var(--grey20);
+    --iconFill: var(--grey60);
+
+    --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(--greya0);
+    --dropdownMenuDivider: var(--grey40);
+    --inverseDropdownMenuInfoItem: var(--grey6f);
+
+    --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-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: 3;
+  }
+  #close-layer.visible {
+    display: block;
+  }
+
+  .topnav {
+    position: relative;
+    z-index: 4;
+  }
+
+  @media (max-width: ${TOPNAV_MOBILE_BREAKPOINT - 1}px) {
+    desktop-subnav {
+      display: none;
+    }
+  }
+`;

package/src/styles/login-button.ts

@@ -1,91 +1,91 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export default css`
-  .logged-out-menu {
-    background: inherit;
-    border: none;
-  }
-  .logged-out-menu:focus-visible {
-    outline: none;
-    border: none;
-  }
-  .dropdown-toggle {
-    display: block;
-    text-transform: uppercase;
-    color: var(--grey80);
-    cursor: pointer;
-  }
-
-  .dropdown-toggle svg {
-    height: 100%;
-    width: 4rem;
-  }
-
-  .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;
-    outline: 0;
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    color: var(--linkHoverColor) !important;
-    outline: none !important;
-    outline-offset: inherit !important;
-  }
-
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    .logged-out-toolbar {
-      padding: 1rem 0.5rem;
-      vertical-align: middle;
-    }
-
-    .active {
-      background: transparent;
-    }
-
-    .dropdown-toggle {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .dropdown-toggle svg {
-      height: 3rem;
-      width: 3rem;
-      display: block;
-    }
-
-    span {
-      display: inline;
-      vertical-align: middle;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  .logged-out-menu {
+    background: inherit;
+    border: none;
+  }
+  .logged-out-menu:focus-visible {
+    outline: none;
+    border: none;
+  }
+  .dropdown-toggle {
+    display: block;
+    text-transform: uppercase;
+    color: var(--grey80);
+    cursor: pointer;
+  }
+
+  .dropdown-toggle svg {
+    height: 100%;
+    width: 4rem;
+  }
+
+  .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;
+    outline: 0;
+  }
+
+  a:hover,
+  a:active,
+  a:focus {
+    color: var(--linkHoverColor) !important;
+    outline: none !important;
+    outline-offset: inherit !important;
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    .logged-out-toolbar {
+      padding: 1rem 0.5rem;
+      vertical-align: middle;
+    }
+
+    .active {
+      background: transparent;
+    }
+
+    .dropdown-toggle {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .dropdown-toggle svg {
+      height: 3rem;
+      width: 3rem;
+      display: block;
+    }
+
+    span {
+      display: inline;
+      vertical-align: middle;
+    }
+  }
+`;

package/src/styles/media-button.ts

@@ -1,157 +1,157 @@
-import { css } from 'lit';
-import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
-
-export default css`
-  a {
-    display: inline-block;
-    text-decoration: none;
-  }
-
-  .menu-item {
-    display: inline-block;
-    width: 100%;
-    padding: 0;
-    font-size: 1.6rem;
-    text-align: left;
-    background: transparent;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-  }
-
-  .menu-item:focus {
-    outline: none;
-  }
-
-  .label {
-    display: inline-block;
-    padding: 0;
-    font-weight: 400;
-    color: var(--primaryTextColor);
-    text-align: left;
-    vertical-align: middle;
-  }
-
-  .menu-item > .icon {
-    display: inline-flex;
-    vertical-align: middle;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    justify-content: center;
-  }
-
-  .menu-item > .icon > svg {
-    height: 4rem;
-    width: 4rem;
-  }
-
-  .menu-item.selected .icon {
-    background-color: var(--activeButtonBg);
-    border-radius: 1rem 0 0 1rem;
-  }
-
-  .icon .fill-color {
-    fill: #999;
-  }
-
-  .icon.active .fill-color {
-    fill: #fff;
-  }
-
-  .donate .fill-color {
-    fill: #f00;
-  }
-
-  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
-    .menu-item {
-      width: auto;
-      height: 5rem;
-      color: var(--mediaLabelDesktopColor);
-      display: inline-flex;
-    }
-    .menu-item:hover,
-    .menu-item:active,
-    .menu-item:focus {
-      color: var(--linkHoverColor);
-    }
-
-    .menu-item:hover .fill-color,
-    .menu-item:active .fill-color,
-    .menu-item:focus .fill-color {
-      fill: var(--linkHoverColor);
-    }
-
-    .label {
-      display: none;
-    }
-
-    .label,
-    .web:after {
-      padding-right: 1rem;
-      font-size: 1.3rem;
-      text-transform: uppercase;
-      color: inherit;
-    }
-
-    .web:after {
-      display: none;
-      content: 'web';
-    }
-    .donate,
-    .more {
-      display: none;
-    }
-
-    .menu-item.selected {
-      background: var(--activeDesktopMenuIcon);
-    }
-
-    .menu-item.selected .label,
-    .menu-item.selected.web:after {
-      color: var(--linkHoverColor);
-    }
-
-    .menu-item.selected .icon {
-      background: transparent;
-    }
-
-    /* selected state icon colors */
-    .web.selected .fill-color {
-      fill: #ffcd27;
-    }
-
-    .texts.selected .fill-color {
-      fill: #faab3c;
-    }
-
-    .video.selected .fill-color {
-      fill: #f1644b;
-    }
-
-    .audio.selected .fill-color {
-      fill: #00adef;
-    }
-
-    .software.selected .fill-color {
-      fill: #9ecc4f;
-    }
-
-    .images.selected .fill-color {
-      fill: #aa99c9;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .label,
-    .web:after {
-      display: inline;
-    }
-
-    .web .label {
-      display: none;
-    }
-  }
-`;
+import { css } from 'lit';
+import { TOPNAV_MOBILE_BREAKPOINT } from '../models';
+
+export default css`
+  a {
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  .menu-item {
+    display: inline-block;
+    width: 100%;
+    padding: 0;
+    font-size: 1.6rem;
+    text-align: left;
+    background: transparent;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+
+  .menu-item:focus {
+    outline: none;
+  }
+
+  .label {
+    display: inline-block;
+    padding: 0;
+    font-weight: 400;
+    color: var(--primaryTextColor);
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  .menu-item > .icon {
+    display: inline-flex;
+    vertical-align: middle;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+
+  .menu-item > .icon > svg {
+    height: 4rem;
+    width: 4rem;
+  }
+
+  .menu-item.selected .icon {
+    background-color: var(--activeButtonBg);
+    border-radius: 1rem 0 0 1rem;
+  }
+
+  .icon .fill-color {
+    fill: #999;
+  }
+
+  .icon.active .fill-color {
+    fill: #fff;
+  }
+
+  .donate .fill-color {
+    fill: #f00;
+  }
+
+  @media (min-width: ${TOPNAV_MOBILE_BREAKPOINT}px) {
+    .menu-item {
+      width: auto;
+      height: 5rem;
+      color: var(--mediaLabelDesktopColor);
+      display: inline-flex;
+    }
+    .menu-item:hover,
+    .menu-item:active,
+    .menu-item:focus {
+      color: var(--linkHoverColor);
+    }
+
+    .menu-item:hover .fill-color,
+    .menu-item:active .fill-color,
+    .menu-item:focus .fill-color {
+      fill: var(--linkHoverColor);
+    }
+
+    .label {
+      display: none;
+    }
+
+    .label,
+    .web:after {
+      padding-right: 1rem;
+      font-size: 1.3rem;
+      text-transform: uppercase;
+      color: inherit;
+    }
+
+    .web:after {
+      display: none;
+      content: 'web';
+    }
+    .donate,
+    .more {
+      display: none;
+    }
+
+    .menu-item.selected {
+      background: var(--activeDesktopMenuIcon);
+    }
+
+    .menu-item.selected .label,
+    .menu-item.selected.web:after {
+      color: var(--linkHoverColor);
+    }
+
+    .menu-item.selected .icon {
+      background: transparent;
+    }
+
+    /* selected state icon colors */
+    .web.selected .fill-color {
+      fill: #ffcd27;
+    }
+
+    .texts.selected .fill-color {
+      fill: #faab3c;
+    }
+
+    .video.selected .fill-color {
+      fill: #f1644b;
+    }
+
+    .audio.selected .fill-color {
+      fill: #00adef;
+    }
+
+    .software.selected .fill-color {
+      fill: #9ecc4f;
+    }
+
+    .images.selected .fill-color {
+      fill: #aa99c9;
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .label,
+    .web:after {
+      display: inline;
+    }
+
+    .web .label {
+      display: none;
+    }
+  }
+`;