@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/details/details.css

@@ -68,8 +68,7 @@
   border-width: var(--border-width-dims);
   border-color: var(--border-color);
   border-radius: var(--border-radius-dims);
-  -webkit-box-shadow: var(--box-shadow);
-          box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
 }
 
 :host(:last-of-type) {
@@ -121,7 +120,6 @@ button {
   background: transparent;
   cursor: pointer;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   outline: none;
   padding: var(--btn-padding);
@@ -129,14 +127,9 @@ button {
   position: relative;
   font-size: 1em;
   margin: 0;
-  -webkit-transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;
   transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background: var(--btn-bg-color);
   color: var(--btn-text-color);
   border-radius: var(--border-radius-dims);
@@ -145,8 +138,7 @@ button::-moz-focus-inner {
   border: 0;
 }
 button:focus {
-  -webkit-box-shadow: var(--focus-style);
-          box-shadow: var(--focus-style);
+  box-shadow: var(--focus-style);
   outline: none;
   position: relative;
   z-index: 1;
@@ -165,26 +157,17 @@ button .label {
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   display: inline-block;
 }
 button .icon {
   line-height: 0;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-direction: column;
+  justify-content: center;
   display: inline-block;
   color: currentColor;
-  -webkit-transition: 0.3s ease transform;
   transition: 0.3s ease transform;
-  -webkit-transform-origin: center;
-          transform-origin: center;
+  transform-origin: center;
 }
 button .icon--start {
   margin-inline: 0 var(--padding);
@@ -203,17 +186,14 @@ button .icon ::slotted(nano-icon) {
   background: var(--content-bg-color);
   height: 0;
   overflow: hidden;
-  -webkit-transition: 0.2s ease border-radius;
   transition: 0.2s ease border-radius;
   outline: none;
 }
 .loaded .content {
-  -webkit-transition: var(--content-transition), 0.2s ease border-radius;
   transition: var(--content-transition), 0.2s ease border-radius;
 }
 .content > * {
   opacity: 0;
-  -webkit-transition: opacity 0.2s ease-out;
   transition: opacity 0.2s ease-out;
 }
 .open .content > * {

package/dist/collection/components/dialog/dialog.css

@@ -39,15 +39,9 @@
 }
 
 .dialog {
-  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;
   position: fixed;
   inset: 0;
   z-index: var(--nano-layer-index-modal, 700);
@@ -64,114 +58,70 @@
   visibility: hidden;
 }
 .dialog__panel {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   z-index: 2;
   inline-size: var(--width);
   max-inline-size: calc(100% - var(--nano-spacing-xlarge, 24px));
   max-block-size: calc(92% - var(--nano-spacing-xlarge, 24px));
   background-color: var(--content-background);
   border-radius: var(--border-radius);
-  -webkit-box-shadow: var(--box-shadow);
-          box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
   opacity: 0;
-  -webkit-transform: scale(0.8);
-          transform: scale(0.8);
-  -webkit-transition: var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;
+  transform: scale(0.8);
   transition: var(--nano-transition-fast, 0.3s) opacity, var(--nano-transition-fast, 0.3s) transform;
 }
 .dialog__panel:focus {
   outline: none;
 }
 .dialog--with-ribbon .dialog__panel {
-  -webkit-border-before: 5px solid var(--tint-color);
-          border-block-start: 5px solid var(--tint-color);
+  border-block-start: 5px solid var(--tint-color);
 }
 .dialog--open .dialog__panel {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   opacity: 1;
-  -webkit-transform: none;
-          transform: none;
+  transform: none;
 }
 .dialog--nodismiss .dialog__panel {
-  -webkit-animation: cannotClose 0.25s ease-in-out 1;
-          animation: cannotClose 0.25s ease-in-out 1;
-}
-@-webkit-keyframes cannotClose {
-  0% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  50% {
-    -webkit-transform: scale(1.08);
-            transform: scale(1.08);
-  }
-  100% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
+  animation: cannotClose 0.25s ease-in-out 1;
 }
 @keyframes cannotClose {
   0% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
   }
   50% {
-    -webkit-transform: scale(1.08);
-            transform: scale(1.08);
+    transform: scale(1.08);
   }
   100% {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
   }
 }
 .dialog__header {
-  -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;
   min-inline-size: var(--width);
   inline-size: 100%;
   background-color: var(--content-background);
   border-radius: var(--border-radius) var(--border-radius) 0 0;
-  -webkit-transition: var(--nano-transition-fast, 0.1s) box-shadow;
   transition: var(--nano-transition-fast, 0.1s) box-shadow;
 }
 .dialog--visible .dialog__header {
   min-inline-size: auto;
 }
 [stuck] .dialog__header {
-  -webkit-box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
-          box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--nano-layer-shadow-medium, 0 2px 4px rgba(0, 0, 0, 0.2));
 }
 .dialog__title {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   font-size: var(--nano-fontsize-large, 1.25rem);
   line-height: 1.6;
   padding-block: var(--header-padding-v);
   padding-inline: var(--header-padding-h);
 }
 .dialog .dialog__close-icon {
-  -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;
   font-size: var(--nano-fontsize-xlarge, 1.5rem);
   padding-block: 0;
   padding-inline: var(--header-padding-h);
@@ -182,16 +132,13 @@
   padding-inline: var(--body-padding-h);
 }
 .dialog:not(.dialog--has-header) .dialog__body {
-  -webkit-padding-before: var(--body-padding-v);
-          padding-block-start: var(--body-padding-v);
+  padding-block-start: var(--body-padding-v);
 }
 .dialog__body ::slotted(*) {
   max-inline-size: 100%;
 }
 .dialog__body-wrap {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: var(--border-radius);
@@ -215,8 +162,7 @@
   min-inline-size: auto;
 }
 .dialog__footer ::slotted(button) {
-  -webkit-margin-end: var(--nano-spacing-small, 8px) !important;
-          margin-inline-end: var(--nano-spacing-small, 8px) !important;
+  margin-inline-end: var(--nano-spacing-small, 8px) !important;
 }
 .dialog:not(.dialog--has-footer) .dialog__footer {
   display: none;
@@ -234,22 +180,17 @@
   font-size: var(--nano-fontsize-small, 0.875rem);
   padding: 0.5rem;
   border-radius: var(--nano-border-radius-small, 2px);
-  -webkit-transition: -webkit-box-shadow 100ms ease-in-out;
-  transition: -webkit-box-shadow 100ms ease-in-out;
   transition: box-shadow 100ms ease-in-out;
-  transition: box-shadow 100ms ease-in-out, -webkit-box-shadow 100ms ease-in-out;
 }
 .dialog__close-txt:focus {
   outline: none;
-  -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)));
 }
 .dialog__overlay {
   position: fixed;
   inset: 0;
   background-color: var(--scrim-color);
   opacity: 0;
-  -webkit-transition: var(--nano-transition-fast, 0.3s) opacity;
   transition: var(--nano-transition-fast, 0.3s) opacity;
   -webkit-backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));
           backdrop-filter: blur(var(--nano-layer-overlay-blur, 3px));

