@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/collection/components/global-nav/style/global-nav.css

@@ -79,10 +79,10 @@
 .site-content {
   display: flex;
   transition: min-height 0.2s ease;
-  min-height: calc(100% - 61px);
   position: relative;
   z-index: auto;
   align-items: stretch;
+  flex: 1;
 }
 
 .mask {
@@ -159,7 +159,8 @@
   flex: 0 0 auto;
 }
 .main-bar > * ::slotted(nano-nav-item[slot=icon]) {
-  margin-inline-start: 11px;
+  -webkit-margin-start: 11px;
+          margin-inline-start: 11px;
 }
 .main-bar > * ::slotted(nano-nav-item),
 .main-bar > * nano-nav-item {
@@ -167,21 +168,32 @@
   --secondary-bg-color: var(--bar-dropdown-bg);
   --secondary-color: var(--bar-dropdown-text);
   --bg-color-open: var(--bar-background);
+  --padding-top: 7px;
+  --padding-bottom: 7px;
+  --padding-end: 2px;
+  --padding-start: 2px;
   text-decoration: none !important;
 }
 .main-bar .icon-btn {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 6px;
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+  -webkit-margin-start: 6px;
+          margin-inline-start: 6px;
 }
 :host(.threshold-2) .main-bar .icon-btn {
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 11px;
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
+  -webkit-margin-start: 11px;
+          margin-inline-start: 11px;
 }
 .main-bar .menu-btn.icon-btn {
   margin: 0 !important;
-  border-inline-end: 1.5px solid var(--bar-color-shade);
+  -webkit-border-end: 1.5px solid var(--bar-color-shade);
+          border-inline-end: 1.5px solid var(--bar-color-shade);
 }
 .main-bar .logo {
   height: 36px;
@@ -192,8 +204,10 @@
   height: 30px;
 }
 .main-bar .logo-link {
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
   padding-inline: var(--bar-item-spacing);
   display: flex;
   align-items: center;
@@ -223,7 +237,8 @@
   font-stretch: expanded;
   text-transform: uppercase;
   font-size: 1.065em;
-  margin-inline-end: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }
 .main-bar .nav-links--main ::slotted(nano-nav-item) {
   --color: var(--bar-text-color);
@@ -232,7 +247,8 @@
 }
 .main-bar .nav-links--sub {
   --color: var(--color, #e2e2e2);
-  margin-inline-start: 6px;
+  -webkit-margin-start: 6px;
+          margin-inline-start: 6px;
   justify-content: flex-end;
 }
 .main-bar .login-btn {
@@ -259,7 +275,7 @@
   z-index: calc(var(--nano-layer-index-menubar, 10) + 1);
   height: 1px;
 }
-.sticker-trigger ~ .sticker-trigger {
+.sticker-trigger + .sticker-trigger {
   display: none;
 }
 
@@ -290,7 +306,8 @@
   box-shadow: 0 0 36px 0 rgba(0, 0, 0, 0.8);
   position: relative;
   pointer-events: all;
-  margin-block-end: 36px;
+  -webkit-margin-after: 36px;
+          margin-block-end: 36px;
   opacity: 0;
   outline: none;
   transition: transform 0.2s ease, opacity 0.2s ease;
@@ -308,7 +325,8 @@
   transition: transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;
 }
 .gn-menu_actions {
-  padding-inline-end: calc(var(--menu-padding) / 2);
+  -webkit-padding-end: calc(var(--menu-padding) / 2);
+          padding-inline-end: calc(var(--menu-padding) / 2);
   display: flex;
   justify-content: space-between;
 }
@@ -338,7 +356,8 @@
   padding: var(--menu-padding) 0 var(--menu-padding) 7px;
 }
 .gn-menu .menu-btn {
-  margin-inline-end: auto;
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
 }
 .gn-menu .nav-links {
   display: flex;
@@ -380,29 +399,36 @@
   padding-inline: var(--menu-padding);
 }
 .gn-menu .nav-links .user-nav .back-btn {
-  padding-inline-start: var(--menu-padding);
+  -webkit-padding-start: var(--menu-padding);
+          padding-inline-start: var(--menu-padding);
 }
 .gn-menu .nav-links_title {
   margin: 0 var(--menu-padding) 4px;
-  border-block-end: 1px solid var(--menu-hint-color);
-  padding-block-end: 8px;
+  -webkit-border-after: 1px solid var(--menu-hint-color);
+          border-block-end: 1px solid var(--menu-hint-color);
+  -webkit-padding-after: 8px;
+          padding-block-end: 8px;
   text-transform: uppercase;
   color: var(--menu-title-text);
   letter-spacing: 1px;
   font-weight: 700;
 }
 .gn-menu .nav-links_title--sites {
-  border-block-end: none;
+  -webkit-border-after: none;
+          border-block-end: none;
 }
 .gn-menu .nav-links-wrap {
   margin: 18px 0;
 }
 .gn-menu .nav-links-wrap:last-child {
-  margin-block-end: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
 }
 .gn-menu .nav-links .back-btn {
-  border-block-start: 1px solid var(--menu-hint-color);
-  border-block-end: 1px solid var(--menu-hint-color);
+  -webkit-border-before: 1px solid var(--menu-hint-color);
+          border-block-start: 1px solid var(--menu-hint-color);
+  -webkit-border-after: 1px solid var(--menu-hint-color);
+          border-block-end: 1px solid var(--menu-hint-color);
   display: flex;
   align-items: center;
   padding: 10px 11px 10px 0;
@@ -419,7 +445,8 @@
   color: var(--menu-text-color);
 }
 .gn-menu .nav-links .back-btn nano-icon {
-  margin-inline-end: 10px;
+  -webkit-margin-end: 10px;
+          margin-inline-end: 10px;
   font-size: 12px;
   color: var(--menu-icon-color);
 }
