@layerfi/components 0.1.34 → 0.1.35

package/dist/styles/index.css

@@ -311,6 +311,36 @@
   background-color: var(--badge-color-error);
   color: var(--badge-bg-color-error);
 }
+.Layer__bar-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-base-800);
+  color: var(--color-base-50);
+  border-radius: var(--border-radius-xs);
+  padding: var(--spacing-3xs) var(--spacing-sm);
+  min-height: 52px;
+  box-shadow: 0px 0px 0px 3px var(--color-base-300);
+}
+.Layer__bar-banner__left-col {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+.Layer__bar-banner__text-container__desc {
+  color: var(--color-base-300);
+}
+@container (max-width: 560px) {
+  .Layer__bar-banner--bookkeeping {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+  }
+  .Layer__bar-banner--bookkeeping .Layer__icon-box {
+    display: none;
+  }
+}
 .Layer__btn {
   position: relative;
   border-radius: var(--btn-border-radius);
@@ -334,6 +364,11 @@
     0px 4px 5px 0px rgba(0, 0, 0, 0.01);
   transition: all 100ms ease-out;
   padding: 0 var(--spacing-md);
+  text-decoration: none;
+}
+.Layer__btn.Layer__btn--as-link {
+  display: inline-flex;
+  align-items: center;
 }
 .Layer__btn.Layer__back-btn {
   color: var(--btn-secondary-color);
@@ -348,6 +383,26 @@
   width: 36px;
   height: 36px;
 }
+.Layer__btn.Layer__expand-btn {
+  color: var(--btn-secondary-color);
+  background: var(--btn-secondary-bg-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  transition: all 150ms ease-out;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+}
+.Layer__btn.Layer__expand-btn svg {
+  transform: rotate(90deg);
+  transition: transform 120ms ease-in-out;
+}
+.Layer__btn.Layer__expand-btn.Layer__expand-btn--collapsed svg {
+  transform: rotate(-90deg);
+}
 .Layer__btn.Layer__btn--full-width {
   width: 100%;
 }
@@ -4716,6 +4771,16 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__chevron__up--counterclockwise {
   transform: rotate(-180deg);
 }
+.Layer__icon-box {
+  width: 32px;
+  height: 32px;
+  background-color: var(--color-base-0);
+  border-radius: var(--border-radius-3xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-base-1000);
+}
 .Layer__linked-accounts {
   min-height: 150px;
   box-sizing: border-box;
@@ -5033,13 +5098,29 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-warning);
 }
 .Layer__tasks-component .Layer__tasks-header {
+  min-height: 36px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   gap: var(--spacing-md);
   padding: var(--spacing-md) var(--spacing-lg);
   border-bottom: 1px solid var(--color-base-300);
 }
+.Layer__tasks-component .Layer__tasks-header__left-col {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks__content {
+  max-height: 1000px;
+  opacity: 1;
+  transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
+}
+.Layer__tasks-component .Layer__tasks__content.Layer__tasks__content--collapsed {
+  opacity: 0.3;
+  max-height: 0;
+}
 .Layer__tasks-component .Layer__tasks-list {
   background-color: var(--color-base-0);
   box-shadow: 0px 0px 0px 1px var(--color-base-300);
@@ -5146,6 +5227,7 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   padding: var(--spacing-md) var(--spacing-sm);
   margin: 0 var(--spacing-xs);
+  isolation: isolate;
 }
 .Layer__tasks-component .Layer__tasks__pagination ul {
   margin: 0;
@@ -6310,13 +6392,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__accounting-overview-profit-and-loss-charts {
   display: flex;
-  flex-direction: column;
   gap: var(--spacing-md);
+  max-width: 1406px;
 }
 .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
   margin-top: -42px;
 }
-.accounting-overview-profit-and-loss-charts > .Layer__toggle {
+.Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
   display: none;
 }
 @container (max-width: 1023px) {
@@ -6335,10 +6417,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__accounting-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
     width: 100%;
   }
-  .accounting-overview-profit-and-loss-charts {
+  .Layer__accounting-overview-profit-and-loss-charts {
     flex-direction: column;
   }
-  .accounting-overview-profit-and-loss-charts > .Layer__toggle {
+  .Layer__accounting-overview-profit-and-loss-charts > .Layer__toggle {
     display: flex;
   }
   .Layer__component.Layer__accounting-overview-profit-and-loss-chart.accounting-overview-profit-and-loss-chart--hidden {
@@ -6362,6 +6444,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   background: none;
 }
 @media screen and (min-width: 1100px) {
+  .Layer__bookkeeping-overview--view .Layer__panel__content {
+    max-width: 1406px;
+  }
   .Layer__bookkeeping-overview--view .Layer__view-main {
     padding-right: 0;
   }
@@ -6381,6 +6466,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
+  max-width: 1406px;
 }
 .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
   display: none;
@@ -6402,10 +6488,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__bookkeeping-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
     width: 100%;
   }
-  .bookkeeping-overview-profit-and-loss-charts {
+  .Layer__bookkeeping-overview-profit-and-loss-charts {
     flex-direction: column;
   }
-  .bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
+  .Layer__bookkeeping-overview-profit-and-loss-charts > .Layer__toggle {
     display: flex;
   }
 }