@layerfi/components 0.1.20 → 0.1.22

package/dist/styles/index.css

@@ -46,6 +46,8 @@
   --base-transparent-8: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.08 );
   --base-transparent-10: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.1 );
   --base-transparent-12: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.12 );
+  --base-transparent-16: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.16 );
+  --base-transparent-16-light: hsla( var(--color-light-h), var(--color-light-s), var(--color-light-l), 0.16 );
   --color-primary: var(--color-dark);
   --color-accent: var(--color-light);
   --color-secondary: var(--color-base);
@@ -547,7 +549,7 @@
   padding-top: 42px;
 }
 .Layer__chart-container {
-  min-height: 250px;
+  min-height: 300px;
 }
 .Layer__chart__tooltip {
   background-color: var(--color-base-1000);
@@ -578,6 +580,9 @@
 .Layer__chart__tooltip-list .Layer__chart__tooltip-value.negative {
   color: var(--color-danger);
 }
+.Layer__chart_y-axis-tick tspan {
+  font-size: var(--text-sm);
+}
 .Layer__date-month-picker {
   width: 210px;
   font-size: 14px;
@@ -609,6 +614,9 @@
 .Layer__date-month-picker__button-icon path {
   stroke: var(--text-color);
 }
+.Layer__date-month-picker__button--disabled .Layer__date-month-picker__button-icon path {
+  stroke: var(--color-base-500);
+}
 .Layer__date-month-picker__label {
   flex: 1;
   font-size: 14px;
@@ -639,6 +647,7 @@
 .Layer__hover-menu {
   position: relative;
   display: flex;
+  width: 100%;
 }
 .Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
   top: 100%;
@@ -652,6 +661,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  width: 100%;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper {
   position: absolute;
@@ -659,7 +669,7 @@
   top: 80%;
   right: -8px;
   padding-top: var(--spacing-xs);
-  min-width: 108px;
+  min-width: 160px;
   touch-action: none;
   pointer-events: none;
   opacity: 0;
@@ -693,6 +703,7 @@
   align-items: center;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
+  text-align: start;
   background: none;
   border: none;
   outline: none;
@@ -3744,6 +3755,7 @@
 .Layer__linked-accounts {
   min-height: 150px;
   box-sizing: border-box;
+  overflow: visible;
 }
 .Layer__linked-accounts::-webkit-scrollbar {
   display: none;
@@ -3967,6 +3979,21 @@
   transform: translate3d(5px, -5px, 0);
   transition: 0.15s all ease-out;
 }
+.Layer__linked-accounts__options .Layer__linked-accounts__options-overlay--transparent {
+  background: none;
+}
+.Layer__linked-accounts-pill__options-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  cursor: pointer;
+}
+.Layer__linked-accounts-pill__invisible-spacer {
+  width: 100%;
+  height: 24px;
+}
 .Layer__loader {
   width: 100%;
   display: flex;
@@ -4002,6 +4029,171 @@
   background-size: 200% 100%;
   animation: 1.2s shine linear infinite;
 }
+.Layer__tasks-component {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  padding: var(--spacing-md) var(--spacing-lg);
+  gap: var(--spacing-md);
+  max-width: 480px;
+}
+.Layer__tasks-component .Layer__tasks-pending {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  border-radius: 8px;
+  background-color: var(--color-base-0);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: 540;
+  padding: var(--spacing-xs);
+  border-radius: 8px;
+  background-color: var(--color-base-50);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
+  transform: rotate(90deg);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--done {
+  color: var(--color-success);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--pending {
+  color: var(--color-warning);
+}
+.Layer__tasks-component .Layer__tasks-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks-list {
+  border-radius: 8px;
+  background-color: var(--color-base-0);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
+  padding: var(--spacing-xs);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
+  border-bottom: 1px solid var(--color-base-300);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item {
+  display: flex;
+  flex-direction: column;
+  transition: all 0.1s ease-in-out;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item.Layer__tasks-list-item__expanded {
+  background: var(--color-base-50);
+  border-radius: 6px;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info .Layer__tasks-list-item__head-info__status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xs);
+  border-radius: 100%;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed {
+  color: var(--color-base-500);
+  text-decoration: line-through;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed .Layer__tasks-list-item__head-info__status {
+  color: var(--color-info-success);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--pending .Layer__tasks-list-item__head-info__status {
+  color: var(--color-info-warning-fg);
+  background: var(--color-info-warning-bg);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
+  padding-right: var(--spacing-sm);
+  padding-left: var(--spacing-sm);
+  padding-bottom: 0;
+  height: 0;
+  opacity: 0;
+  transition: all 0.2s ease-out;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__text {
+  margin-bottom: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__actions {
+  margin-top: var(--spacing-xs);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item--completed {
+  color: var(--color-base-500);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item__body--expanded {
+  padding-bottom: var(--spacing-sm);
+  height: auto;
+  opacity: 1;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  text-align: center;
+  padding: var(--spacing-md);
+  color: var(--color-base-500);
+}
+.Layer__tasks-component .Layer__tasks-list-item__actions {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: flex-end;
+}
+.Layer__tasks-component .Layer__tasks-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: var(--color-base-50);
+  box-shadow: 0px 0px 0px 1px var(--color-base-300);
+}
+.Layer__tasks-component .Layer__tasks__pagination {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing-md) var(--spacing-sm);
+  margin: 0 var(--spacing-xs);
+}
+.Layer__tasks-component .Layer__tasks__pagination ul {
+  margin: 0;
+}
+@media screen and (max-width: 400px) {
+  .Layer__tasks-component {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
+    padding: var(--spacing-xs);
+  }
+  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
+    padding-right: var(--spacing-xs);
+    padding-left: var(--spacing-xs);
+  }
+}
 .Layer__pagination {
   display: inline-flex;
   list-style-type: none;
@@ -4136,6 +4328,7 @@
   }
 }
 .Layer__pill {
+  position: relative;
   background-color: var(--badge-bg-color);
   color: var(--badge-color);
   border-radius: var(--badge-border-radius);
@@ -4145,10 +4338,15 @@
   flex-direction: row;
   align-items: center;
   white-space: nowrap;
+  user-select: none;
 }
 .Layer__pill svg {
   margin-right: 0.25rem;
 }
+.Layer__pill--error {
+  background-color: var(--color-info-error-bg);
+  color: var(--color-info-error-fg);
+}
 .Layer__component-container .Layer__profit-and-loss {
   display: flex;
   align-items: stretch;
@@ -4331,9 +4529,15 @@
 }
 .Layer__profit-and-loss-chart .legend-item-0 {
   fill: var(--bar-color-income);
+  stroke: var(--bar-color-income);
 }
 .Layer__profit-and-loss-chart .legend-item-1 {
   fill: var(--bar-color-expenses);
+  stroke: var(--bar-color-expenses);
+}
+.Layer__profit-and-loss-chart .legend-item-2 {
+  fill: var(--base-transparent-16-light);
+  stroke: var(--bar-color-income);
 }
 .Layer__profit-and-loss-chart__selection-indicator {
   stroke: var(--chart-indicator-color);
@@ -4454,6 +4658,10 @@
   grid-template-columns: subgrid;
   background-color: var(--color-base-50);
 }
+.Layer__profit-and-loss-chart__bar--loading {
+  fill: var(--color-base-50);
+  animation: layer_chart_bar_loading_anim 2s linear infinite;
+}
 .Layer__profit-and-loss-chart__bar--income {
   fill: var(--bar-color-income);
 }
@@ -4482,6 +4690,18 @@
 .Layer__profit-and-loss-row__label--depth-0.Layer__profit-and-loss-row__label--display-children-false {
   padding-left: 22px;
 }
+#layer-bar-stripe-pattern rect {
+  fill: var(--color-base-400);
+}
+#layer-bar-stripe-pattern line {
+  stroke: var(--color-base-400);
+}
+#layer-bar-stripe-pattern-dark rect {
+  fill: var(--color-base-900);
+}
+#layer-bar-stripe-pattern-dark line {
+  stroke: var(--color-base-900);
+}
 @container (min-width: 1024px) {
   .Layer__profit-and-loss-row__label--depth-0 {
     padding-left: var(--spacing-xl);
@@ -4970,4 +5190,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     display: none;
   }
 }
+@container (max-width: 460px) {
+  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
+    margin-top: -12px;
+  }
+}
 /*# sourceMappingURL=index.css.map */