package/dist/collection/components/drawer/drawer.css

@@ -57,23 +57,14 @@
 
 .drawer__panel {
   position: absolute;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   z-index: 2;
   max-width: 100%;
   max-height: 100%;
   background-color: var(--panel-background-color);
-  -webkit-box-shadow: var(--panel-shadow);
-          box-shadow: var(--panel-shadow);
-  -webkit-transition: 250ms -webkit-transform;
-  transition: 250ms -webkit-transform;
+  box-shadow: var(--panel-shadow);
   transition: 250ms transform;
-  transition: 250ms transform, 250ms -webkit-transform;
   overflow: auto;
   pointer-events: all;
 }
@@ -82,27 +73,23 @@
 }
 
 .drawer--start .drawer__panel {
-  -webkit-transform: translate3d(-100%,  0,  0);
-          transform: translate3d(-100%,  0,  0);
+  transform: translate3d(-100%,  0,  0);
   inset-block: 0 auto;
   width: var(--size);
   height: 100%;
 }
 .drawer--start .drawer__panel[dir=rtl] {
-  -webkit-transform: translate3d(calc(-1 * -100%),  0,  0);
-          transform: translate3d(calc(-1 * -100%),  0,  0);
+  transform: translate3d(calc(-1 * -100%),  0,  0);
 }
 
 .drawer--end .drawer__panel {
-  -webkit-transform: translate3d(100%,  0,  0);
-          transform: translate3d(100%,  0,  0);
+  transform: translate3d(100%,  0,  0);
   inset-block: 0 auto;
   width: var(--size);
   height: 100%;
 }
 .drawer--end .drawer__panel[dir=rtl] {
-  -webkit-transform: translate3d(calc(-1 * 100%),  0,  0);
-          transform: translate3d(calc(-1 * 100%),  0,  0);
+  transform: translate3d(calc(-1 * 100%),  0,  0);
 }
 
 .drawer--top .drawer__panel {
@@ -110,8 +97,7 @@
   inset-block: 0 auto;
   width: 100%;
   height: var(--size);
-  -webkit-transform: translate(0, -100%);
-          transform: translate(0, -100%);
+  transform: translate(0, -100%);
 }
 
 .drawer--bottom .drawer__panel {
@@ -119,44 +105,30 @@
   inset-block: auto 0;
   width: 100%;
   height: var(--size);
-  -webkit-transform: translate(0, 100%);
-          transform: translate(0, 100%);
+  transform: translate(0, 100%);
 }
 
 .drawer--open .drawer__panel {
-  -webkit-transform: translate(0, 0);
-          transform: translate(0, 0);
+  transform: translate(0, 0);
 }
 
 .drawer__header {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 .drawer__title {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   padding: 20px;
 }
 
 .drawer__close {
-  -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;
 }
 
 .drawer__body {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -175,7 +147,6 @@
   inset: 0;
   background-color: var(--overlay-color);
   opacity: 0;
-  -webkit-transition: 250ms opacity;
   transition: 250ms opacity;
   pointer-events: all;
 }

package/dist/collection/components/dropdown/dropdown.css

@@ -31,8 +31,6 @@
   --dropdown-z-index: var(--nano-layer-index-dropdown, 300);
   --min-width: 0;
   --box-shadow: var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2));
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -60,31 +58,25 @@
   border: var(--border);
   border-radius: var(--border-radius);
   color: currentColor;
