q2-tecton-elements 1.52.2 → 1.54.0

package/dist/collection/components/q2-file-picker/q2-file-picker.css

@@ -0,0 +1,307 @@
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*:active {
+  outline: none;
+}
+
+*:focus {
+  outline: none;
+  box-shadow: var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc);
+}
+
+:host {
+  box-shadow: none !important;
+}
+
+::-moz-focus-inner {
+  border: none;
+}
+
+input,
+textarea,
+button {
+  font-family: inherit;
+  font-size: inherit;
+  font-stretch: inherit;
+}
+
+:host(.sr),
+:host(.sr) button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.sr,
+.sr button {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.hidden {
+  display: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+@keyframes growFromCenterFadeIn {
+  from {
+    transform: scaleX(0.75) scaleY(0.75);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1) scaleY(1);
+    opacity: 1;
+  }
+}
+@keyframes shrinkToCenterFadeOut {
+  from {
+    transform: scaleX(1) scaleY(1);
+    opacity: 1;
+  }
+  to {
+    transform: scaleX(0.75) scaleY(0.75);
+    opacity: 0;
+  }
+}
+:host {
+  display: block;
+}
+
+.browse {
+  text-align: left;
+}
+
+.drop-zone-text {
+  color: var(--tct-file-picker-drop-zone-text-color, var(--t-gray-6, #4D4D4D));
+  font-size: var(--tct-file-picker-drop-zone-font-size, var(--app-font-size-small, 12px));
+  font-weight: var(--tct-file-picker-browse-link-font-weight, 700);
+  margin-bottom: 0;
+  margin-top: var(--tct-file-picker-drop-zone-text-margin-top, var(--app-scale-2x, 10px));
+}
+
+.description {
+  color: var(--tct-file-picker-description-text-color, var(--t-gray-1, #0D0D0D));
+  font-size: var(--tct-file-picker-description-font-size, var(--app-font-size-small, 12px));
+  font-weight: var(--tct-file-picker-description-font-weight, 400);
+  text-align: var(--tct-file-picker-description-text-align, left);
+}
+
+.drop-zone {
+  align-items: center;
+  background-color: var(--tct-file-picker-drop-zone-background, var(--t-tertiary, #E8F5FC));
+  border-radius: var(--tct-file-picker-drop-zone-border-radius, var(--app-border-radius-2, 6px));
+  border-width: var(--tct-file-picker-drop-zone-border-width, 2px);
+  border-style: var(--tct-file-picker-drop-zone-border-style, dashed);
+  border-color: var(--tct-file-picker-drop-zone-border-color, var(--t-gray-8, #808080));
+  color: var(--tct-file-picker-drop-zone-color, #747474);
+  display: flex;
+  flex-direction: column;
+  font-size: var(--tct-file-picker-drop-zone-font-size, --app-font-size, 14px);
+  font-weight: var(--tct-file-picker-drop-zone-font-weight, 400);
+  height: var(--tct-file-picker-drop-zone-height, 150px);
+  justify-content: center;
+  padding: var(--tct-file-picker-drop-zone-padding, 20px);
+  text-align: center;
+  width: var(--tct-file-picker-drop-zone-width, 100%);
+}
+
+.drop-zone-highlighted {
+  background-color: var(--tct-file-picker-drop-zone-highlighted-background, var(--tertiary-d-1, #BEE1F6));
+  border-color: var(--tct-file-picker-drop-zone-highlighted-border, var(--t-gray-8, #808080));
+}
+
+.fade-in {
+  animation-fill-mode: both;
+  animation-play-state: running;
+  animation: growFromCenterFadeIn 0.2s ease-in;
+}
+
+.fade-out {
+  animation: shrinkToCenterFadeOut 0.1s ease-out;
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+
+.file-item {
+  --tct-btn-icon-border-radius: 4px;
+  --tct-btn-neutral-text-active-font-color: var(--tct-file-picker-item-close-btn-active-color, var(--t-gray-1, #0D0D0D));
+  --tct-btn-neutral-text-focus-visible-outer-ring-color: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));
+  --tct-btn-neutral-text-font-color: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));
+  --tct-btn-neutral-text-hover-outer-ring-color: var(--tct-file-picker-item-close-btn-hover-focus-ring-color, var(--t-gray-1, #0D0D0D));
+  --tct-btn-padding: 0;
+  --tct-icon-stroke-primary: var(--tct-file-picker-item-close-btn-color, var(--t-gray-1, #0D0D0D));
+  --tct-item-body-font-size: var(--tct-file-picker-item-font-size, var(--app-font-size-small, 12px));
+  --tct-item-body-font-weight: var(--tct-file-picker-item-font-weight, 400);
+  --tct-item-border-radius: var(--tct-file-picker-item-border-radius, var(--app-border-radius-3, 12px));
+  --tct-item-border: var(--tct-file-picker-item-border-width, 1px) solid var(--tct-file-picker-item-border-color, var(--t-gray-8, #808080));
+  --tct-item-header-color: var(--tct-file-picker-item-name-color, var(--t-gray-1, #0D0D0D));
+  --tct-item-header-font-size: var(--tct-file-picker-item-name-font-size, var(--app-font-size-small, 12px));
+  --tct-item-header-font-weight: var(--tct-file-picker-item-name-font-weight, 400);
+  --tct-item-padding: var(--tct-file-picker-item-padding, var(--app-scale-1x, 5px) var(--app-scale-2x, 10px));
+  text-align: left;
+}
+
+.file-item-loading {
+  font-size: var(--tct-file-picker-file-item-loading-size, var(--app-scale-6x, 30px));
+  margin-bottom: calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-6x, 30px)) / 8.57);
+  margin-left: calc(var(--tct-file-picker-file-item-loading-margin-bottom, var(--app-scale-1x, 5px)) / 2);
+}
+
+.file-list {
+  --tct-list-item-gap: var(--tct-file-picker-section-gap, var(--app-scale-3x, 15px));
+}
+
+.file-list-container {
+  max-height: var(--tct-file-picker-list-max-height, 190px);
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--tct-file-picker-scrollbar-color, var(--t-a11y-gray-color, #949494)) transparent;
+}
+
+.file-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tct-file-picker-file-item-gap, var(--app-scale-3x, 15px));
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tct-file-picker-heading-gap, var(--app-scale-1x, 5px));
+  justify-content: space-between;
+}
+
+.icon-success,
+.icon-error {
+  --tct-icon-size: var(--tct-file-picker-file-item-icon-size, var(--app-scale-6x, 30px));
+  --tct-icon-stroke-width: 2px;
+}
+
+.label {
+  color: var(--tct-file-picker-label-color, var(--t-gray-1, #0D0D0D));
+  display: inline-block;
+  font-size: var(--tct-file-picker-label-font-size, var(--app-font-size, 14px));
+  font-weight: var(--tct-file-picker-label-font-weight, 600);
+  text-align: var(--tct-file-picker-label-text-align, left);
+}
+
+.loading {
+  font-size: var(--tct-file-picker-loading-size, var(--app-scale-6x, 25px));
+}
+
+.loading-file {
+  color: var(--tct-file-picker-loading-file-color, var(--t-gray-1, #0D0D0D));
+  font-size: var(--tct-file-picker-loading-file-font-size, var(--app-font-size-small, 12px));
+  font-weight: var(--tct-file-picker-loading-file-font-weight, 400);
+  margin: 0;
+}
+
+.loading-message {
+  color: var(--tct-file-picker-loading-message-color, var(--t-gray-1, #0D0D0D));
+  font-size: var(--tct-file-picker-loading-message-font-size, var(--app-font-size-small, 12px));
+  font-weight: var(--tct-file-picker-loading-message-font-weight, 700);
+  margin-bottom: var(--tct-file-picker-loading-message-margin-bottom, var(--app-scale-2x, 10px));
+  margin-top: var(--tct-file-picker-loading-message-margin-top, var(--app-scale-2x, 10px));
+}
+
+.dismiss-button {
+  height: 30px;
+  width: 30px;
+}
+.dismiss-button:hover {
+  --tct-icon-stroke-primary: var(--tct-file-picker-item-close-btn-hover-color, var(--t-gray-1, #0D0D0D));
+}
+
+[slot=action] {
+  display: flex;
+  align-items: center;
+}