@nanoporetech-digital/components 3.1.1 → 3.3.0

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

@@ -12,21 +12,15 @@
 }
 :host {
   display: block;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
 }
 
 .main-search {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   background: white;
   font-size: 14px;
   min-height: calc(100vh - 63px);
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
 }
 .main-search__wrap {
   /* autoprefixer: ignore next */
@@ -44,7 +38,6 @@
 }
 .main-search button:not(.result__tags-tag) {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   border: none;
   background: none;
@@ -53,66 +46,42 @@
 }
 .main-search .icon-button {
   color: inherit;
-  -ms-flex-item-align: normal;
-      -ms-grid-row-align: normal;
-      align-self: normal;
+  align-self: normal;
   padding: 9px 7px;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .main-search__topbar {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-margin-after: 1em;
-          margin-block-end: 1em;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-block-end: 1em;
 }
 .main-search__topbar::after {
   content: "";
   width: calc(100% - 30px);
   inset-inline-start: 30px;
   position: relative;
-  -webkit-border-after: 1px solid #e5eef1;
-          border-block-end: 1px solid #e5eef1;
-  -webkit-padding-before: 0.9em;
-          padding-block-start: 0.9em;
+  border-block-end: 1px solid #e5eef1;
+  padding-block-start: 0.9em;
 }
 .main-search__applied-filters {
   border: solid 1px #e4e6e8;
   text-transform: uppercase;
   border-radius: 3px;
   font-weight: bold;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   line-height: 0.9;
   padding: 5px 5px 0 5px;
   letter-spacing: 2px;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  flex-wrap: wrap;
+  margin-block-end: 0.5rem;
 }
 .main-search__applied-filters span {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 :host(.small) .main-search__applied-filters {
   display: none;
@@ -152,78 +121,54 @@
   display: none;
 }
 .main-search .topbar__filtering {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   margin-block: 0;
   margin-inline: 1em 0;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
 .main-search .topbar__order {
   min-width: 175px;
   max-width: 200px;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  margin-inline-start: auto;
 }
 :host(.small) .main-search .topbar__order {
   max-width: 300px;
 }
 .main-search .topbar nano-select {
   opacity: 1;
-  -webkit-transition: 0.1s ease opacity;
   transition: 0.1s ease opacity;
 }
 .main-search .topbar nano-select:not(.hydrated) {
   opacity: 0;
 }
 .main-search .topbar__show-filters {
-  -webkit-margin-start: 0.5em;
-          margin-inline-start: 0.5em;
+  margin-inline-start: 0.5em;
   text-transform: uppercase;
   display: none;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  flex-direction: column;
+  align-items: center;
 }
 .main-search .topbar__show-filters nano-icon {
   font-size: 20px;
 }
 :host(.small) .main-search .topbar__show-filters {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .main-search .topbar__filter-count {
   width: 12px;
   height: 12px;
-  -webkit-box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.2);
   border: solid 1px #005c76;
   background-color: #005c76;
   color: white;
   font-size: 7px;
   border-radius: 50%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  align-items: center;
+  justify-content: center;
   line-height: 1;
-  -webkit-margin-after: 3px;
-          margin-block-end: 3px;
+  margin-block-end: 3px;
 }
 .main-search__results {
   font-size: 14px;
@@ -244,16 +189,12 @@
   outline: none;
   padding-inline: 0 40px;
   padding-block: 1.8em 1em;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 30%;
-          flex: 1 1 30%;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  flex: 1 1 30%;
+  box-sizing: border-box;
 }
 @media (max-width: 576px) {
   .main-search__filters {
-    -webkit-padding-end: 20px;
-            padding-inline-end: 20px;
+    padding-inline-end: 20px;
   }
 }
 :host(:not(.small)) .main-search__filters {
@@ -273,14 +214,12 @@
   z-index: 10;
   inset-block-start: 0;
   inset-inline-end: 0;
-  -webkit-transition: all 0s ease 0.5s;
   transition: all 0s ease 0.5s;
   background: none;
 }
 :host(.small) .filters.show {
   height: 100vh;
   width: 100vw;
-  -webkit-transition: all 0s ease 0s;
   transition: all 0s ease 0s;
 }
 :host(.small) .filters.show::after {
@@ -293,7 +232,6 @@
   inset: 0;
   z-index: -1;
   opacity: 0;
-  -webkit-transition: 0.1s ease opacity;
   transition: 0.1s ease opacity;
 }
 .filters__close-filters {
@@ -306,33 +244,26 @@
   margin-block: 0;
 }
 .filters__old-posts {
-  -webkit-margin-start: 1rem;
-          margin-inline-start: 1rem;
+  margin-inline-start: 1rem;
 }
 :host(.small) .filters-wrap {
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
   background: #f7f6f6;
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
+  transform: translateX(100%);
   width: 300px;
   min-width: 200px;
   max-width: 80vw;
-  -webkit-transition: -webkit-transform 0.3s ease;
-  transition: -webkit-transform 0.3s ease;
   transition: transform 0.3s ease;
-  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
   padding: 1em;
   color: black;
   overflow: auto;
   height: 100vh;
 }
 :host(.small) .filters.show .filters-wrap {
-  -webkit-transform: translateX(0%);
-          transform: translateX(0%);
-  -webkit-box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);
-          box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);
+  transform: translateX(0%);
+  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.1);
 }
 .filters ul {
   margin: 0;
@@ -349,26 +280,18 @@
 }
 .filters nano-details strong[slot] {
   display: block;
-  -webkit-padding-start: calc(20px - 0.8em);
-          padding-inline-start: calc(20px - 0.8em);
+  padding-inline-start: calc(20px - 0.8em);
 }
 .filters nano-details nano-icon[slot=icon-end] {
-  -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);
+  padding-inline-start: calc(20px - 0.8em);
+  padding-inline-end: calc(20px - 0.8em);
 }
 .filters li:last-child .filter-label {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
 }
 .filters .filter-label {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   position: relative;
   margin: 0.5em 0;
   line-height: 1.4;
@@ -395,8 +318,7 @@
   position: absolute;
   inset-inline-start: 2px;
   inset-block-start: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  transform: translateY(-50%);
   z-index: 1;
   display: block;
   background-size: 100%;
@@ -418,22 +340,14 @@
   background: #245a6f;
 }
 .filters .filter-cb:focus + .filter-label::before {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
-          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
 }
 .filters-header {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -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;
+  align-items: center;
+  border-block-end: 1px solid #90c6e7;
+  padding-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .filters-reset {
   color: #007495;
@@ -458,19 +372,11 @@
 
 .result {
   text-decoration: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
-  -webkit-padding-after: 14px;
-          padding-block-end: 14px;
-  -webkit-border-after: 1px solid #90c6e7;
-          border-block-end: 1px solid #90c6e7;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding-block-end: 14px;
+  border-block-end: 1px solid #90c6e7;
 }
 .result * {
   word-wrap: break-word;
@@ -479,8 +385,6 @@
 .result__title {
   margin: 1em 0 0.5em 0;
   width: 70%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .result__title a {
@@ -515,33 +419,23 @@
 }
 .result__pdf {
   display: inline-block;
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
+  margin-inline-start: 0.5rem;
   color: #b5aea7;
 }
 .result__meta {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row wrap;
-          flex-flow: row wrap;
+  flex-flow: row wrap;
   color: #455556;
   font-size: 11px;
   line-height: 13px;
   width: 100%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .result__meta > * {
-  -webkit-margin-before: 0.5rem;
-          margin-block-start: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 .result__meta > *:not(:last-child) {
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
+  padding-inline-end: 0;
 }
 .result__meta > *:not(:last-child)::after {
   content: "";
@@ -549,10 +443,8 @@
   width: 1px;
   background: #90c6e7;
   display: inline-block;
-  -webkit-margin-start: 0.7rem;
-          margin-inline-start: 0.7rem;
-  -webkit-margin-end: 0.7rem;
-          margin-inline-end: 0.7rem;
+  margin-inline-start: 0.7rem;
+  margin-inline-end: 0.7rem;
 }
 @media (max-width: 576px) {
   .result__meta > *:not(:last-child)::after {
@@ -561,28 +453,17 @@
 }
 @media (max-width: 576px) {
   .result__meta {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: column;
-            flex-flow: column;
-    -webkit-box-align: start;
-        -ms-flex-align: start;
-            align-items: flex-start;
+    flex-flow: column;
+    align-items: flex-start;
   }
 }
 .result__tags {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row wrap;
-          flex-flow: row wrap;
+  flex-flow: row wrap;
 }
 @media (max-width: 576px) {
   .result__tags {
-    -webkit-padding-start: 0;
-            padding-inline-start: 0;
+    padding-inline-start: 0;
   }
 }
 .result__tags-tag {
@@ -604,39 +485,28 @@
   font-weight: 600;
   text-transform: capitalize;
   white-space: nowrap;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .result__date {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #455556;
 }
 .result__source {
   color: #455556;
-  -webkit-padding-end: 0.75rem;
-          padding-inline-end: 0.75rem;
+  padding-inline-end: 0.75rem;
 }
 .result__authors {
   font-size: 12px;
   color: #455556;
-  -webkit-margin-after: 0.25rem;
-          margin-block-end: 0.25rem;
+  margin-block-end: 0.25rem;
   text-decoration: none;
   width: 70%;
 }
 .result__buttons {
   width: 70%;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .result__buttons-button {
   background-color: #007495;
@@ -650,8 +520,7 @@
 }
 .result__promo {
   width: 70%;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
   text-decoration: none;
   color: #455556;
 }
@@ -659,20 +528,12 @@
   width: 300px;
   background-color: #e3eef1;
   padding: 12px 12px 8px 4px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row nowrap;
-          flex-flow: row nowrap;
-  -webkit-margin-before: 1rem;
-          margin-block-start: 1rem;
+  flex-flow: row nowrap;
+  margin-block-start: 1rem;
 }
 .result__promo-bigdate {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 60px;
-          flex: 0 1 60px;
+  flex: 0 1 60px;
   text-align: center;
   font-weight: 600;
   color: #007495;
@@ -690,10 +551,8 @@
   display: block;
 }
 .result__promo-bigdate ~ div {
-  -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
-  -webkit-border-start: 1px solid #c5dbe1;
-          border-inline-start: 1px solid #c5dbe1;
+  padding-inline-start: 1rem;
+  border-inline-start: 1px solid #c5dbe1;
 }
 .result__promo-date {
   font-size: 12px;
@@ -705,8 +564,7 @@
   color: #007495;
   position: relative;
   inset-block-start: 1px;
-  -webkit-padding-end: 2px;
-          padding-inline-end: 2px;
+  padding-inline-end: 2px;
 }
 .result__image {
   display: block;
@@ -717,8 +575,7 @@
   position: relative;
   width: 100%;
   height: 150px;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 @media (min-width: 576px) {
   .result__image {
@@ -746,13 +603,8 @@
 .result__video-body {
   width: 70%;
   text-decoration: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-flow: row wrap;
-          flex-flow: row wrap;
+  flex-flow: row wrap;
 }
 @media (max-width: 992px) {
   .result__video-body {
@@ -761,32 +613,19 @@
 }
 @media (max-width: 576px) {
   .result__video-body {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-flow: column;
-            flex-flow: column;
+    flex-flow: column;
   }
 }
 .result__video-body .result__body {
-  -webkit-padding-start: 1rem;
-          padding-inline-start: 1rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding-inline-start: 1rem;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex-direction: column;
+  margin-block-end: 0;
+  flex: 1;
 }
 @media (max-width: 576px) {
   .result__video-body .result__body {
-    -webkit-padding-start: 0;
-            padding-inline-start: 0;
+    padding-inline-start: 0;
   }
 }
 .result__video-body .result__body p {
@@ -799,32 +638,26 @@
   text-decoration: none;
 }
 .result__video-body .result__body .result__meta {
-  -webkit-margin-before: 0.5rem;
-          margin-block-start: 0.5rem;
+  margin-block-start: 0.5rem;
 }
 .result__video-body .result__body .result__description {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+  flex: 1 0 auto;
 }
 
 .search-empty {
   padding: 3rem 0;
   text-align: center;
-  -webkit-border-before: 1px solid #e5eef1;
-          border-block-start: 1px solid #e5eef1;
+  border-block-start: 1px solid #e5eef1;
 }
 .search-empty h2 {
   color: #455556;
   font-size: 1.125rem;
-  -webkit-margin-after: 0.5rem;
-          margin-block-end: 0.5rem;
+  margin-block-end: 0.5rem;
 }
 .search-empty-icon {
   font-size: 7rem;
   --icon-color: #e4e6e8;
-  -webkit-margin-after: 2rem;
-          margin-block-end: 2rem;
+  margin-block-end: 2rem;
 }
 
 .search__highlight {