@layerfi/components 0.1.129-alpha → 0.1.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -2361,6 +2361,7 @@
2361
2361
 
2362
2362
  .Layer__UI__Table-TableHeader {
2363
2363
  height: 3.25rem;
2364
+ background-color: var(--color-base-0);
2364
2365
  }
2365
2366
  .Layer__UI__Table-TableHeader:not(:last-child) .Layer__UI__Table-Column {
2366
2367
  border-bottom: 1px solid var(--color-base-300);
@@ -2371,18 +2372,20 @@
2371
2372
 
2372
2373
  .Layer__UI__Table-Row {
2373
2374
  height: 3.25rem;
2374
- background-color: var(--color-base-200);
2375
2375
  }
2376
2376
  .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
2377
2377
  border-bottom: 1px solid var(--color-base-300);
2378
2378
  }
2379
- .Layer__UI__Table-Row[data-depth="0"] {
2379
+ .Layer__UI__Table-Row .Layer__UI__Table-Cell {
2380
+ background-color: var(--color-base-200);
2381
+ }
2382
+ .Layer__UI__Table-Row[data-depth="0"] .Layer__UI__Table-Cell {
2380
2383
  background-color: var(--color-base-0);
2381
2384
  }
2382
- .Layer__UI__Table-Row[data-depth="1"] {
2385
+ .Layer__UI__Table-Row[data-depth="1"] .Layer__UI__Table-Cell {
2383
2386
  background-color: var(--color-base-50);
2384
2387
  }
2385
- .Layer__UI__Table-Row[data-depth="2"] {
2388
+ .Layer__UI__Table-Row[data-depth="2"] .Layer__UI__Table-Cell {
2386
2389
  background-color: var(--color-base-100);
2387
2390
  }
2388
2391
 
@@ -2444,6 +2447,15 @@
2444
2447
  background-color: inherit;
2445
2448
  }
2446
2449
 
2450
+ .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=left],
2451
+ .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=left] {
2452
+ border-right: 1px solid var(--color-base-200);
2453
+ }
2454
+ .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Column[data-pinned=right],
2455
+ .Layer__UI__Table-ScrollContainer.Layer__UI__Table-ScrollContainer--has-horizontal-overflow .Layer__UI__Table-Cell[data-pinned=right] {
2456
+ border-left: 1px solid var(--color-base-200);
2457
+ }
2458
+
2447
2459
  .Layer__UI__Table-TableHeader .Layer__UI__Table-Column[data-pinned] {
2448
2460
  z-index: 2;
2449
2461
  background-color: var(--color-base-0);
@@ -3932,6 +3944,169 @@
3932
3944
  }
