@layerfi/components 0.1.6 → 0.1.7

package/dist/styles/index.css

@@ -156,6 +156,16 @@
 .Layer__component *::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
+.Layer__sortable-col .Layer__sort-arrows .desc-arrow,
+.Layer__sortable-col .Layer__sort-arrows .asc-arrow {
+  stroke: var(--color-base-500);
+}
+.Layer__sortable-col.sort--desc .Layer__sort-arrows .desc-arrow {
+  stroke: var(--color-base-1000);
+}
+.Layer__sortable-col.sort--asc .Layer__sort-arrows .asc-arrow {
+  stroke: var(--color-base-1000);
+}
 .Layer__badge {
   display: inline-flex;
   gap: var(--spacing-3xs);
@@ -914,6 +924,10 @@
 .Layer__text--error {
   color: var(--color-danger);
 }
+.Layer__label {
+  color: var(--color-base-500);
+  font-variation-settings: "wght" var(--font-weight-normal);
+}
 .Layer__flex-1 {
   flex: 1;
 }
@@ -2612,6 +2626,37 @@
 .Layer__profit-and-loss {
   background-color: white;
 }
+.Layer__component-container .Layer__profit-and-loss {
+  display: flex;
+  align-items: stretch;
+}
+.Layer__profit-and-loss__main-panel {
+  flex: 1;
+}
+.Layer__profit-and-loss__side-panel {
+  box-sizing: border-box;
+  border-left: 1px solid var(--color-base-300);
+  max-width: 0;
+  overflow: hidden;
+  width: 480px;
+  opacity: 0.05;
+  transition: max-width 250ms ease-out, opacity 350ms ease-out;
+}
+.Layer__profit-and-loss__side-panel.open {
+  max-width: 480px;
+  opacity: 1;
+}
+@container (max-width: 1100px) {
+  .Layer__profit-and-loss__side-panel {
+    position: absolute;
+    right: -500px;
+    top: 0;
+    height: 100%;
+  }
+  .Layer__profit-and-loss__side-panel.open {
+    right: 0;
+  }
+}
 .Layer__profit-and-loss__title {
   font-size: 1.5rem;
   font-weight: 600;
@@ -2873,6 +2918,15 @@
   min-height: 72px;
   box-sizing: border-box;
 }
+.Layer__profit-and-loss-summaries__summary.Layer__actionable {
+  cursor: pointer;
+}
+.Layer__profit-and-loss-summaries__summary.Layer__actionable:hover {
+  box-shadow: 0px 0px 0px 1px var(--color-base-500);
+}
+.Layer__profit-and-loss-summaries__summary.active {
+  box-shadow: 0px 0px 0px 1px var(--color-base-900);
+}
 .Layer__profit-and-loss-summaries__loader {
   height: 17px;
   display: flex;
@@ -2984,6 +3038,193 @@
     min-width: 150px;
   }
 }
