@nanoporetech-digital/components 3.2.0 → 3.3.0

package/dist/collection/components/select/select.css

@@ -19,8 +19,6 @@
   display: block;
 }
 .form-ctrl.has-helper-end {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   gap: 1rem;
   opacity: 0;
@@ -29,9 +27,7 @@
   opacity: 1;
 }
 .form-ctrl.has-helper-end .form-ctrl__wrapper {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 100%;
-          flex: 1 1 100%;
+  flex: 1 1 100%;
 }
 .form-ctrl.has-helper-end .form-ctrl__helper-end {
   display: none;
@@ -74,31 +70,24 @@ label.visually-hide,
 
 .form-ctrl__float-label {
   padding-block: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline-end: 0;
+  padding-inline-start: var(--padding-start);
   color: var(--label-color);
   position: absolute;
   font-size: 1.15em;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
-  -webkit-transform-origin: top left;
-          transform-origin: top left;
+  transform: translateY(-50%);
+  transform-origin: top left;
   inset-block-start: 50%;
-  -webkit-transition: all 0.125s ease-in;
   transition: all 0.125s ease-in;
   opacity: 1;
 }
 :host(.has-focus) .form-ctrl__float-label, :host(.has-value) .form-ctrl__float-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  transform: translateY(-110%);
   font-size: 0.8em;
   opacity: 0.7;
 }
 .form-ctrl__float-label .form-ctrl__label-charcount {
   opacity: 0;
-  -webkit-transition: opacity 0.125s ease-in;
   transition: opacity 0.125s ease-in;
 }
 :host(.has-focus) .form-ctrl__float-label .form-ctrl__label-charcount, :host(.has-value) .form-ctrl__float-label .form-ctrl__label-charcount {
@@ -109,53 +98,40 @@ label.visually-hide,
 }
 :host(.has-focus) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 :host(.has-value) .form-ctrl__textarea .form-ctrl__float-label {
   inset-block-start: 0;
-  -webkit-transform: translateY(38%);
-          transform: translateY(38%);
+  transform: translateY(38%);
 }
 
 .form-ctrl__label {
   color: var(--label-color);
   font-size: var(--label-font-size);
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
+  padding-block-end: var(--padding-bottom);
   line-height: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 .form-ctrl__label .form-ctrl__label-wrap {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .form-ctrl__label .form-ctrl__label-placeholder {
   margin-block: unset;
-  -webkit-margin-end: 5px;
-          margin-inline-end: 5px;
-  -webkit-margin-start: 0;
-          margin-inline-start: 0;
+  margin-inline-end: 5px;
+  margin-inline-start: 0;
   opacity: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-transition: 0.3s ease opacity;
   transition: 0.3s ease opacity;
   font-size: 0.9em;
 }
 .form-ctrl__label .form-ctrl__label-charcount {
   margin-block: unset;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-  -webkit-margin-start: auto;
-          margin-inline-start: auto;
+  margin-inline-end: 0;
+  margin-inline-start: auto;
   font-size: 0.9em;
   opacity: 0.5;
 }
@@ -173,7 +149,6 @@ label.visually-hide,
 .has-float-label .select__native-input,
 .has-float-label .input__native-ctrl {
   opacity: 0;
-  -webkit-transition: opacity 0.125s ease-in;
   transition: opacity 0.125s ease-in;
 }
 :host(.has-focus) .has-float-label .select__multi-input, :host(.has-value) .has-float-label .select__multi-input,
@@ -198,7 +173,6 @@ label.visually-hide,
   position: absolute;
   font-size: var(--invalid-msg-font-size);
   line-height: 1.2;
-  -webkit-transition: 0.3s ease-out opacity;
   transition: 0.3s ease-out opacity;
 }
 
@@ -211,9 +185,7 @@ label.visually-hide,
 }
 
 .form-ctrl__helper-end {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 30%;
-          flex: 1 1 30%;
+  flex: 1 1 30%;
   min-inline-size: 150px;
   font-size: var(--invalid-msg-font-size);
   color: var(--help-msg-color);
@@ -246,55 +218,39 @@ label.visually-hide,
   inline-size: 100%;
   padding: 0 !important;
   position: relative;
-  -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  flex: 1 0 auto;
   display: flex;
   background: var(--input-bg-color);
   border: var(--input-border-style);
   border-width: var(--input-border-width);
   font-size: var(--input-font-size);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--focus);
   border: var(--input-border-style--focus);
   border-width: var(--input-border-width);
-  -webkit-padding-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
-          padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
+  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;
 }
 :host(.is-invalid) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 :host(.is-invalid.has-focus) .form-ctrl__input {
   background: var(--input-bg-color--invalid);
   border: var(--input-border-style--invalid-focus);
   border-width: var(--input-border-width);
-  -webkit-border-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-          border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
-  -webkit-padding-start: 0 !important;
-          padding-inline-start: 0 !important;
+  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);
+  padding-inline-start: 0 !important;
 }
 
 .form-ctrl__input-wrap {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  align-items: stretch;
+  flex: 1;
   max-inline-size: 100%;
 }
 