@@ -450,7 +477,8 @@
   padding-block: var(--menu-padding);
 }
 .gn-menu .login-btn nano-icon {
-  margin-inline-start: 10px;
+  -webkit-margin-start: 10px;
+          margin-inline-start: 10px;
 }
 .gn-menu .logout-btn {
   justify-content: flex-end;
@@ -482,7 +510,8 @@
   padding: 0 var(--bar-item-spacing);
   outline: none;
   max-width: 45em;
-  margin-inline-start: auto;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
   /** Overrides for when search is displayed underneath, in it's own bar */
 }
 .search-bar .search-widget {
@@ -491,7 +520,8 @@
   max-width: none;
   max-height: none;
   min-width: auto;
-  padding-inline-end: 0;
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
 }
 .search-bar .search-widget .search-icon--search {
   display: none;
@@ -518,11 +548,12 @@
 .search-bar .search-widget .select__mask.sc-nano-select {
   line-height: 2.35em;
   min-height: 2.35em;
-  padding-block-start: 2px;
+  -webkit-padding-before: 2px;
+          padding-block-start: 2px;
 }
 .search-bar .search-inputs {
-  padding: 0 0;
-  margin: 0 0;
+  padding: 0;
+  margin: 0;
 }
 .search-bar .search-autocomplete {
   inset-block-start: 100%;
@@ -530,9 +561,12 @@
 }
 
 .search-widget {
-  padding-inline-end: var(--bar-item-spacing);
-  margin-inline-start: var(--bar-item-spacing);
-  margin-inline-end: auto;
+  -webkit-padding-end: var(--bar-item-spacing);
+          padding-inline-end: var(--bar-item-spacing);
+  -webkit-margin-start: var(--bar-item-spacing);
+          margin-inline-start: var(--bar-item-spacing);
+  -webkit-margin-end: auto;
+          margin-inline-end: auto;
   position: relative;
   flex: 1 1 auto;
   max-width: 500px;
@@ -556,10 +590,14 @@
   border: 2px solid var(--bar-color-tint);
   border-radius: 0 0 5px 5px;
   color: #4a4a4a;
-  padding-block-start: calc(var(--bar-vertical-padding) / 2);
-  padding-inline-end: 0;
-  padding-block-end: 1px;
-  padding-inline-start: 0;
+  -webkit-padding-before: calc(var(--bar-vertical-padding) / 2);
+          padding-block-start: calc(var(--bar-vertical-padding) / 2);
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
+  -webkit-padding-after: 1px;
+          padding-block-end: 1px;
+  -webkit-padding-start: 0;
+          padding-inline-start: 0;
   z-index: 1;
 }
 .search-autocomplete-hit {
@@ -610,7 +648,8 @@
   justify-content: flex-end;
   width: 100%;
   text-decoration: underline;
-  border-block-start: 1px solid #e8eaea;
+  -webkit-border-before: 1px solid #e8eaea;
+          border-block-start: 1px solid #e8eaea;
 }
 .search-autocomplete-submit:hover, .search-autocomplete-submit:focus {
   background-color: #e4e6e8;
@@ -619,7 +658,7 @@
 nano-select.search-input {
   --input-border-width: 0 0 2px 0;
   --input-text-color: var(--bar-text-color);
-  --nano-input-border-color: rgb(103, 138, 154);
+  --nano-input-border-color: rgb(103 138 154);
   --padding-end: var(--bar-item-spacing);
   --nano-input-border-color--focus: black;
   font-stretch: expanded;
@@ -643,7 +682,7 @@ nano-select.search-input .down-arrow {
 
 nano-input.search-input {
   --clear-btn-color: var(--bar-text-color);
-  --nano-input-border-color: rgb(103, 138, 154);
+  --nano-input-border-color: rgb(103 138 154);
   --input-border-width: 0 0 2px 0;
   --placeholder-color: var(--bar-text-color);
   --input-text-color: var(--bar-text-color);
@@ -740,11 +779,13 @@ nano-input.search-input .search-icon nano-icon {
   position: relative;
 }
 .user-links .icon-btn {
-  padding-inline-end: 0;
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
   font-weight: 500;
 }
 .user-links .icon-btn nano-icon {
-  margin-inline-start: 5px;
+  -webkit-margin-start: 5px;
+          margin-inline-start: 5px;
   width: 16px;
   height: 16px;
   transform-origin: center;
@@ -782,13 +823,15 @@ nano-input.search-input .search-icon nano-icon {
 }
 .user-links-panel-content a {
   padding: 11px 0;
-  border-block-end: #669dac 1px solid;
+  -webkit-border-after: #669dac 1px solid;
+          border-block-end: #669dac 1px solid;
 }
 .user-links-panel-content a:hover, .user-links-panel-content a:focus {
   color: #455556;
 }
 .user-links-panel-content a:last-child {
-  border-block-end: none;
+  -webkit-border-after: none;
+          border-block-end: none;
 }
 .user-links-panel-foot {
   background-color: #aac5cd;
@@ -836,8 +879,8 @@ nano-input.search-input .search-icon nano-icon {
   --bar-item-spacing: 13px;
   --bar-background: white;
   --bar-text-color: #196c82;
-  --bar-color-shade: rgb(12, 90, 113);
-  --bar-color-tint: rgb(19, 89, 111);
+  --bar-color-shade: rgb(12 90 113);
+  --bar-color-tint: rgb(19 89 111);
   --bar-color-focus: #99a3a6;
   --bar-user-panel-bg: #016d86;
   --bar-dropdown-bg: #196c82;
@@ -857,7 +900,8 @@ nano-input.search-input .search-icon nano-icon {
   --padding-end: var(--padding);
   --padding-bottom: var(--padding);
   --padding-start: var(--padding);
-  display: block;
+  display: flex;
+  flex-direction: column;
   position: relative;
   line-height: 1.5;
   height: 100%;

package/dist/collection/components/global-search-results/global-search-results.css

@@ -56,15 +56,18 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin-block-end: 1em;
+  -webkit-margin-after: 1em;
+          margin-block-end: 1em;
 }
 .main-search__topbar::after {
   content: "";
   width: calc(100% - 30px);
   inset-inline-start: 30px;
   position: relative;
-  border-block-end: 1px solid #e5eef1;
-  padding-block-start: 0.9em;
+  -webkit-border-after: 1px solid #e5eef1;
+          border-block-end: 1px solid #e5eef1;
+  -webkit-padding-before: 0.9em;
+          padding-block-start: 0.9em;
 }
 .main-search__applied-filters {
   border: solid 1px #e4e6e8;
@@ -74,10 +77,11 @@
   display: flex;
   align-items: center;
   line-height: 0.9;
-  padding: 5px 5px 0 5px;
+  padding: 5px 5px 0;
   letter-spacing: 2px;
   flex-wrap: wrap;
-  margin-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 .main-search__applied-filters span {
   display: flex;
@@ -130,7 +134,8 @@
 .main-search .topbar__order {
   min-width: 175px;
   max-width: 200px;
-  margin-inline-start: auto;
+  -webkit-margin-start: auto;
+          margin-inline-start: auto;
 }
 :host(.small) .main-search .topbar__order {
   max-width: 300px;
@@ -143,7 +148,8 @@
   opacity: 0;
 }
 .main-search .topbar__show-filters {
-  margin-inline-start: 0.5em;
+  -webkit-margin-start: 0.5em;
+          margin-inline-start: 0.5em;
   text-transform: uppercase;
   display: none;
   flex-direction: column;
@@ -168,7 +174,8 @@
   align-items: center;
   justify-content: center;
   line-height: 1;
-  margin-block-end: 3px;
+  -webkit-margin-after: 3px;
+          margin-block-end: 3px;
 }
 .main-search__results {
   font-size: 14px;
@@ -194,7 +201,8 @@
 }
 @media (max-width: 576px) {
   .main-search__filters {
-    padding-inline-end: 20px;
+    -webkit-padding-end: 20px;
+            padding-inline-end: 20px;
   }
 }
 :host(:not(.small)) .main-search__filters {
@@ -244,7 +252,8 @@
   margin-block: 0;
 }
 .filters__old-posts {
-  margin-inline-start: 1rem;
+  -webkit-margin-start: 1rem;
+          margin-inline-start: 1rem;
 }
 :host(.small) .filters-wrap {
   position: absolute;
@@ -280,14 +289,18 @@
 }
 .filters nano-details strong[slot] {
   display: block;
-  padding-inline-start: calc(20px - 0.8em);
+  -webkit-padding-start: calc(20px - 0.8em);
+          padding-inline-start: calc(20px - 0.8em);
 }
 .filters nano-details nano-icon[slot=icon-end] {
-  padding-inline-start: calc(20px - 0.8em);
-  padding-inline-end: calc(20px - 0.8em);
+  -webkit-padding-start: calc(20px - 0.8em);
+          padding-inline-start: calc(20px - 0.8em);
+  -webkit-padding-end: calc(20px - 0.8em);
+          padding-inline-end: calc(20px - 0.8em);
 }
 .filters li:last-child .filter-label {
-  margin-block-end: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
 }
 .filters .filter-label {
   display: flex;
@@ -345,9 +358,12 @@
 .filters-header {
   display: flex;
   align-items: center;
-  border-block-end: 1px solid #90c6e7;
-  padding-block-end: 0.5rem;
-  margin-block-end: 0.5rem;
+  -webkit-border-after: 1px solid #90c6e7;
+          border-block-end: 1px solid #90c6e7;
+  -webkit-padding-after: 0.5rem;
+          padding-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 .filters-reset {
   color: #007495;
@@ -373,17 +389,18 @@
 .result {
   text-decoration: none;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  padding-block-end: 14px;
-  border-block-end: 1px solid #90c6e7;
+  flex-flow: row wrap;
+  -webkit-padding-after: 14px;
+          padding-block-end: 14px;
+  -webkit-border-after: 1px solid #90c6e7;
+          border-block-end: 1px solid #90c6e7;
 }
 .result * {
   word-wrap: break-word;
   word-break: break-word;
 }
 .result__title {
-  margin: 1em 0 0.5em 0;
+  margin: 1em 0 0.5em;
   width: 70%;
   display: flex;
 }
@@ -419,7 +436,8 @@
 }
 .result__pdf {
   display: inline-block;
-  margin-inline-start: 0.5rem;
+  -webkit-margin-start: 0.5rem;
+          margin-inline-start: 0.5rem;
   color: #b5aea7;
 }
 .result__meta {
@@ -432,10 +450,12 @@
   align-items: center;
 }
 .result__meta > * {
-  margin-block-start: 0.5rem;
+  -webkit-margin-before: 0.5rem;
+          margin-block-start: 0.5rem;
 }
 .result__meta > *:not(:last-child) {
-  padding-inline-end: 0;
+  -webkit-padding-end: 0;
+          padding-inline-end: 0;
 }
 .result__meta > *:not(:last-child)::after {
   content: "";
@@ -443,8 +463,10 @@
   width: 1px;
   background: #90c6e7;
   display: inline-block;
-  margin-inline-start: 0.7rem;
-  margin-inline-end: 0.7rem;
+  -webkit-margin-start: 0.7rem;
+          margin-inline-start: 0.7rem;
+  -webkit-margin-end: 0.7rem;
+          margin-inline-end: 0.7rem;
 }
 @media (max-width: 576px) {
   .result__meta > *:not(:last-child)::after {
@@ -463,7 +485,8 @@
 }
 @media (max-width: 576px) {
   .result__tags {
-    padding-inline-start: 0;
+    -webkit-padding-start: 0;
+            padding-inline-start: 0;
   }
 }
 .result__tags-tag {
@@ -495,18 +518,21 @@
 }
 .result__source {
   color: #455556;
-  padding-inline-end: 0.75rem;
+  -webkit-padding-end: 0.75rem;
+          padding-inline-end: 0.75rem;
 }
 .result__authors {
   font-size: 12px;
   color: #455556;
-  margin-block-end: 0.25rem;
+  -webkit-margin-after: 0.25rem;
+          margin-block-end: 0.25rem;
   text-decoration: none;
   width: 70%;
 }
 .result__buttons {
   width: 70%;
-  margin-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 .result__buttons-button {
   background-color: #007495;
@@ -520,7 +546,8 @@
 }
 .result__promo {
   width: 70%;
-  margin-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
   text-decoration: none;
   color: #455556;
 }
@@ -530,7 +557,8 @@
   padding: 12px 12px 8px 4px;
   display: flex;
   flex-flow: row nowrap;
-  margin-block-start: 1rem;
+  -webkit-margin-before: 1rem;
+          margin-block-start: 1rem;
 }
 .result__promo-bigdate {
   flex: 0 1 60px;
@@ -551,8 +579,10 @@
   display: block;
 }
 .result__promo-bigdate ~ div {
-  padding-inline-start: 1rem;
-  border-inline-start: 1px solid #c5dbe1;
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
+  -webkit-border-start: 1px solid #c5dbe1;
+          border-inline-start: 1px solid #c5dbe1;
 }
 .result__promo-date {
   font-size: 12px;
@@ -564,7 +594,8 @@
   color: #007495;
   position: relative;
   inset-block-start: 1px;
-  padding-inline-end: 2px;
+  -webkit-padding-end: 2px;
+          padding-inline-end: 2px;
 }
 .result__image {
   display: block;
@@ -575,7 +606,8 @@
   position: relative;
   width: 100%;
   height: 150px;
-  margin-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 @media (min-width: 576px) {
   .result__image {
@@ -617,15 +649,18 @@
   }
 }
 .result__video-body .result__body {
-  padding-inline-start: 1rem;
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
   display: flex;
   flex-direction: column;
-  margin-block-end: 0;
+  -webkit-margin-after: 0;
+          margin-block-end: 0;
   flex: 1;
 }
 @media (max-width: 576px) {
   .result__video-body .result__body {
-    padding-inline-start: 0;
+    -webkit-padding-start: 0;
+            padding-inline-start: 0;
   }
 }
 .result__video-body .result__body p {
@@ -638,7 +673,8 @@
   text-decoration: none;
 }
 .result__video-body .result__body .result__meta {
-  margin-block-start: 0.5rem;
+  -webkit-margin-before: 0.5rem;
+          margin-block-start: 0.5rem;
 }
 .result__video-body .result__body .result__description {
   flex: 1 0 auto;
@@ -647,17 +683,20 @@
 .search-empty {
   padding: 3rem 0;
   text-align: center;
-  border-block-start: 1px solid #e5eef1;
+  -webkit-border-before: 1px solid #e5eef1;
+          border-block-start: 1px solid #e5eef1;
 }
 .search-empty h2 {
   color: #455556;
   font-size: 1.125rem;
-  margin-block-end: 0.5rem;
+  -webkit-margin-after: 0.5rem;
+          margin-block-end: 0.5rem;
 }
 .search-empty-icon {
   font-size: 7rem;
   --icon-color: #e4e6e8;
-  margin-block-end: 2rem;
+  -webkit-margin-after: 2rem;
+          margin-block-end: 2rem;
 }
 
 .search__highlight {

package/dist/collection/components/global-search-results/global-search-results.js

@@ -167,6 +167,9 @@ export class GlobalSearchResults {
       this.algoliaEle.filters = [...this.algoliaEle.filters, filterOldPosts];
   }
   componentDidLoad() {
+    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
+    if (!window['ResizeObserver'])
+      return;
     this.ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (!entry.contentRect.width)
@@ -175,10 +178,9 @@ export class GlobalSearchResults {
       }
     });
     this.ro.observe(this.el);
-    this.algoliaEle.filters = [filterOldPosts]; // only get last 2 years
   }
   render() {
-    return (h(Host, { class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : false }, h("nano-algolia", { "store-id": "searchq", "store-method": "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => requestAnimationFrame(() => (this.algoliaEle = ele)), id: "main-search" }, h("script", { type: "text/template", slot: "template" }, `<div class="main-search sc-nano-global-search-results">
+    return (h(Host, { class: { small: this.currentWidth < 677 }, dir: this.el.ownerDocument.dir === 'rtl' ? 'rtl' : false }, h("nano-algolia", { "store-id": "searchq", "store-method": "url-hash-push", class: "main-search__wrap sc-nano-global-search-results", ref: (ele) => (this.algoliaEle = ele), id: "main-search" }, h("template", { slot: "template" }, `<div class="main-search sc-nano-global-search-results">
               <nano-algolia-results id="main-search-results" class="main-search__results sc-nano-global-search-results" infinite-scroll>
                 <script type="text/template" slot="start-template">
                   <div class="sc-nano-global-search-results main-search__topbar topbar">