@nanoporetech-digital/components 3.1.1 → 3.3.0

package/dist/collection/components/grid/grid.css

@@ -20,7 +20,6 @@
   --current-grid-size: "'grid size: sm'";
   display: block;
   opacity: 0;
-  -webkit-transition: 0.2s ease opacity;
   transition: 0.2s ease opacity;
 }
 :host .grid {
@@ -37,172 +36,130 @@
 }
 
 :host(.has-grid) .grid {
-  display: -ms-grid;
   display: grid;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-1) {
-  -ms-grid-column: 1 !important;
-      grid-column-start: 1 !important;
+  grid-column-start: 1 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-1) {
-  -ms-grid-row: 1 !important;
-      grid-row-start: 1 !important;
+  grid-row-start: 1 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-1) {
-  -ms-grid-column-span: 1 !important;
   grid-column-end: span 1 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-1) {
-  -ms-grid-row-span: 1 !important;
   grid-row-end: span 1 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-2) {
-  -ms-grid-column: 2 !important;
-      grid-column-start: 2 !important;
+  grid-column-start: 2 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-2) {
-  -ms-grid-row: 2 !important;
-      grid-row-start: 2 !important;
+  grid-row-start: 2 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-2) {
-  -ms-grid-column-span: 2 !important;
   grid-column-end: span 2 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-2) {
-  -ms-grid-row-span: 2 !important;
   grid-row-end: span 2 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-3) {
-  -ms-grid-column: 3 !important;
-      grid-column-start: 3 !important;
+  grid-column-start: 3 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-3) {
-  -ms-grid-row: 3 !important;
-      grid-row-start: 3 !important;
+  grid-row-start: 3 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-3) {
-  -ms-grid-column-span: 3 !important;
   grid-column-end: span 3 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-3) {
-  -ms-grid-row-span: 3 !important;
   grid-row-end: span 3 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-4) {
-  -ms-grid-column: 4 !important;
-      grid-column-start: 4 !important;
+  grid-column-start: 4 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-4) {
-  -ms-grid-row: 4 !important;
-      grid-row-start: 4 !important;
+  grid-row-start: 4 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-4) {
-  -ms-grid-column-span: 4 !important;
   grid-column-end: span 4 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-4) {
-  -ms-grid-row-span: 4 !important;
   grid-row-end: span 4 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-5) {
-  -ms-grid-column: 5 !important;
-      grid-column-start: 5 !important;
+  grid-column-start: 5 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-5) {
-  -ms-grid-row: 5 !important;
-      grid-row-start: 5 !important;
+  grid-row-start: 5 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-5) {
-  -ms-grid-column-span: 5 !important;
   grid-column-end: span 5 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-5) {
-  -ms-grid-row-span: 5 !important;
   grid-row-end: span 5 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-6) {
-  -ms-grid-column: 6 !important;
-      grid-column-start: 6 !important;
+  grid-column-start: 6 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-6) {
-  -ms-grid-row: 6 !important;
-      grid-row-start: 6 !important;
+  grid-row-start: 6 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-6) {
-  -ms-grid-column-span: 6 !important;
   grid-column-end: span 6 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-6) {
-  -ms-grid-row-span: 6 !important;
   grid-row-end: span 6 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-7) {
-  -ms-grid-column: 7 !important;
-      grid-column-start: 7 !important;
+  grid-column-start: 7 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-7) {
-  -ms-grid-row: 7 !important;
-      grid-row-start: 7 !important;
+  grid-row-start: 7 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-7) {
-  -ms-grid-column-span: 7 !important;
   grid-column-end: span 7 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-7) {
-  -ms-grid-row-span: 7 !important;
   grid-row-end: span 7 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-8) {
-  -ms-grid-column: 8 !important;
-      grid-column-start: 8 !important;
+  grid-column-start: 8 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-8) {
-  -ms-grid-row: 8 !important;
-      grid-row-start: 8 !important;
+  grid-row-start: 8 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-8) {
-  -ms-grid-column-span: 8 !important;
   grid-column-end: span 8 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-8) {
-  -ms-grid-row-span: 8 !important;
   grid-row-end: span 8 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-9) {
-  -ms-grid-column: 9 !important;
-      grid-column-start: 9 !important;
+  grid-column-start: 9 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-9) {
-  -ms-grid-row: 9 !important;
-      grid-row-start: 9 !important;
+  grid-row-start: 9 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-9) {
-  -ms-grid-column-span: 9 !important;
   grid-column-end: span 9 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-9) {
-  -ms-grid-row-span: 9 !important;
   grid-row-end: span 9 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-start-10) {
-  -ms-grid-column: 10 !important;
-      grid-column-start: 10 !important;
+  grid-column-start: 10 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-start-10) {
-  -ms-grid-row: 10 !important;
-      grid-row-start: 10 !important;
+  grid-row-start: 10 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-col-span-10) {
-  -ms-grid-column-span: 10 !important;
   grid-column-end: span 10 !important;
 }
 :host(.has-grid) .grid ::slotted(.nano-grid-row-span-10) {
-  -ms-grid-row-span: 10 !important;
   grid-row-end: span 10 !important;
 }
 
 :host([content-panel]:not([content-panel=false])) .grid {
-  -ms-grid-rows: auto 1fr;
   grid-template-rows: auto 1fr;
 }
 