-  -webkit-box-shadow: var(--box-shadow);
-          box-shadow: var(--box-shadow);
+  box-shadow: var(--box-shadow);
   opacity: 0;
-  -webkit-transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;
   transition: 0.2s ease opacity, 0.2s ease transform, 0.2s ease min-block-size;
   min-block-size: 20px;
   overflow: var(--overflow);
-  -webkit-box-sizing: content-box !important;
-          box-sizing: content-box !important;
+  box-sizing: content-box !important;
 }
 .dropdown__panel.loading {
   overflow-y: hidden;
 }
 .dropdown__panel.top {
-  -webkit-transform: translateY(-20px) translateZ(0);
-          transform: translateY(-20px) translateZ(0);
+  transform: translateY(-20px) translateZ(0);
 }
 .dropdown__panel.bottom {
-  -webkit-transform: translateY(20px) translateZ(0);
-          transform: translateY(20px) translateZ(0);
+  transform: translateY(20px) translateZ(0);
 }
 .dropdown__positioner.popover-visible .dropdown__panel {
   opacity: 1;
-  -webkit-transform: translateY(0) translateZ(0);
-          transform: translateY(0) translateZ(0);
+  transform: translateY(0) translateZ(0);
 }
 .dropdown__panel ::slotted(nano-menu) {
   max-block-size: 50vh;