3933
3945
  .Layer__GlobalDateSelection .Layer__tooltip-trigger {
3934
3946
  padding-top: 0;
3947
+ }.Layer__chart-of-accounts__sidebar__header {
3948
+ display: flex;
3949
+ gap: var(--spacing-md);
3950
+ align-items: flex-start;
3951
+ justify-content: space-between;
3952
+ }
3953
+ .Layer__chart-of-accounts__sidebar__header .actions {
3954
+ display: flex;
3955
+ gap: var(--spacing-sm);
3956
+ align-items: center;
3957
+ }
3958
+
3959
+ .Layer__chart-of-accounts__form .actions {
3960
+ display: none;
3961
+ gap: var(--spacing-sm);
3962
+ align-items: center;
3963
+ justify-content: flex-end;
3964
+ padding-top: var(--spacing-xl);
3965
+ }
3966
+
3967
+ .Layer__chart-of-accounts__form {
3968
+ display: flex;
3969
+ flex-direction: column;
3970
+ padding: var(--spacing-xl) var(--spacing-md);
3971
+ }
3972
+ .Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
3973
+ padding: var(--spacing-xs) 0;
3974
+ }
3975
+ .Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline label {
3976
+ width: 140px;
3977
+ min-width: 140px;
3978
+ max-width: 140px;
3979
+ }
3980
+
3981
+ .Layer__chart-of-accounts__form-edit-entry {
3982
+ display: flex;
3983
+ gap: var(--spacing-md);
3984
+ align-items: center;
3985
+ justify-content: space-between;
3986
+ padding: var(--spacing-md);
3987
+ }
3988
+ .Layer__chart-of-accounts__form-edit-entry .Layer__text {
3989
+ margin: 0;
3990
+ }
3991
+
3992
+ .Layer__chart-of-accounts__form__error-message {
3993
+ box-sizing: border-box;
3994
+ width: 100%;
3995
+ padding: var(--spacing-4xs) var(--spacing-xl);
3996
+ text-align: right;
3997
+ color: var(--color-danger);
3998
+ }
3999
+
4000
+ @container (min-width: 1401px) {
4001
+ .Layer__chart-of-accounts .Layer__panel__sidebar .Layer__chart-of-accounts__form {
4002
+ padding: var(--spacing-xl);
4003
+ }
4004
+ .Layer__chart-of-accounts__form-edit-entry {
4005
+ padding: var(--spacing-md) var(--spacing-xl);
4006
+ }
4007
+ }
4008
+ @container (max-width: 1024px) {
4009
+ .Layer__chart-of-accounts__sidebar__header .actions {
4010
+ display: none;
4011
+ }
4012
+ .Layer__chart-of-accounts__form .actions {
4013
+ display: flex;
4014
+ }
4015
+ .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content {
4016
+ width: 100%;
4017
+ }
4018
+ .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group {
4019
+ box-sizing: border-box;
4020
+ width: 100%;
4021
+ max-width: 600px;
4022
+ margin: auto;
4023
+ }
4024
+ .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form-edit-entry {
4025
+ box-sizing: border-box;
4026
+ width: 100%;
4027
+ max-width: calc(600px + var(--spacing-xl) * 2);
4028
+ padding: var(--spacing-md) var(--spacing-xl);
4029
+ margin: auto;
4030
+ }
4031
+ .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
4032
+ width: 100%;
4033
+ max-width: calc(600px + var(--spacing-xl) * 2);
4034
+ padding: var(--spacing-md) var(--spacing-xl);
4035
+ margin: auto;
4036
+ }
4037
+ .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
4038
+ width: 100%;
4039
+ max-width: 600px;
4040
+ margin: auto;
4041
+ }
4042
+ }
4043
+ @container (min-width: 761px) and (max-width: 1024px) {
4044
+ .Layer__chart-of-accounts__form {
4045
+ padding: var(--spacing-xl);
4046
+ }
4047
+ }.Layer__ExpandButton {
4048
+ height: 16px;
4049
+ min-width: 16px;
4050
+ }
4051
+ .Layer__ExpandButton--collapsed {
4052
+ transform: rotate(-90deg);
4053
+ }
4054
+ .Layer__ExpandButton--expanded {
4055
+ transform: rotate(0deg);
4056
+ }.Layer__coa__actions .Layer__btn {
4057
+ opacity: 0;
4058
+ visibility: hidden;
4059
+ transition: all 300ms ease-out;
4060
+ transform: scale(0.92);
4061
+ }
4062
+
4063
+ .Layer__UI__Table-Row:hover .Layer__coa__actions .Layer__btn {
4064
+ opacity: 1;
4065
+ visibility: visible;
4066
+ transform: scale(1);
4067
+ }
4068
+
4069
+ .Layer__UI__Table__chart-of-accounts {
4070
+ table-layout: fixed;
4071
+ width: 100%;
4072
+ }
4073
+ .Layer__UI__Table__chart-of-accounts .Layer__UI__Table-Row,
4074
+ .Layer__UI__Table__chart-of-accounts .Layer__UI__Table-TableHeader > tr {
4075
+ display: grid;
4076
+ grid-template-columns: minmax(16rem, 1fr) minmax(8rem, 10rem) minmax(12rem, 16rem) minmax(8rem, 10rem) 10rem;
4077
+ width: 100%;
4078
+ }
4079
+ .Layer__UI__Table__chart-of-accounts:has(.Layer__UI__Table-Column__chart-of-accounts--AccountNumber) .Layer__UI__Table-Row,
4080
+ .Layer__UI__Table__chart-of-accounts:has(.Layer__UI__Table-Column__chart-of-accounts--AccountNumber) .Layer__UI__Table-TableHeader > tr {
4081
+ grid-template-columns: 13rem minmax(16rem, 1fr) minmax(8rem, 10rem) minmax(12rem, 16rem) minmax(8rem, 10rem) 10rem;
4082
+ }
4083
+ .Layer__UI__Table__chart-of-accounts .Layer__UI__Table-Cell .Layer__Span {
4084
+ color: var(--text-secondary);
4085
+ }
4086
+ .Layer__UI__Table__chart-of-accounts .Layer__mark {
4087
+ background-color: #fff2cc;
4088
+ }.Layer__chart-of-accounts__actions .Layer__SearchField {
4089
+ width: 15rem;
4090
+ }
4091
+ @container (max-width: 760px) {
4092
+ .Layer__chart-of-accounts__actions .Layer__SearchField {
4093
+ width: 12rem;
4094
+ }
4095
+ }.Layer__component-container.Layer__chart-of-accounts {
4096
+ position: relative;
4097
+ display: flex;
4098
+ align-items: stretch;
4099
+ overflow: hidden;
4100
+ }
4101
+
4102
+ .Layer__chart-of-accounts .Layer__panel {
4103
+ max-width: 100%;
4104
+ }
4105
+
4106
+ @container (max-width: 760px) {
4107
+ .Layer__chart-of-accounts {
4108
+ overflow: auto;
4109
+ }
3935
4110
  }.Layer__JournalEntryForm__LineItem {
3936
4111
  display: flex;
3937
4112
  gap: var(--spacing-xs);
@@ -4123,15 +4298,6 @@
4123
4298
 
4124
4299
  .Layer__tabs--initialized .Layer__tabs__thumb {
4125
4300
  transition: left 150ms ease, width 150ms ease;
4126
- }
4127
-
4128
- @container (width <= 400px) {
4129
- .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label {
4130
- display: none;
4131
- }
4132
- .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label-short {
4133
- display: flex;
4134
- }
4135
4301
  }body .calendly-overlay .calendly-popup {
4136
4302
  max-height: 1024px;
4137
4303
  }
@@ -4815,11 +4981,6 @@
4815
4981
  border-bottom: 1px solid var(--color-base-300);
4816
4982
  cursor: pointer;
4817
4983
  }