@@ -310,12 +266,8 @@ label.visually-hide,
   outline: none;
   background-color: transparent;
   background-repeat: no-repeat;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   inline-size: auto;
 }
 
@@ -332,16 +284,10 @@ label.visually-hide,
 .form-ctrl__slot-value-end * {
   --nano-icon-size: 1.4em;
   padding-inline: unset;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
+  padding-inline-start: var(--padding-start);
+  padding-inline-end: var(--padding-end);
   font-size: 1em;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   block-size: 100%;
   z-index: 1;
@@ -368,11 +314,8 @@ label.visually-hide,
   opacity: 0;
   inline-size: 0;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   overflow: hidden;
 }
 :host(.is-invalid) .form-ctrl__clear-btn {
@@ -521,9 +464,7 @@ select {
   text-overflow: ellipsis;
   color: var(--input-text-color);
   display: inline-block;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
   width: 100%;
   max-width: 100%;
   max-height: 100%;
@@ -531,25 +472,18 @@ select {
   outline: none;
   background: transparent;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   margin: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   resize: none;
   overflow: hidden;
   cursor: default;
   line-height: 2.5em;
-  min-height: 2.5em;
 }
 .has-float-label .select__native-input {
   line-height: 2.1em;
   min-height: 2.1em;
-  -webkit-padding-before: 1.4em;
-          padding-block-start: 1.4em;
-}
-.select__native-input::-moz-selection {
-  background: transparent;
+  padding-block-start: 1.4em;
 }
 .select__native-input::selection {
   background: transparent;
@@ -557,42 +491,6 @@ select {
 .select__native-input::-moz-selection {
   background: transparent;
 }
-.select__native-input::-webkit-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input::-moz-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input:-ms-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
-.select__native-input::-ms-input-placeholder {
-  color: var(--placeholder-color);
-  font-family: inherit;
-  font-style: var(--placeholder-font-style);
-  font-weight: var(--placeholder-font-weight);
-  opacity: var(--placeholder-opacity);
-  line-height: inherit;
-  min-height: initial;
-}
 .select__native-input::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -614,8 +512,7 @@ select {
           appearance: none;
 }
 .select__native-input:invalid {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 .select__native-input::-ms-clear, .select__native-input::-ms-reveal {
   display: none;
@@ -629,24 +526,11 @@ select {
   padding-block: var(--padding-top) var(--padding-bottom);
   white-space: pre-wrap;
 }
-.form-ctrl__textarea .select__native-input::-webkit-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input::-moz-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input:-ms-input-placeholder {
-  line-height: 1.5em;
-}
-.form-ctrl__textarea .select__native-input::-ms-input-placeholder {
-  line-height: 1.5em;
-}
 .form-ctrl__textarea .select__native-input::placeholder {
   line-height: 1.5em;
 }
 .has-float-label.textarea .select__native-input {
-  -webkit-padding-before: 1.8em;
-          padding-block-start: 1.8em;
+  padding-block-start: 1.8em;
 }
 :host(.masked) .select__native-input {
   opacity: 0;
@@ -677,27 +561,16 @@ select {
 }
 
 .select__multi-wrap {
-  -webkit-padding-before: 0;
-          padding-block-start: 0;
-  -webkit-padding-end: 0;
-          padding-inline-end: 0;
-  -webkit-padding-after: var(--padding-bottom);
-          padding-block-end: var(--padding-bottom);
-  -webkit-padding-start: 0;
-          padding-inline-start: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  padding-block: 0 var(--padding-bottom);
+  padding-inline: 0 0;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex: 1;
+  flex-wrap: wrap;
   overflow: hidden;
+  align-items: flex-start;
 }
 :host(.has-float-label) .select__multi-wrap {
-  -webkit-padding-before: 1em;
-          padding-block-start: 1em;
+  padding-block-start: 1em;
 }
 .select__multi-input {
   font-family: inherit;
@@ -712,71 +585,51 @@ select {
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  -webkit-padding-before: var(--padding-top);
-          padding-block-start: var(--padding-top);
-  -webkit-padding-end: var(--padding-end);
-          padding-inline-end: var(--padding-end);
-  -webkit-padding-after: 0;
-          padding-block-end: 0;
-  -webkit-padding-start: var(--padding-start);
-          padding-inline-start: var(--padding-start);
+  padding-inline: var(--padding-start) var(--padding-end);
+  padding-block: var(--padding-bottom) 0;
   min-width: 50px;
   width: 100%;
   max-height: 100%;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   border: 0;
   outline: none;
   display: inline-block;
   background: transparent;
-  -webkit-box-flex: 0;
-      -ms-flex: 0;
-          flex: 0;
+  flex: 0;
   position: relative;
-  min-height: calc(2.5em - var(--padding-bottom));
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
+  line-height: calc(2.5em - var(--padding-bottom));
+  height: calc(2.5em - var(--padding-bottom));
 }
 .select__multi-input:last-child {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+  flex: 1;
 }
 .select__multi-value {
-  -webkit-margin-before: var(--padding-bottom);
-          margin-block-start: var(--padding-bottom);
-  -webkit-margin-start: var(--padding-start);
-          margin-inline-start: var(--padding-start);
-  -webkit-margin-end: -3px;
-          margin-inline-end: -3px;
+  margin-block: var(--padding-bottom) 0;
+  margin-inline: var(--padding-start) -3px;
   background: rgba(var(--multi-input-value-bg), 0.8);
   color: var(--multi-input-value-text-color);
   border: 1px solid;
   border-color: var(--multi-input-value-border);
   padding: 0.35em 0.5em;
-  line-height: 1;
   max-width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: var(--input-font-size);
   letter-spacing: 1px;
+  max-height: calc(2.5em - 8px);
 }
 .select__multi-value span {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 100%;
   overflow: hidden;
-  line-height: 1.2;
+  line-height: 1;
 }
 .select__multi-value-remove {
   background-position: center;
-  -webkit-padding-start: 0.5em;
-          padding-inline-start: 0.5em;
+  padding-inline-start: 0.5em;
   margin: 0;
   color: inherit;
   border: 0;
@@ -784,14 +637,9 @@ select {
   background-color: transparent;
   background-repeat: no-repeat;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   inset-block-start: 0;
   font-size: 1em;
 }
@@ -803,13 +651,11 @@ select {
   width: calc(100% - (1em + var(--padding-start) * 2));
 }
 :host(.has-focus.has-multiple) .form-ctrl__float-label {
-  -webkit-transform: translateY(-110%);
-          transform: translateY(-110%);
+  transform: translateY(-110%);
   font-size: 0.8em;
 }
 :host(.has-value.has-multiple) .form-ctrl__float-label {
-  -webkit-transform: translateY(21%);
-          transform: translateY(21%);
+  transform: translateY(21%);
   inset-block-start: 0;
 }
 

package/dist/collection/components/skeleton/skeleton.css

@@ -27,8 +27,6 @@
 }
 
 .skeleton {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   min-inline-size: 100%;
   min-block-size: 100%;
@@ -37,29 +35,16 @@
 }
 
 .skeleton__indicator {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  flex: 1 1 auto;
   background: var(--color);
   border-radius: inherit;
   line-height: inherit;
 }
 
 .skeleton.animate .skeleton__indicator {
-  background: -webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));
   background: linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));
   background-size: 400% 100%;
-  -webkit-animation: loader 6s ease-in-out infinite;
-          animation: loader 6s ease-in-out infinite;
-}
-
-@-webkit-keyframes loader {
-  0% {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
+  animation: loader 6s ease-in-out infinite;
 }
 
 @keyframes loader {

package/dist/collection/components/slides/slide.css

@@ -11,26 +11,17 @@
   display: none !important;
 }
 :host {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   position: relative;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
   inline-size: 100%;
   min-block-size: 100%;
   font-size: 18px;
   text-align: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   overflow: hidden;
-  -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
   opacity: 0;
 }

package/dist/collection/components/slides/slides.css

@@ -33,11 +33,8 @@
   --fsbtn-bg-color: white;
   display: block;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
           user-select: none;
   overflow: hidden;
-  -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
   opacity: 0;
 }
@@ -54,7 +51,6 @@
 .flickity-container {
   block-size: 0;
   opacity: 0;
-  -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
 .flickity-container.slides-ready {
@@ -105,19 +101,15 @@ https://flickity.metafizzy.co
 .flickity-enabled.is-draggable {
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
 .flickity-enabled.is-draggable .flickity-viewport {
   cursor: move;
-  cursor: -webkit-grab;
   cursor: grab;
 }
 
 .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
-  cursor: -webkit-grabbing;
   cursor: grabbing;
 }
 
@@ -137,8 +129,7 @@ https://flickity.metafizzy.co
 
 .flickity-button:focus {
   outline: none;
-  -webkit-box-shadow: 0 0 0 5px #19f;
-          box-shadow: 0 0 0 5px #19f;
+  box-shadow: 0 0 0 5px #19f;
 }
 
 .flickity-button:active {
@@ -168,8 +159,7 @@ https://flickity.metafizzy.co
   block-size: 44px;
   border-radius: 50%;
   /* vertically center */
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  transform: translateY(-50%);
 }
 
 .flickity-prev-next-button.previous {
@@ -237,8 +227,7 @@ https://flickity.metafizzy.co
   inline-size: 100%;
   block-size: 100%;
   background: rgba(0, 0, 0, 0.9);
-  -webkit-padding-after: 35px;
-          padding-block-end: 35px;
+  padding-block-end: 35px;
   z-index: 100;
 }