@aws-amplify/ui-react-storage 0.0.0-studio-console-80bb2e2-20230921222703 → 0.0.0-testdelay-84839eb-20250107181059

package/dist/storage-browser-styles.css

@@ -0,0 +1,482 @@
+.amplify-storage-browser {
+  --storage-browser-dropzone-active-color: hsl(190, 95%, 30%);
+  --storage-browser-gap-small: 0.375rem;
+  --storage-browser-gap: 0.6rem;
+  --storage-browser-gap-large: 1.2rem;
+  --storage-browser-status-error: hsl(0, 95%, 30%);
+  --storage-browser-status-success: hsl(130, 33%, 37%);
+  --storage-browser-status-progress: hsl(220, 95%, 30%);
+  --storage-browser-status-initial: hsl(210, 10%, 58%);
+  --storage-browser-loading-animation: spin 1s ease-out infinite;
+  --storage-browser-error-background: hsl(0, 75%, 95%);
+  --storage-browser-error-text: hsl(0, 100%, 20%);
+}
+
+.storage-browser__pagination {
+  justify-self: flex-end;
+}
+
+.storage-browser__pagination-list {
+  gap: var(--storage-browser-gap-small);
+}
+
+.storage-browser__pagination-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.storage-browser__pagination-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.storage-browser__pagination-button-icon,
+.storage-browser__data-refresh-icon,
+.storage-browser__message-dismiss-icon,
+.storage-browser__menu-toggle-icon {
+  display: block;
+}
+
+.storage-browser__field {
+  display: flex;
+  flex-direction: column;
+  margin-inline-start: var(--storage-browser-gap);
+  gap: var(--storage-browser-gap);
+}
+
+.storage-browser__message {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--storage-browser-gap);
+}
+
+.storage-browser__message-dismiss {
+  flex: 0 0 auto;
+}
+.storage-browser__message-content {
+  flex: 1 1 auto;
+}
+
+.storage-browser__upload-destination,
+.storage-browser__copy-destination {
+  flex: 1;
+}
+
+.storage-browser__locations-view-data-refresh,
+.storage-browser__locations-detail-view-data-refresh {
+  justify-self: flex-end;
+}
+
+.storage-browser__action-status {
+  vertical-align: middle;
+  margin-inline-end: var(--storage-browser-gap-small);
+}
+
+.storage-browser__menu {
+  position: relative;
+  display: inline-block;
+  justify-self: flex-end;
+}
+
+.storage-browser__menu-list {
+  display: none;
+  gap: var(--storage-browser-gap-small);
+  flex-direction: column;
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: 100%;
+  width: max-content;
+  max-width: var(--storage-browser-menu-max-width);
+  z-index: 2;
+}
+
+.storage-browser__menu-list--open {
+  display: flex;
+}
+
+.storage-browser__menu-item {
+  display: flex;
+  gap: var(--storage-browser-gap-small);
+  align-items: center;
+}
+
+.storage-browser__add-folder {
+  justify-self: flex-end;
+}
+
+.storage-browser__action-status--action-initial {
+  color: var(--storage-browser-status-initial);
+}
+.storage-browser__action-status--action-success {
+  color: var(--storage-browser-status-success);
+}
+.storage-browser__action-status--action-progress {
+  color: var(--storage-browser-status-progress);
+}
+.storage-browser__action-status--action-error,
+.storage-browser__action-status--action-canceled {
+  color: var(--storage-browser-status-error);
+}
+
+.storage-browser__empty-message {
+  text-align: center;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* Action Views */
+
+.storage-browser__action-header {
+  /* grid-column: 1 / -1; */
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--storage-browser-gap);
+  align-items: center;
+}
+
+.storage-browser__action-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--storage-browser-gap-medium);
+  align-items: center;
+}
+
+/* Error boundary */
+.storage-browser__error-boundary {
+  background-color: var(--storage-browser-error-background);
+  color: var(--storage-browser-error-text);
+  padding: var(--storage-browser-gap-large);
+}
+/** Util class to visually hide content only needed for accessibility */
+.storage-browser-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  fill: transparent;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.storage-browser__action-destination,
+.storage-browser__action-destination .storage-browser__description-list {
+  display: flex;
+  gap: var(--storage-browser-gap-small);
+  align-items: center;
+}
+
+.storage-browser__action-destination > span {
+  font-weight: var(--amplify-font-weights-bold);
+}
+
+/* Base component styles */
+/** DescriptionList **/
+.storage-browser__description-list {
+  margin: 0;
+  display: flex;
+  gap: var(--storage-browser-gap-large);
+  align-items: center;
+}
+
+.storage-browser__description {
+  display: flex;
+  align-items: center;
+  gap: var(--storage-browser-gap-small);
+}
+
+.storage-browser__description-details {
+  margin: 0;
+  display: flex;
+}
+
+/** DropZone **/
+.storage-browser__drop-zone--active {
+  outline: 2px solid var(--storage-browser-dropzone-active-color);
+}
+
+/** LoadingIndicator **/
+.storage-browser__loading-indicator {
+  display: flex;
+  gap: var(--storage-browser-gap-small);
+  padding: var(--storage-browser-gap-large);
+  justify-content: center;
+}
+
+.storage-browser__loading-indicator-icon {
+  animation: var(--storage-browser-loading-animation);
+}
+
+/** Breadcrumb Navigation **/
+.storage-browser__breadcrumb-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--storage-browser-gap-small);
+}
+
+.storage-browser__breadcrumb-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--storage-browser-gap-small);
+}
+
+/** Table **/
+.storage-browser__table {
+  width: 100%;
+  position: relative;
+}
+
+.storage-browser__table-wrapper {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-tertiary);
+  width: 100%;
+}
+
+.storage-browser__table-head {
+  position: sticky;
+  top: 0;
+  background: var(--amplify-colors-background-primary);
+  box-shadow: var(--amplify-shadows-small);
+}
+
+.storage-browser__table-header {
+  text-align: start;
+}
+
+.storage-browser__table-sort-header {
+  padding: var(--storage-browser-gap-small);
+  display: inline-flex;
+  align-items: center;
+}
+
+.storage-browser__table-button-data-cell,
+.storage-browser__table-date-data-cell,
+.storage-browser__table-number-data-cell,
+.storage-browser__table-text-data-cell {
+  display: flex;
+  width: 100%;
+  gap: var(--storage-browser-gap-small);
+  padding: var(--storage-browser-gap-small);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  align-items: center;
+  justify-content: flex-start;
+}
+.storage-browser__table-button-data-cell span,
+.storage-browser__table-date-data-cell span,
+.storage-browser__table-number-data-cell span,
+.storage-browser__table-text-data-cell span {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.storage-browser__table-button-data-cell--icon-only {
+  width: initial;
+}
+
+.storage-browser__table-text-data-cell-icon {
+  flex-shrink: 0;
+}
+.storage-browser__table-text-data-cell-icon--action-queued {
+  color: var(--storage-browser-status-initial);
+}
+
+.storage-browser__table-text-data-cell-icon--action-success {
+  color: var(--storage-browser-status-success);
+}
+
+.storage-browser__table-text-data-cell-icon--action-progress {
+  color: var(--storage-browser-status-progress);
+}
+
+.storage-browser__table-text-data-cell-icon--action-canceled,
+.storage-browser__table-text-data-cell-icon--action-error {
+  color: var(--storage-browser-status-error);
+}
+
+/* Locations view control wrapper styles */
+.storage-browser__locations-view-data-table th:nth-of-type(3) {
+  width: 8rem;
+}
+
+/* Locations view control wrapper styles */
+
+.storage-browser__location-detail-view-data-table th:nth-of-type(1) {
+  width: 2rem;
+}
+
+.storage-browser__location-detail-view-data-table th:nth-of-type(3),
+.storage-browser__location-detail-view-data-table th:nth-of-type(5) {
+  width: 8rem;
+}
+
+.storage-browser__location-detail-view-data-table th:nth-of-type(4) {
+  width: 12rem;
+}
+
+.storage-browser__location-detail-view-data-table th:nth-of-type(5) {
+  text-align: end;
+}
+
+.storage-browser__location-detail-view-data-table th:nth-of-type(6) {
+  width: 4rem;
+}
+
+.storage-browser__location-detail-view-data-table td:nth-of-type(5) div {
+  justify-content: end;
+}
+
+.storage-browser__location-detail-view-data-table td:nth-of-type(6) button {
+  justify-content: center;
+}
+
+/* Upload action view control wrapper styles */
+.storage-browser__upload-view-data-table th:nth-of-type(3),
+.storage-browser__upload-view-data-table th:nth-of-type(4),
+.storage-browser__upload-view-data-table th:nth-of-type(5),
+.storage-browser__upload-view-data-table th:nth-of-type(6) {
+  width: 8rem;
+}
+
+.storage-browser__upload-view-data-table th:nth-of-type(4) {
+  text-align: end;
+}
+
+.storage-browser__upload-view-data-table th:nth-of-type(7) {
+  width: 4rem;
+}
+
+.storage-browser__upload-view-data-table td:nth-of-type(4) div {
+  justify-content: end;
+}
+
+/* Upload view control wrapper styles */
+.storage-browser__upload-status-display,
+.storage-browser__action-status-display {
+  justify-content: flex-start;
+  margin: 0;
+  display: flex;
+  gap: var(--storage-browser-gap-large);
+  flex: 1;
+}
+
+.storage-browser__copy-destination-picker {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.storage-browser__table-data-cell:first-child,
+.storage-browser__table-data-cell:last-child,
+.storage-browser__table__data:first-child,
+.storage-browser__table__data:last-child,
+.storage-browser__table-header:first-child,
+.storage-browser__table-header:last-child {
+  border-left: none;
+  border-right: none;
+}
+
+.storage-browser__table-header {
+  border: none;
+}
+
+.storage-browser__location-detail-view-controls {
+  display: flex;
+  direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  width: 100%;
+}
+
+/* Copy view styles */
+.storage-browser__copy-destination-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+/* Search view styles */
+.storage-browser__search {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  min-width: 35rem;
+  flex: 1;
+}
+
+.storage-browser__search-field-clear {
+  position: absolute;
+  display: flex;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.storage-browser__search .storage-browser__search-field {
+  position: relative;
+  display: flex;
+  height: 3rem;
+}
+
+.storage-browser__search .storage-browser__search-field-icon {
+  position: absolute;
+  left: var(--storage-browser-gap-small);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.storage-browser__search .storage-browser__search-field-input {
+  border-radius: 0.25rem 0 0 0.25rem;
+  padding-inline-start: 2rem;
+  padding-inline-end: 3.25rem;
+  flex: 1;
+}
+
+.storage-browser__search-submit {
+  border-radius: 0 0.25rem 0.25rem 0;
+  min-height: 3rem;
+}
+
+.storage-browser__search-submit:not(:focus) {
+  border-inline-start-color: transparent;
+}
+
+.storage-browser__search-subfolder-toggle__label {
+  margin-left: var(--storage-browser-gap);
+}
+
+/* Shared view styles */
+.storage-browser__locations-view-data-table,
+.storage-browser__location-detail-view-drop-zone,
+.storage-browser__location-detail-view-data-table,
+.storage-browser__copy-view-data-table,
+.storage-browser__delete-view-data-table,
+.storage-browser__upload-view-data-table,
+.storage-browser__destination-picker-data-table {
+  display: grid;
+  grid-column: 1 / -1;
+  width: 100%;
+}

package/dist/storage-browser-styles.js

@@ -0,0 +1,2 @@
+'use strict';
+