4818
- .Layer__TreeNavigation .Layer__UI__TreeItem .Layer__TreeNavigation__Check {
4819
- visibility: hidden;
4820
- height: 1rem;
4821
- min-width: 1rem;
4822
- }
4823
4984
  .Layer__TreeNavigation .Layer__UI__TreeItem[aria-level="1"] {
4824
4985
  background-color: var(--color-base-0);
4825
4986
  }
@@ -4830,7 +4991,7 @@
4830
4991
  background-color: var(--color-base-100);
4831
4992
  }
4832
4993
  .Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] {
4833
- font-weight: var(--font-weight-bold);
4994
+ background-color: var(--color-base-100);
4834
4995
  }
4835
4996
  .Layer__TreeNavigation .Layer__UI__TreeItem[data-selected]::after {
4836
4997
  content: "";
@@ -4841,9 +5002,6 @@
4841
5002
  width: 2px;
4842
5003
  background: black;
4843
5004
  }
4844
- .Layer__TreeNavigation .Layer__UI__TreeItem[data-selected] .Layer__TreeNavigation__Check {
4845
- visibility: visible;
4846
- }
4847
5005
 
4848
5006
  .Layer__TreeNavigation__Chevron {
4849
5007
  padding: 0;
@@ -4872,22 +5030,17 @@
4872
5030
  justify-content: flex-end;
4873
5031
  min-width: 15rem;
4874
5032
  max-width: 24rem;
4875
- }.Layer__ExpandButton {
4876
- height: 16px;
4877
- min-width: 16px;
4878
- }
4879
- .Layer__ExpandButton--collapsed {
4880
- transform: rotate(-90deg);
4881
- }
4882
- .Layer__ExpandButton--expanded {
4883
- transform: rotate(0deg);
4884
5033
  }.Layer__UI__Table__UnifiedReport {
5034
+ width: max-content;
4885
5035
  min-width: 100%;
5036
+ border-bottom: 1px solid var(--color-base-300);
4886
5037
  }