@@ -210,7 +167,6 @@
   block-size: 100%;
 }
 :host([full-height]:not([full-height=false])) .grid {
-  -ms-grid-rows: 1fr;
   grid-template-rows: 1fr;
 }
 
@@ -234,8 +190,7 @@
   inset-inline-start: 0;
   text-align: center;
   inset-block-start: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  transform: translateY(-50%);
   color: rgba(0, 0, 0, 0.2);
   text-transform: uppercase;
   z-index: 99;
@@ -248,7 +203,6 @@
   --repeat-width: calc(100% / 1);
 }
 :host(.nano-grid-1) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[1];
   grid-template-columns: repeat(1, minmax(var(--col-width), 1fr));
 }
 
@@ -258,7 +212,6 @@
   --repeat-width: calc(100% / 2);
 }
 :host(.nano-grid-2) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[2];
   grid-template-columns: repeat(2, minmax(var(--col-width), 1fr));
 }
 
@@ -268,7 +221,6 @@
   --repeat-width: calc(100% / 3);
 }
 :host(.nano-grid-3) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[3];
   grid-template-columns: repeat(3, minmax(var(--col-width), 1fr));
 }
 
@@ -278,7 +230,6 @@
   --repeat-width: calc(100% / 4);
 }
 :host(.nano-grid-4) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[4];
   grid-template-columns: repeat(4, minmax(var(--col-width), 1fr));
 }
 
@@ -288,7 +239,6 @@
   --repeat-width: calc(100% / 5);
 }
 :host(.nano-grid-5) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[5];
   grid-template-columns: repeat(5, minmax(var(--col-width), 1fr));
 }
 
@@ -298,7 +248,6 @@
   --repeat-width: calc(100% / 6);
 }
 :host(.nano-grid-6) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[6];
   grid-template-columns: repeat(6, minmax(var(--col-width), 1fr));
 }
 
@@ -308,7 +257,6 @@
   --repeat-width: calc(100% / 7);
 }
 :host(.nano-grid-7) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[7];
   grid-template-columns: repeat(7, minmax(var(--col-width), 1fr));
 }
 
@@ -318,7 +266,6 @@
   --repeat-width: calc(100% / 8);
 }
 :host(.nano-grid-8) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[8];
   grid-template-columns: repeat(8, minmax(var(--col-width), 1fr));
 }
 
@@ -328,7 +275,6 @@
   --repeat-width: calc(100% / 9);
 }
 :host(.nano-grid-9) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[9];
   grid-template-columns: repeat(9, minmax(var(--col-width), 1fr));
 }
 
@@ -338,6 +284,5 @@
   --repeat-width: calc(100% / 10);
 }
 :host(.nano-grid-10) .grid {
-  -ms-grid-columns: (minmax(var(--col-width), 1fr))[10];
   grid-template-columns: repeat(10, minmax(var(--col-width), 1fr));
 }

package/dist/collection/components/hero/hero.css

@@ -71,16 +71,11 @@
   inset: 0;
 }
 .hero__ctas {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
   padding-block: 32px 0;
   padding-inline: 32px;
-  -webkit-margin-after: -64px;
-          margin-block-end: -64px;
+  margin-block-end: -64px;
   position: relative;
   z-index: 1;
 }
