@layerfi/components 0.1.66 → 0.1.68

package/dist/styles/index.css

@@ -752,6 +752,14 @@
   color: var(--btn-color-icon-hover);
   margin-right: 10px;
 }
+.Layer__btn.Layer__btn--with-tooltip {
+  padding: 0;
+}
+.Layer__btn.Layer__btn--with-tooltip .Layer__tooltip-trigger {
+  padding: 0 var(--spacing-md);
+  justify-content: center;
+  height: 100%;
+}
 .Layer__card {
   display: flex;
   flex-direction: column;
@@ -1798,6 +1806,73 @@
   padding: var(--spacing-xs) var(--spacing-md);
   flex: 1;
 }
+.Layer__file-thumb {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  height: 38px;
+  gap: var(--spacing-2xs);
+  position: relative;
+}
+.Layer__file-thumb__actions {
+  display: none;
+  position: absolute;
+  top: -20px;
+  right: -10px;
+  gap: var(--spacing-4xs);
+  padding: var(--spacing-4xs);
+  background-color: var(--color-base-0);
+  border-radius: var(--border-radius-3xs);
+  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+  transform: scale(0.8);
+}
+.Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active {
+  background-color: var(--color-base-50);
+}
+.Layer__file-thumb__actions .Layer__icon-btn.Layer__icon-btn--active:hover {
+  background-color: var(--color-base-100);
+}
+.Layer__file-thumb__actions .Layer__file-thumb__actions__remove {
+  color: var(--color-danger);
+}
+.Layer__file-thumb:hover .Layer__file-thumb__actions {
+  display: flex;
+}
+.Layer__file-thumb__img {
+  width: 100%;
+  height: 100%;
+  height: 38px;
+  width: 38px;
+  border-radius: var(--border-radius-3xs, 4px);
+  background: var(--color-base-300);
+  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__file-thumb__img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.Layer__file-thumb__details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-4xs);
+  font-size: var(--text-sm);
+  justify-content: flex-start;
+  padding: var(--spacing-4xs) var(--spacing-2xs);
+}
+.Layer__file-thumb__details__date {
+  color: var(--color-base-600);
+}
+.Layer__file-thumb__details__uploading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+  color: var(--color-info-fg);
+}
+.Layer__file-thumb__details__error {
+  color: var(--color-danger);
+}
 .Layer__header {
   display: flex;
   flex-direction: column;
@@ -3851,8 +3926,9 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0 var(--spacing-md);
   padding-bottom: var(--spacing-sm);
   display: flex;
-  align-items: center;
-  gap: 10px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-md);
 }
 .Layer__bank-transaction-row__actions-cell {
   border-left: 1px solid var(--border-color);
@@ -3999,7 +4075,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
   position: -webkit-sticky;
   position: sticky;
-  right: 430px;
+  right: 494px;
   width: 150px;
   min-width: 150px;
   box-sizing: border-box;
@@ -4007,6 +4083,17 @@ tbody .Layer__table__empty-row:first-child {
   text-align: right;
   box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
 }
+.Layer__table.Layer__bank-transactions__table .Layer__bank-transactions__documents-col {
+  position: -webkit-sticky;
+  position: sticky;
+  right: 430px;
+  width: 64px;
+  min-width: 64px;
+  box-sizing: border-box;
+  z-index: 2;
+  text-align: center;
+  box-shadow: -8px 0px 20px -2px rgba(255, 255, 255, 0.64);
+}
 .Layer__table.Layer__bank-transactions__table .Layer__table-cell__category-col {
   position: -webkit-sticky;
   position: sticky;
@@ -4035,6 +4122,16 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 180px;
   box-sizing: border-box;
 }
+.Layer__bank-transactions__documents-col {
+  min-width: 64px;
+  width: 64px;
+  max-width: 64px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Layer__bank-transactions__documents-col .Layer__icon-box {
+  background-color: var(--color-base-100);
+}
 @container (min-width: 1400px) {
   .Layer__bank-transactions__date-col {
     min-width: 160px;