4887
5038
  .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column,
4888
5039
  .Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell {
4889
5040
  display: table-cell;
4890
5041
  min-width: 6rem;
5042
+ }.Layer__YearPicker {
5043
+ inline-size: 8rem;
4891
5044
  }.Layer__UnifiedReport__AdditionalControls {
4892
5045
  display: grid;
4893
5046
  gap: var(--spacing-xs);
@@ -4902,10 +5055,14 @@
4902
5055
  grid-template-columns: repeat(3, 1fr);
4903
5056
  }
4904
5057
  .Layer__UnifiedReport__AdditionalControls[data-variant=small] > *,
4905
- .Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
4906
- .Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container {
5058
+ .Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__DateGroupByComboBox__Container,
5059
+ .Layer__UnifiedReport__AdditionalControls[data-variant=small] .Layer__YearPicker, .Layer__UnifiedReport__AdditionalControls[data-variant=medium] > *,
5060
+ .Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__DateGroupByComboBox__Container,
5061
+ .Layer__UnifiedReport__AdditionalControls[data-variant=medium] .Layer__YearPicker {
4907
5062
  inline-size: 100%;
4908
5063
  max-inline-size: none;
5064
+ }.Layer__UnifiedReport__BaseHeader {
5065
+ border-bottom: 1px solid var(--border-color);
4909
5066
  }.Layer__UI__Link {
4910
5067
  position: relative;
4911
5068
  display: inline;
@@ -4966,6 +5123,7 @@
4966
5123
  border-bottom: 1px solid var(--border-color);
4967
5124
  }.Layer__view.Layer__UnifiedReport {
4968
5125
  overflow: hidden;
5126
+ max-height: 100vh;
4969
5127
  min-width: clamp(23rem, 100%, 1406px);
4970
5128
  }
4971
5129
  .Layer__view.Layer__UnifiedReport .Layer__view-main.Layer__view-main {
@@ -4975,13 +5133,19 @@
4975
5133
  width: max-content;
4976
5134
  }
4977
5135
 
5136
+ .Layer__UnifiedReport__Body {
5137
+ max-height: calc(100vh - 76px);
5138
+ }
5139
+
4978
5140
  .Layer__UnifiedReport__Sidebar {
4979
5141
  flex-shrink: 0;
4980
- width: 15rem;
5142
+ overflow-y: auto;
5143
+ width: clamp(14rem, 16vw, 24rem);
4981
5144
  border-right: 1px solid var(--color-base-300);
4982
5145
  }
4983
5146
 
4984
5147
  .Layer__UnifiedReport__Content {
5148
+ overflow-y: auto;
4985
5149
  min-width: 0;
4986
5150
  }.Layer__UI__DateTile {
4987
5151
  width: 5.5rem;
@@ -5059,8 +5223,6 @@
5059
5223
  .Layer__CallBooking__JoinAction {
5060
5224
  flex: 1 1 100%;
5061
5225
  }
5062
- }.Layer__YearPicker {
5063
- inline-size: 8rem;
5064
5226
  }.Layer__MileageDeductionChart .recharts-responsive-container {
5065
5227
  box-sizing: border-box;
5066
5228
  padding: 0;
@@ -6439,19 +6601,27 @@
6439
6601
  --button-border-color-ghost: var(--color-base-300);
6440
6602
  --button-border-color-ghost-active: var(--color-base-800);
6441
6603
  }
6442
- .Layer__component *::-webkit-scrollbar {
6604
+ .Layer__component *,
6605
+ .Layer__view * {
6606
+ scrollbar-width: thin;
6607
+ }
6608
+ .Layer__component *::-webkit-scrollbar,
6609
+ .Layer__view *::-webkit-scrollbar {
6443
6610
  height: 6px;
6444
6611
  width: 6px;
6445
6612
  }
6446
- .Layer__component *::-webkit-scrollbar-track {
6613
+ .Layer__component *::-webkit-scrollbar-track,
6614
+ .Layer__view *::-webkit-scrollbar-track {
6447
6615
  border-radius: 4px;
6448
6616
  background: #f1f1f1;
6449
6617
  }
6450
- .Layer__component *::-webkit-scrollbar-thumb {
6618
+ .Layer__component *::-webkit-scrollbar-thumb,
6619
+ .Layer__view *::-webkit-scrollbar-thumb {
6451
6620
  border-radius: 4px;
6452
6621
  background: #e2e2e2;
6453
6622
  }
6454
- .Layer__component *::-webkit-scrollbar-thumb:hover {
6623
+ .Layer__component *::-webkit-scrollbar-thumb:hover,
6624
+ .Layer__view *::-webkit-scrollbar-thumb:hover {
6455
6625
  background: #999;
6456
6626
  }
6457
6627
  /* stylelint-disable-next-line keyframes-name-pattern */
@@ -6698,9 +6868,6 @@
6698
6868
  align-items: center;
6699
6869
  color: var(--color-danger);
6700
6870
  }
6701
- .Layer__expand-collapse-all-rows-btn {
6702
- min-width: 152px;
6703
- }
6704
6871
  .Layer__btn.Layer__btn--with-tooltip {
6705
6872
  padding: 0;
6706
6873
  }
@@ -7818,7 +7985,7 @@ tbody .Layer__table__empty-row:first-child {
7818
7985
  .Layer__tasks-header__notification__button:hover {
7819
7986
  background: var(--color-base-1000);
7820
7987
  }
7821
- .Layer__tasks__badge {
7988
+ .Layer__TasksBadge {
7822
7989
  display: flex;
7823
7990
  gap: var(--spacing-3xs);
7824
7991
  align-items: center;
@@ -7829,48 +7996,34 @@ tbody .Layer__table__empty-row:first-child {
7829
7996
  color: var(--color-info-warning-bg);
7830
7997
  white-space: nowrap;
7831
7998
  }
7832
- .Layer__tasks__badge .Layer__tasks__badge__label-short {
7833
- display: none;
7834
- }
7835
- @container (width <= 130px) {
7836
- .Layer__tasks__badge .Layer__tasks__badge__label {
7837
- display: none;
7838
- }
7839
- .Layer__tasks__badge .Layer__tasks__badge__label-short {
7840
- display: flex;
7841
- }
7842
- }
7843
- .Layer__tasks__badge[data-icononly] {
7999
+ .Layer__TasksBadge[data-icononly] {
7844
8000
  gap: 0;
7845
8001
  height: 16px;
7846
8002
  width: 16px;
7847
8003
  padding: 0;
7848
8004
  border-radius: 50%;
7849
8005
  }
7850
- .Layer__tasks__badge .Layer__text {
8006
+ .Layer__TasksBadge .Layer__text {
7851
8007
  line-height: 10px;
7852
8008
  }
7853
- .Layer__tasks__badge .Layer__tasks__badge__icon-wrapper {
7854
- display: flex;
7855
- align-items: center;
7856
- justify-content: center;
8009
+ .Layer__TasksBadge .Layer__TasksBadge__Icon {
7857
8010
  height: 16px;
7858
8011
  width: 16px;
7859
8012
  border-radius: 50%;
7860
8013
  }
7861
- .Layer__tasks__badge[data-status=info] {
8014
+ .Layer__TasksBadge[data-status=info] {
7862
8015
  background: var(--color-info-bg);
7863
8016
  color: var(--color-info-fg);
7864
8017
  }
7865
- .Layer__tasks__badge[data-status=warning] {
8018
+ .Layer__TasksBadge[data-status=warning] {
7866
8019
  background: var(--color-info-warning);
7867
8020
  color: var(--color-info-warning-bg);
7868
8021
  }
7869
- .Layer__tasks__badge[data-status=success] {
8022
+ .Layer__TasksBadge[data-status=success] {
7870
8023
  background: var(--color-info-success-bg);
7871
8024
  color: var(--color-info-success-fg);
7872
8025
  }
7873
- .Layer__tasks__badge[data-status=error] {
8026
+ .Layer__TasksBadge[data-status=error] {
7874
8027
  background: var(--color-info-error-bg);
7875
8028
  color: var(--color-info-error);
7876
8029
  }
@@ -7887,16 +8040,6 @@ tbody .Layer__table__empty-row:first-child {
7887
8040
  grid-template-columns: repeat(4, 1fr);
7888
8041
  }
7889
8042
  }
7890
- @container (max-width: 400px) {
7891
- .Layer__tasks-month-selector {
7892
- grid-template-columns: repeat(2, 1fr);
7893
- }
7894
- }
7895
- @container (max-width: 340px) {
7896
- .Layer__tasks-month-selector {
7897
- grid-template-columns: repeat(1, 1fr);
7898
- }
7899
- }
7900
8043
  .Layer__tasks-month-selector__month {
7901
8044
  display: flex;
7902
8045
  flex: 1;
@@ -9287,247 +9430,6 @@ tbody .Layer__table__empty-row:first-child {
9287
9430
  .Layer__bank-transaction-mobile-list-item__categories_list {
9288
9431
  overflow-y: auto;
9289
9432
  }
9290
- .Layer__component-container.Layer__chart-of-accounts {
9291
- position: relative;
9292
- display: flex;
9293
- align-items: stretch;
9294
- overflow: hidden;
9295
- }
9296
- .Layer__chart-of-accounts__loader-container {
9297
- padding: var(--spacing-2xl);
9298
- }
9299
- .Layer__coa__actions .Layer__btn {
9300
- opacity: 0;
9301
- visibility: hidden;
9302
- transition: all 300ms ease-out;
9303
- transform: scale(0.92);
9304
- }
9305
- .Layer__table-row:hover .Layer__coa__actions .Layer__btn {
9306
- opacity: 1;
9307
- visibility: visible;
9308
- transform: scale(1);
9309
- }
9310
- .Layer__chart-of-accounts .Layer__panel {
9311
- max-width: 100%;
9312
- }
9313
- .Layer__chart-of-accounts__actions .Layer__SearchField {
9314
- width: 15rem;
9315
- }
9316
- .Layer__chart-of-accounts__table {
9317
- table-layout: fixed;
9318
- }
9319
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--accountnumber {
9320
- width: 13rem;
9321
- }
9322
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--name {
9323
- width: auto;
9324
- min-width: 16rem;
9325
- }
9326
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--type {
9327
- width: 8rem;
9328
- }
9329
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--subtype {
9330
- width: 16rem;
9331
- }
9332
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--balance {
9333
- width: 8rem;
9334
- }
9335
- .Layer__chart-of-accounts__table .Layer__chart-of-accounts--actions {
9336
- width: 10rem;
9337
- }
9338
- .Layer__chart-of-accounts__table .Layer__table-cell-content .Layer__Span {
9339
- color: var(--text-secondary);
9340
- }
9341
- .Layer__chart-of-accounts__table .Layer__table-cell-content .Layer__mark {
9342
- background-color: #fff2cc;
9343
- }
9344
- .Layer__chart-of-accounts__sidebar__header {
9345
- display: flex;
9346
- gap: var(--spacing-md);
9347
- align-items: flex-start;
9348
- justify-content: space-between;
9349
- }
9350
- .Layer__chart-of-accounts__sidebar__header .actions {
9351
- display: flex;
9352
- gap: var(--spacing-sm);
9353
- align-items: center;
9354
- }
9355
- .Layer__chart-of-accounts__form .actions {
9356
- display: none;
9357
- gap: var(--spacing-sm);
9358
- align-items: center;
9359
- justify-content: flex-end;
9360
- padding-top: var(--spacing-xl);
9361
- }
9362
- .Layer__chart-of-accounts__form {
9363
- display: flex;
9364
- flex-direction: column;
9365
- padding: var(--spacing-xl) var(--spacing-md);
9366
- }
9367
- .Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline {
9368
- padding: var(--spacing-xs) 0;
9369
- }
9370
- .Layer__chart-of-accounts__form .Layer__input-group.Layer__input-group--inline label {
9371
- width: 140px;
9372
- min-width: 140px;
9373
- max-width: 140px;
9374
- }
9375
- .Layer__chart-of-accounts__form-edit-entry {
9376
- display: flex;
9377
- gap: var(--spacing-md);
9378
- align-items: center;
9379
- justify-content: space-between;
9380
- padding: var(--spacing-md);
9381
- }
9382
- .Layer__chart-of-accounts__form-edit-entry .Layer__text {
9383
- margin: 0;
9384
- }
9385
- .Layer__chart-of-accounts__form__error-message {
9386
- box-sizing: border-box;
9387
- width: 100%;
9388
- padding: var(--spacing-4xs) var(--spacing-xl);
9389
- text-align: right;
9390
- color: var(--color-danger);
9391
- }
9392
- .Layer__chart-of-accounts__form-row {
9393
- box-sizing: border-box;
9394
- display: flex;
9395
- gap: var(--spacing-md);
9396
- padding: var(--spacing-sm) var(--spacing-md);
9397
- border-top: 1px solid var(--border-color);
9398
- background-color: var(--color-base-100);
9399
- }
9400
- .Layer__chart-of-accounts__form-row.Layer__chart-of-accounts__form-row--depth-0 {
9401
- background-color: var(--color-base-50);
9402
- }
9403
- .Layer__chart-of-accounts__form-row .Layer__btn {
9404
- align-self: flex-start;
9405
- min-width: 120px;
9406
- }
9407
- .Layer__chart-of-accounts__row---mobile {
9408
- display: none;
9409
- visibility: hidden;
9410
- }
9411
- .Layer__chart-of-accounts__row---mobile .Layer__chart-of-accounts__mobile-row-content {
9412
- display: flex;
9413
- flex-direction: column;
9414
- gap: var(--spacing-xs);
9415
- width: 100%;
9416
- padding-top: var(--spacing-3xs);
9417
- padding-right: var(--spacing-md);
9418
- padding-bottom: var(--spacing-3xs);
9419
- }
9420
- .Layer__chart-of-accounts__mobile-row-content__top-row,
9421
- .Layer__chart-of-accounts__mobile-row-content__bottom-row {
9422
- display: flex;
9423
- align-items: center;
9424
- justify-content: space-between;
9425
- }
9426
- .Layer__chart-of-accounts__mobile-row-content__name {
9427
- color: var(--color-base-800);
9428
- }
9429
- .Layer__chart-of-accounts__mobile-row-content__balance {
9430
- font-weight: var(--font-weight-bold);
9431
- color: var(--color-base-800);
9432
- }
9433
- .Layer__chart-of-accounts__row---mobile.Layer__table-row--depth-0 .Layer__chart-of-accounts__mobile-row-content__name {
9434
- font-weight: var(--font-weight-bold);
9435
- }
9436
- .Layer__chart-of-accounts__mobile-row-content__types {
9437
- display: flex;
9438
- gap: var(--spacing-3xs);
9439
- align-items: center;
9440
- }
9441
- .Layer__chart-of-accounts__mobile-row-content__types .Layer__text {
9442
- color: var(--color-base-700);
9443
- }
9444
- .Layer__chart-of-accounts__mobile-row-content__separator {
9445
- height: 12px;
9446
- width: 1px;
9447
- background: var(--color-base-200);
9448
- }
9449
- .Layer__chart-of-accounts .Layer__desktop--hidden {
9450
- display: none;
9451
- }
9452
- .Layer__coa__type--mobile {
9453
- color: var(--color-base-800);
9454
- }
9455
- @container (min-width: 1401px) {
9456
- .Layer__chart-of-accounts .Layer__panel__sidebar .Layer__chart-of-accounts__form {
9457
- padding: var(--spacing-xl);
9458
- }
9459
- .Layer__chart-of-accounts__form-edit-entry {
9460
- padding: var(--spacing-md) var(--spacing-xl);
9461
- }
9462
- }
9463
- @container (max-width: 1024px) {
9464
- .Layer__chart-of-accounts__sidebar__header .actions {
9465
- display: none;
9466
- }
9467
- .Layer__chart-of-accounts__form .actions {
9468
- display: flex;
9469
- }
9470
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content {
9471
- width: 100%;
9472
- }
9473
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
9474
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form__input-group__title {
9475
- box-sizing: border-box;
9476
- width: 100%;
9477
- max-width: 600px;
9478
- margin: auto;
9479
- }
9480
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__chart-of-accounts__form-edit-entry {
9481
- box-sizing: border-box;
9482
- width: 100%;
9483
- max-width: calc(600px + var(--spacing-xl) * 2);
9484
- padding: var(--spacing-md) var(--spacing-xl);
9485
- margin: auto;
9486
- }
9487
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
9488
- width: 100%;
9489
- max-width: calc(600px + var(--spacing-xl) * 2);
9490
- padding: var(--spacing-md) var(--spacing-xl);
9491
- margin: auto;
9492
- }
9493
- .Layer__chart-of-accounts.Layer__component .Layer__panel__sidebar .Layer__panel__sidebar-content .actions {
9494
- width: 100%;
9495
- max-width: 600px;
9496
- margin: auto;
9497
- }
9498
- }
9499
- @container (min-width: 761px) and (max-width: 1024px) {
9500
- .Layer__chart-of-accounts .Layer__mobile--hidden {
9501
- display: none;
9502
- }
9503
- .Layer__chart-of-accounts__form {
9504
- padding: var(--spacing-xl);
9505
- }
9506
- }
9507
- @container (max-width: 760px) {
9508
- .Layer__chart-of-accounts {
9509
- overflow: auto;
9510
- }
9511
- .Layer__chart-of-accounts__row---mobile {
9512
- display: table-row;
9513
- visibility: visible;
9514
- }
9515
- .Layer__chart-of-accounts__row---desktop {
9516
- display: none;
9517
- visibility: hidden;
9518
- }
9519
- .Layer__chart-of-accounts__form-row {
9520
- flex-direction: column;
9521
- }
9522
- .Layer__chart-of-accounts__form-row .Layer__chart-of-accounts__form-row__name_field {
9523
- flex: 1;
9524
- width: 100%;
9525
- }
9526
- .Layer__chart-of-accounts__actions.Layer__header__actions {
9527
- flex-direction: column;
9528
- align-items: flex-start;
9529
- }
9530
- }
9531
9433
  .Layer__component-container.Layer__journal {
9532
9434
  position: relative;
9533
9435
  display: flex;
@@ -10760,6 +10662,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
10760
10662
  margin-top: -12px;
10761
10663
  }
10762
10664
  }
10665
+ .Layer__reports {
10666
+ overflow: hidden;
10667
+ }
10763
10668
  .Layer__reports .Layer__panel__content {
10764
10669
  border-radius: var(--border-radius-sm);
10765
10670
  }