@@ -91,8 +86,7 @@
 }
 @media (max-width: 58em) {
   .hero__ctas {
-    -webkit-margin-after: -48px;
-            margin-block-end: -48px;
+    margin-block-end: -48px;
   }
 }
 .hero__ctas ::slotted(a.button[slot=secondary-ctas]) {
@@ -131,8 +125,7 @@
   font-weight: 600;
   font-stretch: 125%;
   display: inline-block;
-  -webkit-margin-after: 16px;
-          margin-block-end: 16px;
+  margin-block-end: 16px;
   position: relative;
   z-index: 2;
 }
@@ -154,7 +147,6 @@
   position: absolute;
   inset: 0;
   z-index: 0;
-  background: -webkit-gradient(linear, left top, left bottom, from(var(--scrim-direction)), color-stop(0%, rgba(var(--scrim-color), var(--scrim-opacity-from))), to(rgba(var(--scrim-color), var(--scrim-opacity-to))));
   background: linear-gradient(var(--scrim-direction), rgba(var(--scrim-color), var(--scrim-opacity-from)) 0%, rgba(var(--scrim-color), var(--scrim-opacity-to)) 100%);
 }
 .hero--scrim .hero__scrim {
@@ -168,13 +160,11 @@
   position: relative;
 }
 .hero__content.is-xl {
-  -webkit-margin-before: 50px;
-          margin-block-start: 50px;
+  margin-block-start: 50px;
   max-inline-size: 1540px;
 }
 .hero__content.is-xxl {
-  -webkit-margin-before: 83px;
-          margin-block-start: 83px;
+  margin-block-start: 83px;
   max-inline-size: 1606px;
 }
 .hero__primary {
@@ -185,8 +175,7 @@
   margin-inline: 16px;
 }
 .hero--backbtn .hero__primary {
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline-start: 0;
 }
 .hero__primary ::slotted(nano-icon-button[slot=back-btn]) {
   font-size: 2rem;
@@ -206,8 +195,6 @@
 .hero__primary-content {
   max-inline-size: 45rem;
   --color: #fff;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .hero--backbtn .hero__primary-content > div {
@@ -221,12 +208,10 @@
 }
 .is-xl .hero__primary-content ::slotted(h1[slot=primary-content]) {
   line-height: 31px !important;
-  -webkit-margin-after: 30px !important;
-          margin-block-end: 30px !important;
+  margin-block-end: 30px !important;
 }
 .is-xl .hero__primary-content ::slotted(.button[slot=primary-content]) {
-  -webkit-margin-before: 20px !important;
-          margin-block-start: 20px !important;
+  margin-block-start: 20px !important;
 }
 .hero__secondary {
   display: none;
@@ -235,19 +220,13 @@
   padding-inline: 14px;
 }
 .hero--secondary .hero__secondary {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 .is-xl .hero__secondary {
   padding-block: 0 50px;
   padding-inline: 50px;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 .is-xxl .hero__secondary {
   padding-block: 0 83px;
@@ -257,52 +236,35 @@
   background: rgba(0, 0, 0, 0.7);
   padding: 24px;
   inline-size: 100%;
-  -webkit-margin-after: auto;
-          margin-block-end: auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  margin-block-end: auto;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   color: white;
 }
 .is-xl .hero__icon-box {
   max-inline-size: 410px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 410px;
-          flex: 0 1 410px;
+  flex: 0 1 410px;
 }
 .hero__icon-box ::slotted([slot=icon-box-item]) {
   --nano-color-base: var(--theme-tint-color);
   --nano-icon-size: 32px;
   --nano-icon-margin-end: 20px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: 0.8125rem;
-  -webkit-margin-after: 20px;
-          margin-block-end: 20px;
+  margin-block-end: 20px;
 }
 .hero__icon-box ::slotted(.last[slot=icon-box-item]) {
-  -webkit-margin-after: 0;
-          margin-block-end: 0;
+  margin-block-end: 0;
 }
 .hero__quote-content {
-  -webkit-margin-before: auto;
-          margin-block-start: auto;
+  margin-block-start: auto;
   text-align: center;
   inline-size: 100%;
 }
 .is-xl .hero__quote-content {
   max-inline-size: 500px;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 500px;
-          flex: 0 1 500px;
+  flex: 0 1 500px;
   text-align: initial;
 }
 .hero__quote::before, .hero__quote::after {
@@ -327,8 +289,7 @@
   opacity: 0.8;
 }
 .hero--sub .hero__content.is-xl {
-  -webkit-margin-before: 40px;
-          margin-block-start: 40px;
+  margin-block-start: 40px;
 }
 .hero--sub .hero__content.is-xl .hero__primary {
   margin-block: 0 40px;
@@ -339,12 +300,10 @@
   padding-inline: 40px 50px;
 }
 .hero--sub .hero__content.is-xl ::slotted(.button[slot=primary-content]) {
-  -webkit-margin-before: 8px !important;
-          margin-block-start: 8px !important;
+  margin-block-start: 8px !important;
 }
 .hero--sub .hero__content.is-xl ::slotted(h1[slot=primary-content]) {
-  -webkit-margin-after: 18px !important;
-          margin-block-end: 18px !important;
+  margin-block-end: 18px !important;
 }
 .hero--sub .hero__content.is-xxl .hero__primary {
   margin-block: 0 40px;

package/dist/collection/components/icon/icon.css

@@ -37,9 +37,7 @@
   min-height: var(--icon-size);
   contain: strict;
   fill: currentColor;
-  -webkit-box-sizing: content-box !important;
-          box-sizing: content-box !important;
-  -webkit-transition: opacity 0.3s ease;
+  box-sizing: content-box !important;
   transition: opacity 0.3s ease;
   color: var(--color);
   margin-inline: var(--icon-margin-start) var(--icon-margin-end);
@@ -87,8 +85,7 @@ svg,
  * -----------------------------------------------------------
  */
 :host(.flip-rtl) .icon-inner {
-  -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
+  transform: scaleX(-1);
 }
 
 /* Icon Sizes

package/dist/collection/components/icon-button/icon-button.css

@@ -30,15 +30,9 @@
 }
 
 .icon-button {
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 0 0 auto;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: none;
   border-radius: var(--border-radius);
   background: var(--background);
@@ -46,13 +40,9 @@
   color: var(--color);
   padding: var(--padding);
   cursor: pointer;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
   -webkit-appearance: none;
-  -webkit-transition: -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
-  transition: -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
   transition: box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
-  transition: box-shadow var(--nano-transition-fast, 0.1s) ease-in-out, -webkit-box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;
 }
 .icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {
   color: var(--hover-color);
@@ -73,6 +63,5 @@
 }
 
 .focus-visible.icon-button:focus {
-  -webkit-box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
-          box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
+  box-shadow: var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));
 }

package/dist/collection/components/img/img.css

@@ -16,10 +16,8 @@
   */
   --padding: 0;
   display: inline-block;
-  -o-object-fit: cover;
-     object-fit: cover;
-  -o-object-position: center;
-     object-position: center;
+  object-fit: cover;
+  object-position: center;
   background-size: cover;
   background-position: center;
 }
@@ -36,10 +34,8 @@
   min-block-size: inherit;
   block-size: 100%;
   display: block;
-  -o-object-fit: inherit;
-     object-fit: inherit;
-  -o-object-position: inherit;
-     object-position: inherit;
+  object-fit: inherit;
+  object-position: inherit;
   background-color: inherit;
   background-position: inherit;
   background-size: inherit;
@@ -62,32 +58,26 @@
   border-radius: inherit;
   display: block;
   opacity: 0;
-  -webkit-transition: 0.5s ease opacity, 0.3s ease filter 0.4s;
   transition: 0.5s ease opacity, 0.3s ease filter 0.4s;
-  -webkit-filter: blur(5px);
-          filter: blur(5px);
+  filter: blur(5px);
 }
 .img__image.loaded,
 .img__bg.loaded {
   opacity: 1;
-  -webkit-filter: blur(0.1px);
-          filter: blur(0.1px);
+  filter: blur(0.1px);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   @supports (-webkit-appearance: none) {
     .img__image.loaded,
 .img__bg.loaded {
-      -webkit-filter: blur(0);
-              filter: blur(0);
+      filter: blur(0);
     }
   }
 }
 
 .img__image {
-  -o-object-fit: inherit;
-     object-fit: inherit;
-  -o-object-position: inherit;
-     object-position: inherit;
+  object-fit: inherit;
+  object-position: inherit;
   max-inline-size: 100%;
   block-size: auto;
 }