@layerfi/components 0.1.106-alpha → 0.1.106-alpha.1
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/cjs/index.cjs +1163 -402
- package/dist/esm/index.mjs +1193 -433
- package/dist/index.css +201 -96
- package/dist/index.d.ts +1503 -186
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -77,6 +77,7 @@
|
|
|
77
77
|
"InterVariable",
|
|
78
78
|
"Inter",
|
|
79
79
|
sans-serif;
|
|
80
|
+
--text-2xs: 10px;
|
|
80
81
|
--text-xs: 11px;
|
|
81
82
|
--text-sm: 12px;
|
|
82
83
|
--text-md: 14px;
|
|
@@ -345,14 +346,18 @@
|
|
|
345
346
|
}
|
|
346
347
|
.Layer__badge.Layer__badge--small {
|
|
347
348
|
--size: 21px;
|
|
348
|
-
padding: var(--spacing-3xs) var(--spacing-xs);
|
|
349
349
|
font-size: var(--text-xs);
|
|
350
350
|
line-height: 1.1;
|
|
351
351
|
}
|
|
352
|
+
.Layer__badge.Layer__badge--xs {
|
|
353
|
+
--size: 17px;
|
|
354
|
+
font-size: var(--text-2xs);
|
|
355
|
+
line-height: 1;
|
|
356
|
+
}
|
|
352
357
|
.Layer__badge.Layer__badge--icon-only {
|
|
353
|
-
padding: 0;
|
|
354
358
|
justify-content: center;
|
|
355
359
|
min-width: var(--size);
|
|
360
|
+
padding: 0;
|
|
356
361
|
}
|
|
357
362
|
.Layer__badge.Layer__badge--clickable {
|
|
358
363
|
min-height: 21px;
|
|
@@ -1065,16 +1070,16 @@
|
|
|
1065
1070
|
}
|
|
1066
1071
|
.Layer__datepicker__wrapper > div,
|
|
1067
1072
|
#Layer__datepicker__portal > div {
|
|
1068
|
-
max-width: 100%;
|
|
1069
1073
|
width: 100%;
|
|
1074
|
+
max-width: 100%;
|
|
1070
1075
|
}
|
|
1071
1076
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button,
|
|
1072
1077
|
#Layer__datepicker__portal .Layer__datepicker__next-button {
|
|
1078
|
+
padding: 0 var(--spacing-xs);
|
|
1073
1079
|
border-top-left-radius: 0;
|
|
1074
1080
|
border-bottom-left-radius: 0;
|
|
1075
|
-
padding: 0 var(--spacing-xs);
|
|
1076
|
-
box-shadow: none;
|
|
1077
1081
|
border-left: 1px solid var(--input-border-color);
|
|
1082
|
+
box-shadow: none;
|
|
1078
1083
|
}
|
|
1079
1084
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button .Layer__btn-text,
|
|
1080
1085
|
#Layer__datepicker__portal .Layer__datepicker__next-button .Layer__btn-text {
|
|
@@ -1082,10 +1087,10 @@
|
|
|
1082
1087
|
}
|
|
1083
1088
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button,
|
|
1084
1089
|
#Layer__datepicker__portal .Layer__datepicker__prev-button {
|
|
1085
|
-
border-radius: 0;
|
|
1086
1090
|
padding: 0 var(--spacing-xs);
|
|
1087
|
-
|
|
1091
|
+
border-radius: 0;
|
|
1088
1092
|
border-left: 1px solid var(--input-border-color);
|
|
1093
|
+
box-shadow: none;
|
|
1089
1094
|
}
|
|
1090
1095
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button .Layer__btn-text,
|
|
1091
1096
|
#Layer__datepicker__portal .Layer__datepicker__prev-button .Layer__btn-text {
|
|
@@ -1093,36 +1098,36 @@
|
|
|
1093
1098
|
}
|
|
1094
1099
|
.Layer__datepicker__wrapper .Layer__datepicker__nav-arrow-highlight,
|
|
1095
1100
|
#Layer__datepicker__portal .Layer__datepicker__nav-arrow-highlight {
|
|
1096
|
-
width: 8px;
|
|
1097
|
-
height: 8px;
|
|
1098
|
-
border-radius: 50%;
|
|
1099
|
-
background-color: var(--color-info-warning);
|
|
1100
|
-
display: flex;
|
|
1101
1101
|
position: absolute;
|
|
1102
1102
|
top: -4px;
|
|
1103
1103
|
right: -5px;
|
|
1104
|
+
display: flex;
|
|
1105
|
+
height: 8px;
|
|
1106
|
+
width: 8px;
|
|
1107
|
+
border-radius: 50%;
|
|
1108
|
+
background-color: var(--color-info-warning);
|
|
1104
1109
|
}
|
|
1105
1110
|
.Layer__datepicker__wrapper .Layer__datepicker__current-button,
|
|
1106
1111
|
#Layer__datepicker__portal .Layer__datepicker__current-button {
|
|
1107
1112
|
border-top-left-radius: 0;
|
|
1108
1113
|
border-bottom-left-radius: 0;
|
|
1109
|
-
box-shadow: none;
|
|
1110
1114
|
border-left: 1px solid var(--input-border-color);
|
|
1115
|
+
box-shadow: none;
|
|
1111
1116
|
}
|
|
1112
1117
|
.Layer__datepicker__wrapper .react-datepicker__input-container input,
|
|
1113
1118
|
.Layer__datepicker__wrapper .react-datepicker__input-container button,
|
|
1114
1119
|
#Layer__datepicker__portal .react-datepicker__input-container input,
|
|
1115
1120
|
#Layer__datepicker__portal .react-datepicker__input-container button {
|
|
1116
|
-
border-radius: var(--input-border-radius);
|
|
1117
|
-
padding: 8px;
|
|
1118
1121
|
box-sizing: border-box;
|
|
1119
1122
|
position: relative;
|
|
1123
|
+
width: 13rem;
|
|
1124
|
+
padding: 8px;
|
|
1125
|
+
border-radius: var(--input-border-radius);
|
|
1120
1126
|
border: none;
|
|
1121
1127
|
margin: 1px;
|
|
1122
|
-
max-width: 170px;
|
|
1123
|
-
font-family: var(--font-family);
|
|
1124
1128
|
font-size: var(--input-font-size);
|
|
1125
1129
|
line-height: 140%;
|
|
1130
|
+
font-family: var(--font-family);
|
|
1126
1131
|
}
|
|
1127
1132
|
.Layer__datepicker__wrapper .react-datepicker__input-container input:focus,
|
|
1128
1133
|
.Layer__datepicker__wrapper .react-datepicker__input-container input:active,
|
|
@@ -1141,9 +1146,9 @@
|
|
|
1141
1146
|
}
|
|
1142
1147
|
.Layer__datepicker__wrapper .Layer__datepicker__popper,
|
|
1143
1148
|
#Layer__datepicker__portal .Layer__datepicker__popper {
|
|
1149
|
+
z-index: 105;
|
|
1144
1150
|
min-width: 275px;
|
|
1145
1151
|
max-width: 275px;
|
|
1146
|
-
z-index: 105;
|
|
1147
1152
|
border-radius: 8px;
|
|
1148
1153
|
}
|
|
1149
1154
|
.Layer__datepicker__wrapper .Layer__datepicker__popper.Layer__datepicker__time__popper,
|
|
@@ -1165,22 +1170,22 @@
|
|
|
1165
1170
|
}
|
|
1166
1171
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous,
|
|
1167
1172
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
|
|
1168
|
-
left: auto;
|
|
1169
1173
|
right: 42px;
|
|
1174
|
+
left: auto;
|
|
1170
1175
|
}
|
|
1171
1176
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
1172
1177
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before,
|
|
1173
1178
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
1174
1179
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
|
|
1175
|
-
border-color: var(--color-base-800);
|
|
1176
|
-
border-style: solid;
|
|
1177
|
-
border-width: 1px 1px 0 0;
|
|
1178
|
-
content: "";
|
|
1179
|
-
display: block;
|
|
1180
|
-
height: 6px;
|
|
1181
1180
|
position: absolute;
|
|
1182
1181
|
top: 11px;
|
|
1182
|
+
display: block;
|
|
1183
|
+
height: 6px;
|
|
1183
1184
|
width: 6px;
|
|
1185
|
+
border-width: 1px 1px 0 0;
|
|
1186
|
+
border-color: var(--color-base-800);
|
|
1187
|
+
border-style: solid;
|
|
1188
|
+
content: "";
|
|
1184
1189
|
}
|
|
1185
1190
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container,
|
|
1186
1191
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
|
|
@@ -1197,41 +1202,41 @@
|
|
|
1197
1202
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
|
|
1198
1203
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
|
|
1199
1204
|
padding: var(--spacing-sm) 0 0;
|
|
1200
|
-
background: white;
|
|
1201
1205
|
border: none;
|
|
1206
|
+
background: white;
|
|
1202
1207
|
}
|
|
1203
1208
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
1204
1209
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header,
|
|
1205
1210
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
1206
1211
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header {
|
|
1207
|
-
background-color: var(--color-base-0);
|
|
1208
1212
|
padding: var(--spacing-sm);
|
|
1209
|
-
|
|
1210
|
-
|
|
1213
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
1214
|
+
background-color: var(--color-base-0);
|
|
1215
|
+
font-size: 14px;
|
|
1211
1216
|
font-family: var(--font-family);
|
|
1217
|
+
font-weight: 460;
|
|
1218
|
+
text-align: left;
|
|
1212
1219
|
font-feature-settings:
|
|
1213
1220
|
"cv10" on,
|
|
1214
1221
|
"cv05" on,
|
|
1215
1222
|
"cv08" on,
|
|
1216
1223
|
"ss03" on;
|
|
1217
|
-
font-size: 14px;
|
|
1218
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
1219
1224
|
}
|
|
1220
1225
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
1221
1226
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month,
|
|
1222
1227
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
1223
1228
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
|
|
1224
1229
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
1225
|
-
|
|
1226
|
-
font-
|
|
1230
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
1231
|
+
font-size: 14px;
|
|
1227
1232
|
font-family: var(--font-family);
|
|
1233
|
+
font-weight: 460;
|
|
1234
|
+
text-align: left;
|
|
1228
1235
|
font-feature-settings:
|
|
1229
1236
|
"cv10" on,
|
|
1230
1237
|
"cv05" on,
|
|
1231
1238
|
"cv08" on,
|
|
1232
1239
|
"ss03" on;
|
|
1233
|
-
font-size: 14px;
|
|
1234
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
1235
1240
|
}
|
|
1236
1241
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names,
|
|
1237
1242
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
|
|
@@ -1239,11 +1244,11 @@
|
|
|
1239
1244
|
}
|
|
1240
1245
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name,
|
|
1241
1246
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
|
|
1242
|
-
width: 32px;
|
|
1243
1247
|
height: 32px;
|
|
1244
|
-
|
|
1248
|
+
width: 32px;
|
|
1245
1249
|
font-size: 12px;
|
|
1246
1250
|
line-height: 1.7rem;
|
|
1251
|
+
color: var(--color-base-500);
|
|
1247
1252
|
}
|
|
1248
1253
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
|
|
1249
1254
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper,
|
|
@@ -1488,8 +1493,8 @@
|
|
|
1488
1493
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__day--disabled,
|
|
1489
1494
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--disabled,
|
|
1490
1495
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--disabled {
|
|
1491
|
-
color: var(--color-base-300);
|
|
1492
1496
|
cursor: not-allowed;
|
|
1497
|
+
color: var(--color-base-300);
|
|
1493
1498
|
}
|
|
1494
1499
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
|
|
1495
1500
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
|
|
@@ -1677,8 +1682,8 @@
|
|
|
1677
1682
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--selected,
|
|
1678
1683
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--selected {
|
|
1679
1684
|
background-color: var(--color-base-800);
|
|
1680
|
-
color: var(--color-base-100);
|
|
1681
1685
|
font-weight: 460;
|
|
1686
|
+
color: var(--color-base-100);
|
|
1682
1687
|
}
|
|
1683
1688
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
|
|
1684
1689
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
|
|
@@ -2130,8 +2135,8 @@
|
|
|
2130
2135
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
|
|
2131
2136
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
|
|
2132
2137
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
|
|
2133
|
-
width: 32px;
|
|
2134
2138
|
height: 32px;
|
|
2139
|
+
width: 32px;
|
|
2135
2140
|
}
|
|
2136
2141
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
|
|
2137
2142
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
|
|
@@ -2157,36 +2162,36 @@
|
|
|
2157
2162
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
|
|
2158
2163
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
|
|
2159
2164
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
|
|
2160
|
-
width: 100%;
|
|
2161
2165
|
height: 32px;
|
|
2166
|
+
width: 100%;
|
|
2162
2167
|
}
|
|
2163
2168
|
.Layer__datepicker__wrapper .react-datepicker__children-container,
|
|
2164
2169
|
#Layer__datepicker__portal .react-datepicker__children-container {
|
|
2165
2170
|
width: 100%;
|
|
2166
|
-
margin: 0;
|
|
2167
2171
|
padding: 0;
|
|
2172
|
+
margin: 0;
|
|
2168
2173
|
}
|
|
2169
2174
|
.Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer,
|
|
2170
2175
|
#Layer__datepicker__portal .Layer__datepicker__popper__custom-footer {
|
|
2171
2176
|
display: flex;
|
|
2172
2177
|
flex-direction: column;
|
|
2173
|
-
justify-content: flex-start;
|
|
2174
2178
|
align-items: flex-start;
|
|
2179
|
+
justify-content: flex-start;
|
|
2175
2180
|
padding: var(--spacing-md) var(--spacing-xs);
|
|
2176
2181
|
border-top: 1px solid var(--color-base-200);
|
|
2177
2182
|
}
|
|
2178
2183
|
.Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn,
|
|
2179
2184
|
#Layer__datepicker__portal .Layer__datepicker__popper__custom-footer .Layer__text-btn {
|
|
2180
2185
|
padding: var(--spacing-xs) var(--spacing-xs);
|
|
2181
|
-
color: var(--color-base-800);
|
|
2182
2186
|
font-weight: 460;
|
|
2187
|
+
color: var(--color-base-800);
|
|
2183
2188
|
text-decoration: none;
|
|
2184
2189
|
}
|
|
2185
2190
|
.Layer__datepicker__wrapper .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
|
|
2186
2191
|
#Layer__datepicker__portal .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
|
|
2187
2192
|
background-color: var(--color-base-800);
|
|
2188
|
-
color: var(--color-base-100);
|
|
2189
2193
|
font-weight: 460;
|
|
2194
|
+
color: var(--color-base-100);
|
|
2190
2195
|
}
|
|
2191
2196
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item,
|
|
2192
2197
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
|
|
@@ -2203,14 +2208,14 @@
|
|
|
2203
2208
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected,
|
|
2204
2209
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
|
|
2205
2210
|
background-color: var(--color-base-800);
|
|
2206
|
-
color: var(--color-base-100);
|
|
2207
2211
|
font-weight: 460;
|
|
2212
|
+
color: var(--color-base-100);
|
|
2208
2213
|
}
|
|
2209
2214
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header,
|
|
2210
2215
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
|
|
2211
2216
|
padding: var(--spacing-sm) 0 0;
|
|
2212
|
-
background: white;
|
|
2213
2217
|
border: none;
|
|
2218
|
+
background: white;
|
|
2214
2219
|
}
|
|
2215
2220
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only,
|
|
2216
2221
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only {
|
|
@@ -2220,16 +2225,16 @@
|
|
|
2220
2225
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
|
|
2221
2226
|
display: none;
|
|
2222
2227
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
2223
|
-
|
|
2224
|
-
font-
|
|
2228
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2229
|
+
font-size: 14px;
|
|
2225
2230
|
font-family: var(--font-family);
|
|
2231
|
+
font-weight: 460;
|
|
2232
|
+
text-align: left;
|
|
2226
2233
|
font-feature-settings:
|
|
2227
2234
|
"cv10" on,
|
|
2228
2235
|
"cv05" on,
|
|
2229
2236
|
"cv08" on,
|
|
2230
2237
|
"ss03" on;
|
|
2231
|
-
font-size: 14px;
|
|
2232
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2233
2238
|
}
|
|
2234
2239
|
.Layer__datepicker__time__wrapper {
|
|
2235
2240
|
max-width: 98px;
|
|
@@ -2265,23 +2270,23 @@
|
|
|
2265
2270
|
box-shadow: none;
|
|
2266
2271
|
}
|
|
2267
2272
|
.Layer__datepicker__wrapper.Layer__datepicker__wrapper--arrows .react-datepicker__input-container input {
|
|
2268
|
-
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2269
|
-
border-radius: 8px;
|
|
2270
|
-
margin-right: 8px;
|
|
2271
2273
|
max-width: 90px;
|
|
2274
|
+
border-radius: 8px;
|
|
2272
2275
|
border-top-right-radius: 8px;
|
|
2273
2276
|
border-bottom-right-radius: 8px;
|
|
2277
|
+
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2278
|
+
margin-right: 8px;
|
|
2274
2279
|
}
|
|
2275
2280
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button {
|
|
2276
|
-
border-radius: 8px;
|
|
2277
2281
|
padding: 0 var(--spacing-xs);
|
|
2282
|
+
border-radius: 8px;
|
|
2278
2283
|
border: none;
|
|
2279
|
-
margin-left: 8px;
|
|
2280
2284
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2285
|
+
margin-left: 8px;
|
|
2281
2286
|
}
|
|
2282
2287
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button {
|
|
2283
|
-
border-radius: 8px;
|
|
2284
2288
|
padding: 0 var(--spacing-xs);
|
|
2289
|
+
border-radius: 8px;
|
|
2285
2290
|
border: none;
|
|
2286
2291
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2287
2292
|
}
|
|
@@ -2302,8 +2307,8 @@
|
|
|
2302
2307
|
bottom: -100%;
|
|
2303
2308
|
}
|
|
2304
2309
|
#Layer__datepicker__portal .react-datepicker__portal {
|
|
2305
|
-
align-items: flex-end;
|
|
2306
2310
|
z-index: 105;
|
|
2311
|
+
align-items: flex-end;
|
|
2307
2312
|
background-color: rgba(36, 36, 36, 0);
|
|
2308
2313
|
transition: all 180ms ease-in-out;
|
|
2309
2314
|
}
|
|
@@ -2311,8 +2316,8 @@
|
|
|
2311
2316
|
outline-color: var(--color-base-800);
|
|
2312
2317
|
}
|
|
2313
2318
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
|
|
2314
|
-
border-radius: var(--spacing-md);
|
|
2315
2319
|
overflow: clip;
|
|
2320
|
+
border-radius: var(--spacing-md);
|
|
2316
2321
|
}
|
|
2317
2322
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container {
|
|
2318
2323
|
width: 100%;
|
|
@@ -2326,10 +2331,10 @@
|
|
|
2326
2331
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list {
|
|
2327
2332
|
display: flex;
|
|
2328
2333
|
flex-wrap: wrap;
|
|
2329
|
-
justify-content: space-between;
|
|
2330
2334
|
gap: var(--spacing-2xs);
|
|
2331
|
-
|
|
2335
|
+
justify-content: space-between;
|
|
2332
2336
|
width: 100%;
|
|
2337
|
+
padding: var(--spacing-md) var(--spacing-xs);
|
|
2333
2338
|
border-radius: var(--spacing-md);
|
|
2334
2339
|
}
|
|
2335
2340
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list .react-datepicker__time-list-item {
|
|
@@ -2345,86 +2350,86 @@
|
|
|
2345
2350
|
display: none;
|
|
2346
2351
|
}
|
|
2347
2352
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
|
|
2348
|
-
transition: bottom 0.2s ease-in-out;
|
|
2349
2353
|
position: relative;
|
|
2350
2354
|
bottom: -100px;
|
|
2351
|
-
margin: 0 var(--spacing-md) 32px var(--spacing-md);
|
|
2352
2355
|
width: 100%;
|
|
2353
2356
|
max-width: 414px;
|
|
2354
|
-
border: none;
|
|
2355
2357
|
border-radius: var(--spacing-md);
|
|
2358
|
+
border: none;
|
|
2356
2359
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2360
|
+
margin: 0 var(--spacing-md) 32px var(--spacing-md);
|
|
2361
|
+
transition: bottom 0.2s ease-in-out;
|
|
2357
2362
|
}
|
|
2358
2363
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous {
|
|
2359
|
-
left: auto;
|
|
2360
2364
|
right: 42px;
|
|
2365
|
+
left: auto;
|
|
2361
2366
|
}
|
|
2362
2367
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
2363
2368
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before {
|
|
2364
|
-
border-color: var(--color-base-800);
|
|
2365
|
-
border-style: solid;
|
|
2366
|
-
border-width: 1px 1px 0 0;
|
|
2367
|
-
content: "";
|
|
2368
|
-
display: block;
|
|
2369
|
-
height: 6px;
|
|
2370
2369
|
position: absolute;
|
|
2371
2370
|
top: 11px;
|
|
2371
|
+
display: block;
|
|
2372
|
+
height: 6px;
|
|
2372
2373
|
width: 6px;
|
|
2374
|
+
border-width: 1px 1px 0 0;
|
|
2375
|
+
border-color: var(--color-base-800);
|
|
2376
|
+
border-style: solid;
|
|
2377
|
+
content: "";
|
|
2373
2378
|
}
|
|
2374
2379
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container,
|
|
2375
2380
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container {
|
|
2376
|
-
min-width: 275px;
|
|
2377
2381
|
width: 100%;
|
|
2382
|
+
min-width: 275px;
|
|
2378
2383
|
max-width: 100%;
|
|
2379
2384
|
}
|
|
2380
2385
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
|
|
2381
2386
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
|
|
2382
2387
|
padding: var(--spacing-sm) 0 0;
|
|
2383
|
-
background: white;
|
|
2384
2388
|
border: none;
|
|
2389
|
+
background: white;
|
|
2385
2390
|
}
|
|
2386
2391
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
2387
2392
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header {
|
|
2388
|
-
background-color: var(--color-base-0);
|
|
2389
2393
|
padding: var(--spacing-sm);
|
|
2390
|
-
text-align: left;
|
|
2391
|
-
font-weight: 460;
|
|
2392
|
-
font-family: var(--font-family);
|
|
2393
2394
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
2395
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2396
|
+
background-color: var(--color-base-0);
|
|
2397
|
+
font-size: 14px;
|
|
2398
|
+
font-family: var(--font-family);
|
|
2399
|
+
font-weight: 460;
|
|
2400
|
+
text-align: left;
|
|
2394
2401
|
font-feature-settings:
|
|
2395
2402
|
"cv10" on,
|
|
2396
2403
|
"cv05" on,
|
|
2397
2404
|
"cv08" on,
|
|
2398
2405
|
"ss03" on;
|
|
2399
|
-
font-size: 14px;
|
|
2400
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2401
2406
|
}
|
|
2402
2407
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
2403
2408
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
|
|
2404
2409
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
2405
|
-
|
|
2406
|
-
font-
|
|
2410
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2411
|
+
font-size: 14px;
|
|
2407
2412
|
font-family: var(--font-family);
|
|
2413
|
+
font-weight: 460;
|
|
2414
|
+
text-align: left;
|
|
2408
2415
|
font-feature-settings:
|
|
2409
2416
|
"cv10" on,
|
|
2410
2417
|
"cv05" on,
|
|
2411
2418
|
"cv08" on,
|
|
2412
2419
|
"ss03" on;
|
|
2413
|
-
font-size: 14px;
|
|
2414
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2415
2420
|
}
|
|
2416
2421
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names {
|
|
2417
2422
|
display: flex;
|
|
2418
|
-
justify-content: space-between;
|
|
2419
2423
|
align-items: center;
|
|
2424
|
+
justify-content: space-between;
|
|
2420
2425
|
padding: var(--spacing-xs) var(--spacing-xs) 0;
|
|
2421
2426
|
}
|
|
2422
2427
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
|
|
2423
|
-
width: 100%;
|
|
2424
2428
|
height: 32px;
|
|
2425
|
-
|
|
2429
|
+
width: 100%;
|
|
2426
2430
|
font-size: 12px;
|
|
2427
2431
|
line-height: 1.7rem;
|
|
2432
|
+
color: var(--color-base-500);
|
|
2428
2433
|
}
|
|
2429
2434
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month,
|
|
2430
2435
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year {
|
|
@@ -2559,8 +2564,8 @@
|
|
|
2559
2564
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__day--disabled,
|
|
2560
2565
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--disabled,
|
|
2561
2566
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--disabled {
|
|
2562
|
-
color: var(--color-base-300);
|
|
2563
2567
|
cursor: not-allowed;
|
|
2568
|
+
color: var(--color-base-300);
|
|
2564
2569
|
}
|
|
2565
2570
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
|
|
2566
2571
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__month-text--keyboard-selected,
|
|
@@ -2676,8 +2681,8 @@
|
|
|
2676
2681
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__month-text--selected,
|
|
2677
2682
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text.react-datepicker__year-text--selected {
|
|
2678
2683
|
background-color: var(--color-base-800);
|
|
2679
|
-
color: var(--color-base-100);
|
|
2680
2684
|
font-weight: 460;
|
|
2685
|
+
color: var(--color-base-100);
|
|
2681
2686
|
}
|
|
2682
2687
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
|
|
2683
2688
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-selecting-range,
|
|
@@ -2907,8 +2912,8 @@
|
|
|
2907
2912
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
|
|
2908
2913
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
|
|
2909
2914
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
|
|
2910
|
-
width: 100%;
|
|
2911
2915
|
height: 32px;
|
|
2916
|
+
width: 100%;
|
|
2912
2917
|
}
|
|
2913
2918
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
|
|
2914
2919
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
|
|
@@ -2922,8 +2927,8 @@
|
|
|
2922
2927
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
|
|
2923
2928
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
|
|
2924
2929
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
|
|
2925
|
-
width: 100%;
|
|
2926
2930
|
height: 32px;
|
|
2931
|
+
width: 100%;
|
|
2927
2932
|
}
|
|
2928
2933
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__year-wrapper,
|
|
2929
2934
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper {
|
|
@@ -2932,8 +2937,8 @@
|
|
|
2932
2937
|
}
|
|
2933
2938
|
@media screen and (width <= 500px) {
|
|
2934
2939
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
|
|
2935
|
-
margin: 0;
|
|
2936
2940
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
2941
|
+
margin: 0;
|
|
2937
2942
|
}
|
|
2938
2943
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
|
|
2939
2944
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
@@ -2944,9 +2949,9 @@
|
|
|
2944
2949
|
}
|
|
2945
2950
|
@media screen and (resolution >= 2dppx) {
|
|
2946
2951
|
.Layer__component .react-datepicker__input-container input {
|
|
2947
|
-
font-size: 16px;
|
|
2948
2952
|
min-height: 36px;
|
|
2949
2953
|
max-height: 36px;
|
|
2954
|
+
font-size: 16px;
|
|
2950
2955
|
}
|
|
2951
2956
|
}
|
|
2952
2957
|
.Layer__datepicker__year-content {
|
|
@@ -2954,12 +2959,12 @@
|
|
|
2954
2959
|
}
|
|
2955
2960
|
.Layer__datepicker__date-dot {
|
|
2956
2961
|
position: absolute;
|
|
2957
|
-
|
|
2962
|
+
top: 50%;
|
|
2963
|
+
right: -16px;
|
|
2958
2964
|
height: 8px;
|
|
2965
|
+
width: 8px;
|
|
2959
2966
|
border-radius: 50%;
|
|
2960
2967
|
background-color: var(--color-info-warning);
|
|
2961
|
-
right: -16px;
|
|
2962
|
-
top: 50%;
|
|
2963
2968
|
transform: translateY(-50%);
|
|
2964
2969
|
}
|
|
2965
2970
|
.Layer__details-list {
|
|
@@ -3013,7 +3018,7 @@
|
|
|
3013
3018
|
}
|
|
3014
3019
|
.Layer__details-list-item__value {
|
|
3015
3020
|
box-sizing: border-box;
|
|
3016
|
-
|
|
3021
|
+
display: flex;
|
|
3017
3022
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
3018
3023
|
}
|
|
3019
3024
|
.Layer__file-thumb {
|
|
@@ -4774,6 +4779,25 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4774
4779
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
4775
4780
|
color: var(--text-color-secondary);
|
|
4776
4781
|
}
|
|
4782
|
+
.Layer__UI__FieldError {
|
|
4783
|
+
padding-block-start: var(--spacing-3xs);
|
|
4784
|
+
font-size: var(--text-xs);
|
|
4785
|
+
color: var(--color-danger);
|
|
4786
|
+
}
|
|
4787
|
+
.Layer__UI__TextField {
|
|
4788
|
+
display: grid;
|
|
4789
|
+
grid-template-areas: "label" "input" "errorMessage";
|
|
4790
|
+
}
|
|
4791
|
+
.Layer__UI__TextField[data-inline] {
|
|
4792
|
+
grid-template-areas: "label input" ". errorMessage";
|
|
4793
|
+
align-items: center;
|
|
4794
|
+
}
|
|
4795
|
+
.Layer__UI__TextField[data-inline][data-textarea] {
|
|
4796
|
+
align-items: start;
|
|
4797
|
+
}
|
|
4798
|
+
.Layer__UI__TextField > [slot=errorMessage] {
|
|
4799
|
+
grid-area: errorMessage;
|
|
4800
|
+
}
|
|
4777
4801
|
.Layer__UI__Input {
|
|
4778
4802
|
min-inline-size: 0;
|
|
4779
4803
|
padding-inline: var(--spacing-xs);
|
|
@@ -4816,6 +4840,41 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4816
4840
|
.Layer__InputGroup[data-disabled] {
|
|
4817
4841
|
cursor: not-allowed;
|
|
4818
4842
|
}
|
|
4843
|
+
.Layer__UI__TextArea {
|
|
4844
|
+
box-sizing: border-box;
|
|
4845
|
+
min-block-size: 5rem;
|
|
4846
|
+
padding-block: var(--spacing-xs);
|
|
4847
|
+
padding-inline-start: var(--spacing-xs);
|
|
4848
|
+
padding-inline-end: var(--spacing-3xs);
|
|
4849
|
+
border-radius: var(--input-border-radius);
|
|
4850
|
+
border: 1px solid var(--color-base-300);
|
|
4851
|
+
background-color: var(--color-base-0);
|
|
4852
|
+
font-size: var(--input-font-size);
|
|
4853
|
+
line-height: 140%;
|
|
4854
|
+
font-family: var(--font-family);
|
|
4855
|
+
}
|
|
4856
|
+
.Layer__UI__TextArea::-webkit-scrollbar-track {
|
|
4857
|
+
margin-block: 2px;
|
|
4858
|
+
}
|
|
4859
|
+
.Layer__UI__TextArea[data-resize=both] {
|
|
4860
|
+
resize: both;
|
|
4861
|
+
}
|
|
4862
|
+
.Layer__UI__TextArea[data-resize=horizontal] {
|
|
4863
|
+
resize: horizontal;
|
|
4864
|
+
}
|
|
4865
|
+
.Layer__UI__TextArea[data-resize=vertical] {
|
|
4866
|
+
resize: vertical;
|
|
4867
|
+
}
|
|
4868
|
+
.Layer__UI__TextArea[data-resize=none] {
|
|
4869
|
+
resize: none;
|
|
4870
|
+
}
|
|
4871
|
+
.Layer__UI__TextArea[data-focused] {
|
|
4872
|
+
border-color: var(--color-base-800);
|
|
4873
|
+
outline: 2px solid var(--outline-default);
|
|
4874
|
+
}
|
|
4875
|
+
.Layer__UI__TextArea[data-disabled] {
|
|
4876
|
+
cursor: not-allowed;
|
|
4877
|
+
}
|
|
4819
4878
|
.Layer__ListBox {
|
|
4820
4879
|
display: flex;
|
|
4821
4880
|
flex-direction: column;
|
|
@@ -6020,6 +6079,15 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
6020
6079
|
background: var(--color-base-0);
|
|
6021
6080
|
color: var(--color-base-200);
|
|
6022
6081
|
}
|
|
6082
|
+
.Layer__BaseDetailView {
|
|
6083
|
+
overflow: hidden;
|
|
6084
|
+
}
|
|
6085
|
+
.Layer__BaseDetailView__Header {
|
|
6086
|
+
align-items: center;
|
|
6087
|
+
height: 4.75rem;
|
|
6088
|
+
padding-left: 1.25rem;
|
|
6089
|
+
border-bottom: 1px solid var(--border-color);
|
|
6090
|
+
}
|
|
6023
6091
|
.Layer__bills__view .Layer__bills__main-datepicker input {
|
|
6024
6092
|
min-width: 180px;
|
|
6025
6093
|
}
|
|
@@ -6650,6 +6718,33 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
6650
6718
|
.Layer__InvoicesTable__StatusFilter {
|
|
6651
6719
|
width: 11rem;
|
|
6652
6720
|
}
|
|
6721
|
+
.Layer__InvoiceDetail__SubHeader {
|
|
6722
|
+
align-items: center;
|
|
6723
|
+
height: 5.5rem;
|
|
6724
|
+
padding-left: 2.25rem;
|
|
6725
|
+
border-bottom: 1px solid var(--border-color);
|
|
6726
|
+
}
|
|
6727
|
+
.Layer__InvoiceForm {
|
|
6728
|
+
min-width: 32rem;
|
|
6729
|
+
}
|
|
6730
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Customer,
|
|
6731
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Email,
|
|
6732
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Address {
|
|
6733
|
+
grid-template-columns: 8rem 24rem;
|
|
6734
|
+
}
|
|
6735
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__LineItem {
|
|
6736
|
+
display: grid;
|
|
6737
|
+
grid-template-columns: minmax(10rem, 1.5fr) minmax(12rem, 2fr) minmax(5rem, 0.75fr) minmax(5rem, 0.75fr) minmax(5rem, 0.75fr) auto;
|
|
6738
|
+
width: 100%;
|
|
6739
|
+
min-width: 40rem;
|
|
6740
|
+
}
|
|
6741
|
+
.Layer__InvoiceForm__Metadata {
|
|
6742
|
+
padding: var(--spacing-lg) var(--spacing-2xl);
|
|
6743
|
+
}
|
|
6744
|
+
.Layer__InvoiceForm__LineItems {
|
|
6745
|
+
padding: var(--spacing-lg) var(--spacing-2xl);
|
|
6746
|
+
background-color: var(--color-base-50);
|
|
6747
|
+
}
|
|
6653
6748
|
.Layer__DataTableHeader__Filters {
|
|
6654
6749
|
height: 4.25rem;
|
|
6655
6750
|
border-bottom: 1px solid var(--border-color);
|
|
@@ -7788,6 +7883,16 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
7788
7883
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
7789
7884
|
gap: var(--spacing-xs);
|
|
7790
7885
|
}
|
|
7886
|
+
.Layer__CustomerSelector {
|
|
7887
|
+
display: grid;
|
|
7888
|
+
grid-template-areas: "label" "input";
|
|
7889
|
+
gap: var(--spacing-3xs);
|
|
7890
|
+
}
|
|
7891
|
+
.Layer__CustomerSelector--inline {
|
|
7892
|
+
grid-template-areas: "label input";
|
|
7893
|
+
gap: 0;
|
|
7894
|
+
align-items: center;
|
|
7895
|
+
}
|
|
7791
7896
|
.Layer__Public,
|
|
7792
7897
|
.Layer__Public::before,
|
|
7793
7898
|
.Layer__Public::after,
|