+.Layer__profit-and-loss-detailed-charts > header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: var(--spacing-xl);
+  padding-bottom: var(--spacing-lg);
+  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+}
+.Layer__profit-and-loss-detailed-charts > header button.Layer__btn.Layer__btn--icon-only {
+  width: 32px;
+  height: 32px;
+  min-height: 32px;
+  padding: 0;
+}
+.Layer__profit-and-loss-detailed-charts__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+}
+.Layer__profit-and-loss-detailed-charts__head .title {
+  color: var(--color-base-800);
+}
+.Layer__profit-and-loss-detailed-charts__head .date {
+  color: var(--color-base-500);
+}
+.Layer__profit-and-loss-detailed-charts__head > .Layer__text {
+  margin: 0;
+}
+.Layer__profit-and-loss-detailed-charts {
+  width: 480px;
+  background: var(--color-base-0);
+}
+.Layer__profit-and-loss-detailed-charts .chart-container {
+  width: 480px;
+  height: 280px;
+  padding-top: var(--spacing-2xl);
+  padding-bottom: var(--spacing-lg);
+  padding-left: var(--spacing-md);
+  padding-right: var(--spacing-md);
+}
+.Layer__profit-and-loss-detailed-charts .recharts-responsive-container {
+  box-shadow: none;
+}
+.Layer__profit-and-loss-detailed-charts .recharts-responsive-container path:focus,
+.Layer__profit-and-loss-detailed-charts .recharts-responsive-container g:focus {
+  outline: none;
+}
+.Layer__profit-and-loss-detailed-charts .pie-center-label__title,
+.Layer__profit-and-loss-detailed-charts .pie-center-label__share {
+  fill: var(--color-base-600);
+  font-size: 12px;
+}
+.Layer__profit-and-loss-detailed-charts .pie-center-label__value {
+  fill: var(--color-base-900);
+  font-size: 14px;
+}
+.Layer__profit-and-loss-detailed-charts .filters {
+  display: flex;
+  margin: 0 var(--spacing-md);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  gap: var(--spacing-xs);
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__profit-and-loss-detailed-charts .type-select {
+  border-color: transparent;
+  font-family: var(--font-family);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  font-variant-numeric: lining-nums proportional-nums;
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+}
+.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
+  border-color: transparent;
+  font-family: var(--font-family);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  font-variant-numeric: lining-nums proportional-nums;
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+}
+.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
+  font-size: 12px;
+  font-family: var(--font-family);
+  font-variation-settings: "wght" var(--font-weight-normal);
+  font-variant-numeric: lining-nums proportional-nums;
+  font-feature-settings:
+    "cv10" on,
+    "cv05" on,
+    "cv08" on,
+    "ss03" on;
+}
+.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__indicator-separator {
+  display: none;
+}
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu {
+  width: min-content;
+  max-width: 300px;
+}
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option {
+  width: 100%;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-focused,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-selected,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:hover,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:active,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-visible,
+.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-within {
+  color: var(--text-color-primary);
+  background: var(--color-base-100);
+}
+.Layer__profit-and-loss-detailed-charts .details-container {
+  padding: var(--spacing-md);
+  padding-top: var(--spacing-sm);
+}
+.Layer__profit-and-loss-detailed-charts .details-container table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th,
+.Layer__profit-and-loss-detailed-charts .details-container table td {
+  text-align: left;
+  font-size: 12px;
+  padding: var(--spacing-2xs) var(--spacing-xs);
+  transition: color 150ms ease-out;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
+.Layer__profit-and-loss-detailed-charts .details-container table th.value-col,
+.Layer__profit-and-loss-detailed-charts .details-container table td:last-child,
+.Layer__profit-and-loss-detailed-charts .details-container table td.value-col {
+  text-align: right;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th {
+  cursor: pointer;
+  color: var(--color-base-500);
+  border-bottom: 1px solid var(--color-base-300);
+  transition: color 150ms ease-out;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th:hover {
+  color: var(--color-base-800);
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th.sort--asc,
+.Layer__profit-and-loss-detailed-charts .details-container table th.sort--desc {
+  color: var(--color-base-1000);
+}
+.Layer__profit-and-loss-detailed-charts .details-container .Layer__sort-arrows {
+  position: relative;
+  top: 1px;
+}
+.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2xs);
+}
+.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .share-icon {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+.Layer__profit-and-loss-detailed-table__row .category-col,
+.Layer__profit-and-loss-detailed-table__row .value-col {
+  color: var(--color-base-900);
+}
+.Layer__profit-and-loss-detailed-table__row .type-col,
+.Layer__profit-and-loss-detailed-table__row .share-col {
+  color: var(--color-base-1000);
+}
+.Layer__profit-and-loss-detailed-table__row.inactive .type-col,
+.Layer__profit-and-loss-detailed-table__row.inactive .share-col {
+  color: var(--color-base-500);
+}
+.Layer__profit-and-loss-detailed-charts__pie {
+  transition: fill 1000ms ease-out;
+}
+.Layer__profit-and-loss-detailed-charts__pie.inactive {
+  fill: var(--color-base-300);
+}
 .Layer__radio-button-group {
   display: flex;
   font-size: 1rem;