@layerfi/components 0.1.54 → 0.1.56

package/dist/styles/index.css

@@ -14,6 +14,9 @@
   --color-black: #1a1a1a;
   --color-white: white;
   --color-blue: hsl(217 100% 92%);
+  --color-info: #0968f8;
+  --color-info-bg: #d6e6ff;
+  --color-info-fg: #0056d7;
   --color-info-success: hsl(145, 45%, 42%);
   --color-info-success-bg: hsl(145, 59%, 86%);
   --color-info-success-fg: hsl(145, 63%, 29%);
@@ -125,6 +128,9 @@
   --badge-color: var(--color-base-900);
   --badge-fg-color: var(--color-base-900);
   --badge-bg-color: var(--color-base-400);
+  --badge-color-info: var(--color-info);
+  --badge-fg-color-info: var(--color-info-fg);
+  --badge-bg-color-info: var(--color-info-bg);
   --badge-color-success: var(--color-info-success);
   --badge-fg-color-success: var(--color-info-success-fg);
   --badge-bg-color-success: var(--color-info-success-bg);
@@ -286,6 +292,10 @@
   background-color: var(--badge-bg-color);
   color: var(--badge-fg-color);
 }
+.Layer__badge.Layer__badge--info {
+  background-color: var(--badge-bg-color-info);
+  color: var(--badge-fg-color-info);
+}
 .Layer__badge.Layer__badge--success {
   background-color: var(--badge-bg-color-success);
   color: var(--badge-fg-color-success);
@@ -621,6 +631,77 @@
   align-items: center;
   gap: var(--spacing-4xs);
 }
+.Layer__switch__container {
+  display: flex;
+  align-items: center;
+}
+.Layer__switch__container .Layer__switch__button {
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-width: 0px;
+  border-radius: var(--btn-border-radius);
+  font-family: var(--font-family);
+  cursor: pointer;
+  min-height: 36px;
+  box-sizing: border-box;
+  transition: all 100ms ease-out;
+  padding: 0 2px;
+  text-decoration: none;
+}
+.Layer__switch__container .Layer__switch__button:focus,
+.Layer__switch__container .Layer__switch__button :active {
+  box-shadow: 0px 0px 0px 1px var(--color-base-0), 0px 0px 0px 3px var(--color-base-0);
+  outline: var(--color-base-0);
+}
+.Layer__switch__container .Layer__switch__button--checked .Layer__switch__knob__wrapper {
+  background: var(--color-black);
+  border-color: var(--color-black);
+}
+.Layer__switch__container .Layer__switch__button--checked .Layer__switch__knob__wrapper .Layer__switch__knob {
+  transform: translateX(8px);
+  background: var(--color-white);
+  border-color: var(--color-white);
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__knob__wrapper {
+  color: var(--btn-color-icon-hover);
+  background: var(--color-white);
+  border-color: var(--btn-bg-color-icon-hover);
+  cursor: not-allowed;
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__knob__wrapper .Layer__switch__knob {
+  background: var(--color-white);
+  border-color: var(--btn-bg-color-icon-hover);
+}
+.Layer__switch__container .Layer__switch__button--disabled .Layer__switch__label {
+  color: var(--btn-color-icon-hover);
+}
+.Layer__switch__container .Layer__switch__knob__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background: var(--color-white);
+  border: 2px solid var(--color-base-300);
+  width: 18px;
+  height: 12px;
+  padding: 0 2px;
+  border-radius: 10px;
+  transition: all 0.2s ease;
+}
+.Layer__switch__container .Layer__switch__knob__wrapper .Layer__switch__knob {
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-white);
+  border-radius: 50%;
+  border: 2px solid var(--color-base-300);
+  transition: all 0.2s ease;
+}
+.Layer__switch__container .Layer__switch__label {
+  color: var(--btn-color-icon-hover);
+  margin-right: 10px;
+}
 .Layer__card {
   display: flex;
   flex-direction: column;
@@ -645,6 +726,9 @@
 .Layer__component .recharts-responsive-container.Layer__chart-container {
   padding-top: 42px;
 }
+.Layer__chart-wrapper {
+  position: relative;
+}
 .Layer__chart-container {
   min-height: 300px;
 }
@@ -823,6 +907,11 @@
 .Layer__component-header.Layer__component-header--next-line-actions .Layer__header__actions {
   width: 100%;
 }
+.Layer__component-header__title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
 .Layer__header__actions {
   display: flex;
   align-items: center;
@@ -2065,7 +2154,7 @@
   font-size: var(--input-font-size);
   line-height: 140%;
   background-color: var(--color-base-0);
-  min-height: 39px;
+  min-height: 36px;
   align-items: center;
   cursor: pointer;
 }
@@ -2154,15 +2243,18 @@
   right: 8px;
   z-index: 1;
 }
+.Layer__compare__options .Layer__select {
+  width: max-content;
+}
 @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;
+    min-height: 36px;
   }
   .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
-    min-height: 39px;
+    min-height: 36px;
   }
 }
 .Layer__onboarding {
@@ -2922,6 +3014,7 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
   gap: var(--spacing-sm);
   flex-wrap: wrap;
+  flex-grow: 1;
 }
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
@@ -6197,6 +6290,22 @@ tbody .Layer__table__empty-row:first-child {
   align-items: stretch;
   background-color: white;
 }
+.Layer__compare__options {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.Layer__compare__options .Layer__input-tooltip {
+  flex: 1;
+}
+.Layer__compare__options .Layer__compare__switch__options {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+}
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
@@ -6498,6 +6607,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-chart__bar--loading {
   fill: var(--color-base-50);
+}
+.Layer__profit-and-loss-chart__bar--loading-anim {
   animation: layer_chart_bar_loading_anim 2s linear infinite;
 }
 .Layer__profit-and-loss-chart__bar--income {
@@ -6648,6 +6759,55 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-200);
   color: var(--color-base-900);
 }
+.Layer__profit-and-loss-chart__state-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  background: #fff;
+  padding: var(--spacing-lg) var(--spacing-4xs);
+  width: 260px;
+  max-width: 70%;
+  height: 120px;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, -60px);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0px 0px 0px 1px var(--base-transparent-4);
+  gap: var(--spacing-md);
+}
+.Layer__profit-and-loss-chart__state-card .Layer__icon-box {
+  background-color: var(--color-base-100);
+}
+.Layer__profit-and-loss-chart__state-card__text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4xs);
+}
+.Layer__profit-and-loss-chart__state-card__description {
+  color: var(--text-color-secondary);
+  text-align: center;
+}
+.Layer__compare__controls__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  flex-grow: 1;
+  flex-wrap: wrap;
+}
+.Layer__compare__table__wrapper .Layer__table__wrapper {
+  overflow: auto;
+  max-width: 100%;
+}
+.Layer__compare__table__wrapper .Layer__table tr td:last-child .Layer__table-cell-content,
+.Layer__compare__table__wrapper .Layer__table tr th:last-child .Layer__table-cell-content {
+  justify-content: flex-start;
+  padding-right: var(--spacing-lg);
+}
 .Layer__profit-and-loss-detailed-charts__header--tablet,
 .Layer__profit-and-loss-detailed-charts__header {
   display: flex;