@layerfi/components 0.1.17 → 0.1.19

package/dist/styles/index.css

@@ -737,6 +737,7 @@
   background: #999;
 }
 .Layer__component.Layer__component--elevated {
+  border-width: 0;
   box-shadow:
     0px 4px 12px 0px var(--base-transparent-8),
     0px 2px 4px 0px var(--base-transparent-6),
@@ -1139,6 +1140,10 @@
     "cv05" on,
     "cv08" on,
     "ss03" on;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
 }
 .Layer__select .Layer__select__option-label {
   display: flex;
@@ -1317,6 +1322,17 @@
   right: 8px;
   z-index: 1;
 }
+@media screen and (-webkit-min-device-pixel-ratio: 2) {
+  .Layer__component .Layer__textarea,
+  .Layer__component .Layer__select__control,
+  .Layer__component .Layer__input {
+    font-size: 16px;
+    min-height: 39px;
+  }
+  .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
+    min-height: 39px;
+  }
+}
 .Layer__onboarding {
   transition:
     max-height 500ms ease-out,
@@ -1659,11 +1675,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
+  container-type: inline-size;
 }
 .Layer__view-header {
   display: flex;
   width: 100%;
   border-bottom: 1px solid var(--color-base-200);
+  container-type: inline-size;
 }
 .Layer__view-header__content {
   padding: var(--spacing-lg);
@@ -1677,6 +1695,16 @@
   display: flex;
   align-items: center;
 }
+@container (max-width: 760px) {
+  .Layer__view-header__content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+  .Layer__view-header__content .Layer__heading {
+    align-self: flex-start;
+  }
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -2241,6 +2269,7 @@
   display: flex;
   gap: var(--spacing-sm);
   flex: 1;
+  align-items: center;
 }
 .Layer__expanded-bank-transaction-row__table-cell--split-entry__merge-btn {
   width: 36px;
@@ -3188,8 +3217,8 @@
 .Layer__table__expand-icon {
   transition: transform 150ms ease-out;
   color: var(--color-base-600);
-  margin-left: -3px;
-  margin-right: var(--spacing-sm);
+  margin-left: -15px;
+  padding: var(--spacing-sm);
 }
 .Layer__chart-of-accounts__table .Layer__table-row:not(.Layer__table-row--depth-0):not(.Layer__table-row--header) {
   background-color: var(--color-base-50);
@@ -3461,15 +3490,6 @@
 .Layer__row--expanded .Layer__table-cell {
   background-color: var(--bg-element-focus);
 }
-.Layer__table__expand-icon {
-  transition: transform 150ms ease-out;
-  color: var(--color-base-600);
-  margin-left: -3px;
-  margin-right: var(--spacing-sm);
-}
-.Layer__journal__table .Layer__table-row--collapsed .Layer__table__expand-icon {
-  transform: rotate(-90deg);
-}
 .Layer__journal__form {
   display: flex;
   flex-direction: column;
@@ -4589,16 +4609,25 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: none;
 }
 .Layer__profit-and-loss-detailed-charts {
-  width: 480px;
+  width: 100%;
   background: var(--color-base-0);
 }
+.Layer__profit-and-loss-detailed-charts .chart-field {
+  width: 100%;
+}
 .Layer__profit-and-loss-detailed-charts .chart-container {
-  width: 480px;
+  width: 100%;
   height: 280px;
   padding-top: var(--spacing-2xl);
   padding-bottom: var(--spacing-lg);
   padding-left: var(--spacing-md);
   padding-right: var(--spacing-md);
+  box-sizing: border-box;
+}
+@container (max-width: 280px) {
+  .Layer__profit-and-loss-detailed-charts .chart-container {
+    width: 100%;
+  }
 }
 .Layer__profit-and-loss-detailed-charts .recharts-responsive-container {
   box-shadow: none;
@@ -4786,6 +4815,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     flex-direction: row;
     justify-content: space-between;
   }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-field {
+    max-width: 300px;
+  }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-container {
     max-width: 300px;
   }
@@ -4898,8 +4930,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__accounting-overview__summaries-row {
   display: flex;
   align-items: center;
-  column-gap: var(--spacing-md);
+  gap: var(--spacing-md);
   max-width: 1406px;
+  width: 100%;
 }
 .Layer__accounting-overview__summaries-row .Layer__notification-card {
   width: calc(25% - 12px);
@@ -4908,4 +4941,33 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
   margin-top: -42px;
 }
+.accounting-overview-profit-and-loss-charts > .Layer__toggle {
+  display: none;
+}
+@container (max-width: 1023px) {
+  .Layer__accounting-overview-profit-and-loss .recharts-legend-wrapper {
+    margin-top: -40px;
+  }
+}
+@container (max-width: 796px) {
+  .Layer__accounting-overview__summaries-row {
+    flex-direction: column;
+  }
+  .Layer__accounting-overview__summaries-row .Layer__profit-and-loss-summaries {
+    width: 100%;
+    flex-direction: column;
+  }
+  .Layer__accounting-overview__summaries-row .Layer__notification-card.Layer__txs-to-review {
+    width: 100%;
+  }
+  .accounting-overview-profit-and-loss-charts {
+    flex-direction: column;
+  }
+  .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 {
+    display: none;
+  }
+}
 /*# sourceMappingURL=index.css.map */