@layerfi/components 0.1.106-alpha → 0.1.106
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 +1214 -402
- package/dist/esm/index.mjs +1244 -433
- package/dist/index.css +253 -133
- package/dist/index.d.ts +1563 -187
- 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;
|
|
@@ -192,18 +193,6 @@
|
|
|
192
193
|
--button-fg-ghost: var(--color-base-800);
|
|
193
194
|
--button-border-color-ghost: var(--color-base-300);
|
|
194
195
|
--button-border-color-ghost-active: var(--color-base-800);
|
|
195
|
-
--checkbox-bg: var(--bg-subtle);
|
|
196
|
-
--checkbox-size: 16px;
|
|
197
|
-
--checkbox-radius: var(--border-radius-3xs);
|
|
198
|
-
--checkbox-border-color: var(--color-base-300);
|
|
199
|
-
--checkbox-color-selected: var(--bg-default);
|
|
200
|
-
--checkbox-bg-selected: var(--fg-default);
|
|
201
|
-
--checkbox-border-color-selected: var(--fg-default);
|
|
202
|
-
--checkbox-bg-disabled: var(--color-base-200);
|
|
203
|
-
--checkbox-size-lg: 24px;
|
|
204
|
-
--checkbox-radius-lg: var(--border-radius-2xs);
|
|
205
|
-
--checkbox-bg-success-selected: var(--color-info-success);
|
|
206
|
-
--checkbox-border-color-success-selected: var(--color-info-success);
|
|
207
196
|
}
|
|
208
197
|
.Layer__component *::-webkit-scrollbar {
|
|
209
198
|
width: 6px;
|
|
@@ -345,14 +334,18 @@
|
|
|
345
334
|
}
|
|
346
335
|
.Layer__badge.Layer__badge--small {
|
|
347
336
|
--size: 21px;
|
|
348
|
-
padding: var(--spacing-3xs) var(--spacing-xs);
|
|
349
337
|
font-size: var(--text-xs);
|
|
350
338
|
line-height: 1.1;
|
|
351
339
|
}
|
|
340
|
+
.Layer__badge.Layer__badge--xs {
|
|
341
|
+
--size: 17px;
|
|
342
|
+
font-size: var(--text-2xs);
|
|
343
|
+
line-height: 1;
|
|
344
|
+
}
|
|
352
345
|
.Layer__badge.Layer__badge--icon-only {
|
|
353
|
-
padding: 0;
|
|
354
346
|
justify-content: center;
|
|
355
347
|
min-width: var(--size);
|
|
348
|
+
padding: 0;
|
|
356
349
|
}
|
|
357
350
|
.Layer__badge.Layer__badge--clickable {
|
|
358
351
|
min-height: 21px;
|
|
@@ -1065,16 +1058,16 @@
|
|
|
1065
1058
|
}
|
|
1066
1059
|
.Layer__datepicker__wrapper > div,
|
|
1067
1060
|
#Layer__datepicker__portal > div {
|
|
1068
|
-
max-width: 100%;
|
|
1069
1061
|
width: 100%;
|
|
1062
|
+
max-width: 100%;
|
|
1070
1063
|
}
|
|
1071
1064
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button,
|
|
1072
1065
|
#Layer__datepicker__portal .Layer__datepicker__next-button {
|
|
1066
|
+
padding: 0 var(--spacing-xs);
|
|
1073
1067
|
border-top-left-radius: 0;
|
|
1074
1068
|
border-bottom-left-radius: 0;
|
|
1075
|
-
padding: 0 var(--spacing-xs);
|
|
1076
|
-
box-shadow: none;
|
|
1077
1069
|
border-left: 1px solid var(--input-border-color);
|
|
1070
|
+
box-shadow: none;
|
|
1078
1071
|
}
|
|
1079
1072
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button .Layer__btn-text,
|
|
1080
1073
|
#Layer__datepicker__portal .Layer__datepicker__next-button .Layer__btn-text {
|
|
@@ -1082,10 +1075,10 @@
|
|
|
1082
1075
|
}
|
|
1083
1076
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button,
|
|
1084
1077
|
#Layer__datepicker__portal .Layer__datepicker__prev-button {
|
|
1085
|
-
border-radius: 0;
|
|
1086
1078
|
padding: 0 var(--spacing-xs);
|
|
1087
|
-
|
|
1079
|
+
border-radius: 0;
|
|
1088
1080
|
border-left: 1px solid var(--input-border-color);
|
|
1081
|
+
box-shadow: none;
|
|
1089
1082
|
}
|
|
1090
1083
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button .Layer__btn-text,
|
|
1091
1084
|
#Layer__datepicker__portal .Layer__datepicker__prev-button .Layer__btn-text {
|
|
@@ -1093,36 +1086,36 @@
|
|
|
1093
1086
|
}
|
|
1094
1087
|
.Layer__datepicker__wrapper .Layer__datepicker__nav-arrow-highlight,
|
|
1095
1088
|
#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
1089
|
position: absolute;
|
|
1102
1090
|
top: -4px;
|
|
1103
1091
|
right: -5px;
|
|
1092
|
+
display: flex;
|
|
1093
|
+
height: 8px;
|
|
1094
|
+
width: 8px;
|
|
1095
|
+
border-radius: 50%;
|
|
1096
|
+
background-color: var(--color-info-warning);
|
|
1104
1097
|
}
|
|
1105
1098
|
.Layer__datepicker__wrapper .Layer__datepicker__current-button,
|
|
1106
1099
|
#Layer__datepicker__portal .Layer__datepicker__current-button {
|
|
1107
1100
|
border-top-left-radius: 0;
|
|
1108
1101
|
border-bottom-left-radius: 0;
|
|
1109
|
-
box-shadow: none;
|
|
1110
1102
|
border-left: 1px solid var(--input-border-color);
|
|
1103
|
+
box-shadow: none;
|
|
1111
1104
|
}
|
|
1112
1105
|
.Layer__datepicker__wrapper .react-datepicker__input-container input,
|
|
1113
1106
|
.Layer__datepicker__wrapper .react-datepicker__input-container button,
|
|
1114
1107
|
#Layer__datepicker__portal .react-datepicker__input-container input,
|
|
1115
1108
|
#Layer__datepicker__portal .react-datepicker__input-container button {
|
|
1116
|
-
border-radius: var(--input-border-radius);
|
|
1117
|
-
padding: 8px;
|
|
1118
1109
|
box-sizing: border-box;
|
|
1119
1110
|
position: relative;
|
|
1111
|
+
width: 13rem;
|
|
1112
|
+
padding: 8px;
|
|
1113
|
+
border-radius: var(--input-border-radius);
|
|
1120
1114
|
border: none;
|
|
1121
1115
|
margin: 1px;
|
|
1122
|
-
max-width: 170px;
|
|
1123
|
-
font-family: var(--font-family);
|
|
1124
1116
|
font-size: var(--input-font-size);
|
|
1125
1117
|
line-height: 140%;
|
|
1118
|
+
font-family: var(--font-family);
|
|
1126
1119
|
}
|
|
1127
1120
|
.Layer__datepicker__wrapper .react-datepicker__input-container input:focus,
|
|
1128
1121
|
.Layer__datepicker__wrapper .react-datepicker__input-container input:active,
|
|
@@ -1141,9 +1134,9 @@
|
|
|
1141
1134
|
}
|
|
1142
1135
|
.Layer__datepicker__wrapper .Layer__datepicker__popper,
|
|
1143
1136
|
#Layer__datepicker__portal .Layer__datepicker__popper {
|
|
1137
|
+
z-index: 105;
|
|
1144
1138
|
min-width: 275px;
|
|
1145
1139
|
max-width: 275px;
|
|
1146
|
-
z-index: 105;
|
|
1147
1140
|
border-radius: 8px;
|
|
1148
1141
|
}
|
|
1149
1142
|
.Layer__datepicker__wrapper .Layer__datepicker__popper.Layer__datepicker__time__popper,
|
|
@@ -1165,22 +1158,22 @@
|
|
|
1165
1158
|
}
|
|
1166
1159
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous,
|
|
1167
1160
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous {
|
|
1168
|
-
left: auto;
|
|
1169
1161
|
right: 42px;
|
|
1162
|
+
left: auto;
|
|
1170
1163
|
}
|
|
1171
1164
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
1172
1165
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--next .react-datepicker__navigation-icon::before,
|
|
1173
1166
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
1174
1167
|
#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
1168
|
position: absolute;
|
|
1182
1169
|
top: 11px;
|
|
1170
|
+
display: block;
|
|
1171
|
+
height: 6px;
|
|
1183
1172
|
width: 6px;
|
|
1173
|
+
border-width: 1px 1px 0 0;
|
|
1174
|
+
border-color: var(--color-base-800);
|
|
1175
|
+
border-style: solid;
|
|
1176
|
+
content: "";
|
|
1184
1177
|
}
|
|
1185
1178
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container,
|
|
1186
1179
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container {
|
|
@@ -1197,41 +1190,41 @@
|
|
|
1197
1190
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
|
|
1198
1191
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
|
|
1199
1192
|
padding: var(--spacing-sm) 0 0;
|
|
1200
|
-
background: white;
|
|
1201
1193
|
border: none;
|
|
1194
|
+
background: white;
|
|
1202
1195
|
}
|
|
1203
1196
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
1204
1197
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker-year-header,
|
|
1205
1198
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
1206
1199
|
#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
1200
|
padding: var(--spacing-sm);
|
|
1209
|
-
|
|
1210
|
-
|
|
1201
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
1202
|
+
background-color: var(--color-base-0);
|
|
1203
|
+
font-size: 14px;
|
|
1211
1204
|
font-family: var(--font-family);
|
|
1205
|
+
font-weight: 460;
|
|
1206
|
+
text-align: left;
|
|
1212
1207
|
font-feature-settings:
|
|
1213
1208
|
"cv10" on,
|
|
1214
1209
|
"cv05" on,
|
|
1215
1210
|
"cv08" on,
|
|
1216
1211
|
"ss03" on;
|
|
1217
|
-
font-size: 14px;
|
|
1218
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
1219
1212
|
}
|
|
1220
1213
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
1221
1214
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month,
|
|
1222
1215
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
1223
1216
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
|
|
1224
1217
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
1225
|
-
|
|
1226
|
-
font-
|
|
1218
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
1219
|
+
font-size: 14px;
|
|
1227
1220
|
font-family: var(--font-family);
|
|
1221
|
+
font-weight: 460;
|
|
1222
|
+
text-align: left;
|
|
1228
1223
|
font-feature-settings:
|
|
1229
1224
|
"cv10" on,
|
|
1230
1225
|
"cv05" on,
|
|
1231
1226
|
"cv08" on,
|
|
1232
1227
|
"ss03" on;
|
|
1233
|
-
font-size: 14px;
|
|
1234
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
1235
1228
|
}
|
|
1236
1229
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names,
|
|
1237
1230
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names {
|
|
@@ -1239,11 +1232,11 @@
|
|
|
1239
1232
|
}
|
|
1240
1233
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name,
|
|
1241
1234
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
|
|
1242
|
-
width: 32px;
|
|
1243
1235
|
height: 32px;
|
|
1244
|
-
|
|
1236
|
+
width: 32px;
|
|
1245
1237
|
font-size: 12px;
|
|
1246
1238
|
line-height: 1.7rem;
|
|
1239
|
+
color: var(--color-base-500);
|
|
1247
1240
|
}
|
|
1248
1241
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week,
|
|
1249
1242
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__month-wrapper,
|
|
@@ -1488,8 +1481,8 @@
|
|
|
1488
1481
|
#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
1482
|
#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
1483
|
#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
1484
|
cursor: not-allowed;
|
|
1485
|
+
color: var(--color-base-300);
|
|
1493
1486
|
}
|
|
1494
1487
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
|
|
1495
1488
|
.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 +1670,8 @@
|
|
|
1677
1670
|
#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
1671
|
#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
1672
|
background-color: var(--color-base-800);
|
|
1680
|
-
color: var(--color-base-100);
|
|
1681
1673
|
font-weight: 460;
|
|
1674
|
+
color: var(--color-base-100);
|
|
1682
1675
|
}
|
|
1683
1676
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
|
|
1684
1677
|
.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 +2123,8 @@
|
|
|
2130
2123
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
|
|
2131
2124
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
|
|
2132
2125
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
|
|
2133
|
-
width: 32px;
|
|
2134
2126
|
height: 32px;
|
|
2127
|
+
width: 32px;
|
|
2135
2128
|
}
|
|
2136
2129
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
|
|
2137
2130
|
.Layer__datepicker__wrapper .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
|
|
@@ -2157,36 +2150,36 @@
|
|
|
2157
2150
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
|
|
2158
2151
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
|
|
2159
2152
|
#Layer__datepicker__portal .Layer__datepicker__popper .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
|
|
2160
|
-
width: 100%;
|
|
2161
2153
|
height: 32px;
|
|
2154
|
+
width: 100%;
|
|
2162
2155
|
}
|
|
2163
2156
|
.Layer__datepicker__wrapper .react-datepicker__children-container,
|
|
2164
2157
|
#Layer__datepicker__portal .react-datepicker__children-container {
|
|
2165
2158
|
width: 100%;
|
|
2166
|
-
margin: 0;
|
|
2167
2159
|
padding: 0;
|
|
2160
|
+
margin: 0;
|
|
2168
2161
|
}
|
|
2169
2162
|
.Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer,
|
|
2170
2163
|
#Layer__datepicker__portal .Layer__datepicker__popper__custom-footer {
|
|
2171
2164
|
display: flex;
|
|
2172
2165
|
flex-direction: column;
|
|
2173
|
-
justify-content: flex-start;
|
|
2174
2166
|
align-items: flex-start;
|
|
2167
|
+
justify-content: flex-start;
|
|
2175
2168
|
padding: var(--spacing-md) var(--spacing-xs);
|
|
2176
2169
|
border-top: 1px solid var(--color-base-200);
|
|
2177
2170
|
}
|
|
2178
2171
|
.Layer__datepicker__wrapper .Layer__datepicker__popper__custom-footer .Layer__text-btn,
|
|
2179
2172
|
#Layer__datepicker__portal .Layer__datepicker__popper__custom-footer .Layer__text-btn {
|
|
2180
2173
|
padding: var(--spacing-xs) var(--spacing-xs);
|
|
2181
|
-
color: var(--color-base-800);
|
|
2182
2174
|
font-weight: 460;
|
|
2175
|
+
color: var(--color-base-800);
|
|
2183
2176
|
text-decoration: none;
|
|
2184
2177
|
}
|
|
2185
2178
|
.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
2179
|
#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
2180
|
background-color: var(--color-base-800);
|
|
2188
|
-
color: var(--color-base-100);
|
|
2189
2181
|
font-weight: 460;
|
|
2182
|
+
color: var(--color-base-100);
|
|
2190
2183
|
}
|
|
2191
2184
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item,
|
|
2192
2185
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item {
|
|
@@ -2203,14 +2196,14 @@
|
|
|
2203
2196
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected,
|
|
2204
2197
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {
|
|
2205
2198
|
background-color: var(--color-base-800);
|
|
2206
|
-
color: var(--color-base-100);
|
|
2207
2199
|
font-weight: 460;
|
|
2200
|
+
color: var(--color-base-100);
|
|
2208
2201
|
}
|
|
2209
2202
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header,
|
|
2210
2203
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header {
|
|
2211
2204
|
padding: var(--spacing-sm) 0 0;
|
|
2212
|
-
background: white;
|
|
2213
2205
|
border: none;
|
|
2206
|
+
background: white;
|
|
2214
2207
|
}
|
|
2215
2208
|
.Layer__datepicker__wrapper .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only,
|
|
2216
2209
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header.react-datepicker__header--time--only {
|
|
@@ -2220,16 +2213,16 @@
|
|
|
2220
2213
|
#Layer__datepicker__portal .react-datepicker--time-only .react-datepicker__time-container .react-datepicker__header .react-datepicker-time__header {
|
|
2221
2214
|
display: none;
|
|
2222
2215
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
2223
|
-
|
|
2224
|
-
font-
|
|
2216
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2217
|
+
font-size: 14px;
|
|
2225
2218
|
font-family: var(--font-family);
|
|
2219
|
+
font-weight: 460;
|
|
2220
|
+
text-align: left;
|
|
2226
2221
|
font-feature-settings:
|
|
2227
2222
|
"cv10" on,
|
|
2228
2223
|
"cv05" on,
|
|
2229
2224
|
"cv08" on,
|
|
2230
2225
|
"ss03" on;
|
|
2231
|
-
font-size: 14px;
|
|
2232
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2233
2226
|
}
|
|
2234
2227
|
.Layer__datepicker__time__wrapper {
|
|
2235
2228
|
max-width: 98px;
|
|
@@ -2265,23 +2258,23 @@
|
|
|
2265
2258
|
box-shadow: none;
|
|
2266
2259
|
}
|
|
2267
2260
|
.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
2261
|
max-width: 90px;
|
|
2262
|
+
border-radius: 8px;
|
|
2272
2263
|
border-top-right-radius: 8px;
|
|
2273
2264
|
border-bottom-right-radius: 8px;
|
|
2265
|
+
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2266
|
+
margin-right: 8px;
|
|
2274
2267
|
}
|
|
2275
2268
|
.Layer__datepicker__wrapper .Layer__datepicker__next-button {
|
|
2276
|
-
border-radius: 8px;
|
|
2277
2269
|
padding: 0 var(--spacing-xs);
|
|
2270
|
+
border-radius: 8px;
|
|
2278
2271
|
border: none;
|
|
2279
|
-
margin-left: 8px;
|
|
2280
2272
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2273
|
+
margin-left: 8px;
|
|
2281
2274
|
}
|
|
2282
2275
|
.Layer__datepicker__wrapper .Layer__datepicker__prev-button {
|
|
2283
|
-
border-radius: 8px;
|
|
2284
2276
|
padding: 0 var(--spacing-xs);
|
|
2277
|
+
border-radius: 8px;
|
|
2285
2278
|
border: none;
|
|
2286
2279
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2287
2280
|
}
|
|
@@ -2302,8 +2295,8 @@
|
|
|
2302
2295
|
bottom: -100%;
|
|
2303
2296
|
}
|
|
2304
2297
|
#Layer__datepicker__portal .react-datepicker__portal {
|
|
2305
|
-
align-items: flex-end;
|
|
2306
2298
|
z-index: 105;
|
|
2299
|
+
align-items: flex-end;
|
|
2307
2300
|
background-color: rgba(36, 36, 36, 0);
|
|
2308
2301
|
transition: all 180ms ease-in-out;
|
|
2309
2302
|
}
|
|
@@ -2311,8 +2304,8 @@
|
|
|
2311
2304
|
outline-color: var(--color-base-800);
|
|
2312
2305
|
}
|
|
2313
2306
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
|
|
2314
|
-
border-radius: var(--spacing-md);
|
|
2315
2307
|
overflow: clip;
|
|
2308
|
+
border-radius: var(--spacing-md);
|
|
2316
2309
|
}
|
|
2317
2310
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container {
|
|
2318
2311
|
width: 100%;
|
|
@@ -2326,10 +2319,10 @@
|
|
|
2326
2319
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list {
|
|
2327
2320
|
display: flex;
|
|
2328
2321
|
flex-wrap: wrap;
|
|
2329
|
-
justify-content: space-between;
|
|
2330
2322
|
gap: var(--spacing-2xs);
|
|
2331
|
-
|
|
2323
|
+
justify-content: space-between;
|
|
2332
2324
|
width: 100%;
|
|
2325
|
+
padding: var(--spacing-md) var(--spacing-xs);
|
|
2333
2326
|
border-radius: var(--spacing-md);
|
|
2334
2327
|
}
|
|
2335
2328
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time-container .react-datepicker__time-list .react-datepicker__time-list-item {
|
|
@@ -2345,86 +2338,86 @@
|
|
|
2345
2338
|
display: none;
|
|
2346
2339
|
}
|
|
2347
2340
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
|
|
2348
|
-
transition: bottom 0.2s ease-in-out;
|
|
2349
2341
|
position: relative;
|
|
2350
2342
|
bottom: -100px;
|
|
2351
|
-
margin: 0 var(--spacing-md) 32px var(--spacing-md);
|
|
2352
2343
|
width: 100%;
|
|
2353
2344
|
max-width: 414px;
|
|
2354
|
-
border: none;
|
|
2355
2345
|
border-radius: var(--spacing-md);
|
|
2346
|
+
border: none;
|
|
2356
2347
|
box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
|
|
2348
|
+
margin: 0 var(--spacing-md) 32px var(--spacing-md);
|
|
2349
|
+
transition: bottom 0.2s ease-in-out;
|
|
2357
2350
|
}
|
|
2358
2351
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous {
|
|
2359
|
-
left: auto;
|
|
2360
2352
|
right: 42px;
|
|
2353
|
+
left: auto;
|
|
2361
2354
|
}
|
|
2362
2355
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__navigation--previous .react-datepicker__navigation-icon::before,
|
|
2363
2356
|
#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
2357
|
position: absolute;
|
|
2371
2358
|
top: 11px;
|
|
2359
|
+
display: block;
|
|
2360
|
+
height: 6px;
|
|
2372
2361
|
width: 6px;
|
|
2362
|
+
border-width: 1px 1px 0 0;
|
|
2363
|
+
border-color: var(--color-base-800);
|
|
2364
|
+
border-style: solid;
|
|
2365
|
+
content: "";
|
|
2373
2366
|
}
|
|
2374
2367
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container,
|
|
2375
2368
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container {
|
|
2376
|
-
min-width: 275px;
|
|
2377
2369
|
width: 100%;
|
|
2370
|
+
min-width: 275px;
|
|
2378
2371
|
max-width: 100%;
|
|
2379
2372
|
}
|
|
2380
2373
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__header,
|
|
2381
2374
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__header {
|
|
2382
2375
|
padding: var(--spacing-sm) 0 0;
|
|
2383
|
-
background: white;
|
|
2384
2376
|
border: none;
|
|
2377
|
+
background: white;
|
|
2385
2378
|
}
|
|
2386
2379
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker-year-header,
|
|
2387
2380
|
#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
2381
|
padding: var(--spacing-sm);
|
|
2390
|
-
text-align: left;
|
|
2391
|
-
font-weight: 460;
|
|
2392
|
-
font-family: var(--font-family);
|
|
2393
2382
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
2383
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2384
|
+
background-color: var(--color-base-0);
|
|
2385
|
+
font-size: 14px;
|
|
2386
|
+
font-family: var(--font-family);
|
|
2387
|
+
font-weight: 460;
|
|
2388
|
+
text-align: left;
|
|
2394
2389
|
font-feature-settings:
|
|
2395
2390
|
"cv10" on,
|
|
2396
2391
|
"cv05" on,
|
|
2397
2392
|
"cv08" on,
|
|
2398
2393
|
"ss03" on;
|
|
2399
|
-
font-size: 14px;
|
|
2400
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2401
2394
|
}
|
|
2402
2395
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month-container .react-datepicker__current-month,
|
|
2403
2396
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year--container .react-datepicker__current-month {
|
|
2404
2397
|
padding: 0 var(--spacing-md) var(--spacing-sm);
|
|
2405
|
-
|
|
2406
|
-
font-
|
|
2398
|
+
border-bottom: 1px solid var(--color-base-200);
|
|
2399
|
+
font-size: 14px;
|
|
2407
2400
|
font-family: var(--font-family);
|
|
2401
|
+
font-weight: 460;
|
|
2402
|
+
text-align: left;
|
|
2408
2403
|
font-feature-settings:
|
|
2409
2404
|
"cv10" on,
|
|
2410
2405
|
"cv05" on,
|
|
2411
2406
|
"cv08" on,
|
|
2412
2407
|
"ss03" on;
|
|
2413
|
-
font-size: 14px;
|
|
2414
|
-
border-bottom: 1px solid var(--color-base-200);
|
|
2415
2408
|
}
|
|
2416
2409
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names {
|
|
2417
2410
|
display: flex;
|
|
2418
|
-
justify-content: space-between;
|
|
2419
2411
|
align-items: center;
|
|
2412
|
+
justify-content: space-between;
|
|
2420
2413
|
padding: var(--spacing-xs) var(--spacing-xs) 0;
|
|
2421
2414
|
}
|
|
2422
2415
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__day-names .react-datepicker__day-name {
|
|
2423
|
-
width: 100%;
|
|
2424
2416
|
height: 32px;
|
|
2425
|
-
|
|
2417
|
+
width: 100%;
|
|
2426
2418
|
font-size: 12px;
|
|
2427
2419
|
line-height: 1.7rem;
|
|
2420
|
+
color: var(--color-base-500);
|
|
2428
2421
|
}
|
|
2429
2422
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month,
|
|
2430
2423
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year {
|
|
@@ -2559,8 +2552,8 @@
|
|
|
2559
2552
|
#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
2553
|
#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
2554
|
#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
2555
|
cursor: not-allowed;
|
|
2556
|
+
color: var(--color-base-300);
|
|
2564
2557
|
}
|
|
2565
2558
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--keyboard-selected,
|
|
2566
2559
|
#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 +2669,8 @@
|
|
|
2676
2669
|
#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
2670
|
#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
2671
|
background-color: var(--color-base-800);
|
|
2679
|
-
color: var(--color-base-100);
|
|
2680
2672
|
font-weight: 460;
|
|
2673
|
+
color: var(--color-base-100);
|
|
2681
2674
|
}
|
|
2682
2675
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__day.react-datepicker__day--in-range,
|
|
2683
2676
|
#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 +2900,8 @@
|
|
|
2907
2900
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__week .react-datepicker__day,
|
|
2908
2901
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__day,
|
|
2909
2902
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__day {
|
|
2910
|
-
width: 100%;
|
|
2911
2903
|
height: 32px;
|
|
2904
|
+
width: 100%;
|
|
2912
2905
|
}
|
|
2913
2906
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__month-text,
|
|
2914
2907
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__week .react-datepicker__year-text,
|
|
@@ -2922,8 +2915,8 @@
|
|
|
2922
2915
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__month-wrapper .react-datepicker__year-text,
|
|
2923
2916
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__month-text,
|
|
2924
2917
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper .react-datepicker__year-text {
|
|
2925
|
-
width: 100%;
|
|
2926
2918
|
height: 32px;
|
|
2919
|
+
width: 100%;
|
|
2927
2920
|
}
|
|
2928
2921
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__month .react-datepicker__year-wrapper,
|
|
2929
2922
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar .react-datepicker__year .react-datepicker__year-wrapper {
|
|
@@ -2932,8 +2925,8 @@
|
|
|
2932
2925
|
}
|
|
2933
2926
|
@media screen and (width <= 500px) {
|
|
2934
2927
|
#Layer__datepicker__portal .react-datepicker__portal .Layer__datepicker__calendar {
|
|
2935
|
-
margin: 0;
|
|
2936
2928
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
2929
|
+
margin: 0;
|
|
2937
2930
|
}
|
|
2938
2931
|
#Layer__datepicker__portal .react-datepicker__portal .react-datepicker__time {
|
|
2939
2932
|
border-radius: var(--spacing-md) var(--spacing-md) 0 0;
|
|
@@ -2944,9 +2937,9 @@
|
|
|
2944
2937
|
}
|
|
2945
2938
|
@media screen and (resolution >= 2dppx) {
|
|
2946
2939
|
.Layer__component .react-datepicker__input-container input {
|
|
2947
|
-
font-size: 16px;
|
|
2948
2940
|
min-height: 36px;
|
|
2949
2941
|
max-height: 36px;
|
|
2942
|
+
font-size: 16px;
|
|
2950
2943
|
}
|
|
2951
2944
|
}
|
|
2952
2945
|
.Layer__datepicker__year-content {
|
|
@@ -2954,12 +2947,12 @@
|
|
|
2954
2947
|
}
|
|
2955
2948
|
.Layer__datepicker__date-dot {
|
|
2956
2949
|
position: absolute;
|
|
2957
|
-
|
|
2950
|
+
top: 50%;
|
|
2951
|
+
right: -16px;
|
|
2958
2952
|
height: 8px;
|
|
2953
|
+
width: 8px;
|
|
2959
2954
|
border-radius: 50%;
|
|
2960
2955
|
background-color: var(--color-info-warning);
|
|
2961
|
-
right: -16px;
|
|
2962
|
-
top: 50%;
|
|
2963
2956
|
transform: translateY(-50%);
|
|
2964
2957
|
}
|
|
2965
2958
|
.Layer__details-list {
|
|
@@ -3013,7 +3006,7 @@
|
|
|
3013
3006
|
}
|
|
3014
3007
|
.Layer__details-list-item__value {
|
|
3015
3008
|
box-sizing: border-box;
|
|
3016
|
-
|
|
3009
|
+
display: flex;
|
|
3017
3010
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
3018
3011
|
}
|
|
3019
3012
|
.Layer__file-thumb {
|
|
@@ -4546,36 +4539,36 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4546
4539
|
place-self: center;
|
|
4547
4540
|
}
|
|
4548
4541
|
.Layer__Checkbox {
|
|
4542
|
+
position: relative;
|
|
4549
4543
|
display: inline-flex;
|
|
4550
4544
|
align-items: center;
|
|
4551
4545
|
cursor: pointer;
|
|
4552
|
-
position: relative;
|
|
4553
4546
|
}
|
|
4554
4547
|
.Layer__Checkbox [slot=checkbox] {
|
|
4555
|
-
|
|
4556
|
-
color: transparent;
|
|
4557
|
-
border: 2px solid var(--checkbox-border-color);
|
|
4558
|
-
border-radius: var(--checkbox-radius);
|
|
4548
|
+
box-sizing: border-box;
|
|
4559
4549
|
display: grid;
|
|
4550
|
+
height: var(--size);
|
|
4551
|
+
width: var(--size);
|
|
4552
|
+
border-radius: var(--checkbox-radius);
|
|
4553
|
+
border: 2px solid var(--outline-default);
|
|
4554
|
+
background-color: var(--color-base-50);
|
|
4555
|
+
color: transparent;
|
|
4560
4556
|
place-items: center;
|
|
4561
|
-
width: var(--checkbox-size);
|
|
4562
|
-
height: var(--checkbox-size);
|
|
4563
4557
|
transition: all 100ms ease-out;
|
|
4558
|
+
--size: 1rem;
|
|
4559
|
+
--checkbox-radius: var(--border-radius-3xs);
|
|
4564
4560
|
}
|
|
4565
|
-
.Layer__Checkbox [slot=checkbox][data-
|
|
4566
|
-
|
|
4561
|
+
.Layer__Checkbox [slot=checkbox][data-pressed] {
|
|
4562
|
+
border-color: var(--outline-active);
|
|
4567
4563
|
}
|
|
4568
4564
|
.Layer__Checkbox[data-size=lg] [slot=checkbox] {
|
|
4569
|
-
|
|
4570
|
-
|
|
4571
|
-
border-radius: var(--checkbox-radius-lg);
|
|
4572
|
-
}
|
|
4573
|
-
.Layer__Checkbox[data-size=lg] [slot=checkbox][data-hovered] {
|
|
4574
|
-
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
|
|
4565
|
+
--size: 1.5rem;
|
|
4566
|
+
--checkbox-radius: var(--border-radius-2xs);
|
|
4575
4567
|
}
|
|
4576
4568
|
.Layer__Checkbox svg {
|
|
4577
4569
|
transition: all 100ms ease-out;
|
|
4578
4570
|
}
|
|
4571
|
+
.Layer__Checkbox[data-hovered] [slot=checkbox],
|
|
4579
4572
|
.Layer__Checkbox[data-pressed] [slot=checkbox] {
|
|
4580
4573
|
border-color: var(--outline-active);
|
|
4581
4574
|
}
|
|
@@ -4584,22 +4577,27 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4584
4577
|
outline-offset: 2px;
|
|
4585
4578
|
}
|
|
4586
4579
|
.Layer__Checkbox[data-selected] [slot=checkbox] {
|
|
4587
|
-
color: var(--
|
|
4588
|
-
|
|
4589
|
-
border-color: var(--
|
|
4580
|
+
background-color: var(--fg-default);
|
|
4581
|
+
color: var(--bg-default);
|
|
4582
|
+
border-color: var(--fg-default);
|
|
4583
|
+
}
|
|
4584
|
+
.Layer__Checkbox[data-variant=success] [slot=checkbox] {
|
|
4585
|
+
background-color: var(--color-info-success);
|
|
4590
4586
|
}
|
|
4591
4587
|
.Layer__Checkbox[data-selected][data-variant=success] [slot=checkbox] {
|
|
4592
|
-
|
|
4593
|
-
|
|
4588
|
+
border-color: var(--color-info-success);
|
|
4589
|
+
}
|
|
4590
|
+
.Layer__Checkbox[data-variant=error] [slot=checkbox] {
|
|
4591
|
+
border-color: var(--color-info-error);
|
|
4592
|
+
}
|
|
4593
|
+
.Layer__Checkbox[data-selected][data-variant=error] [slot=checkbox] {
|
|
4594
|
+
background-color: var(--color-info-error);
|
|
4594
4595
|
}
|
|
4595
4596
|
.Layer__Checkbox[data-disabled] {
|
|
4596
4597
|
cursor: not-allowed;
|
|
4597
4598
|
}
|
|
4598
4599
|
.Layer__Checkbox[data-disabled] [slot=checkbox] {
|
|
4599
|
-
background-color: var(--
|
|
4600
|
-
}
|
|
4601
|
-
.Layer__Checkbox[data-disabled] [slot=checkbox][data-hovered] {
|
|
4602
|
-
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.02);
|
|
4600
|
+
background-color: var(--color-base-200);
|
|
4603
4601
|
}
|
|
4604
4602
|
.Layer__Checkbox[data-labeled] {
|
|
4605
4603
|
gap: var(--spacing-xs);
|
|
@@ -4774,6 +4772,25 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4774
4772
|
padding: var(--spacing-xs) var(--spacing-md);
|
|
4775
4773
|
color: var(--text-color-secondary);
|
|
4776
4774
|
}
|
|
4775
|
+
.Layer__UI__FieldError {
|
|
4776
|
+
padding-block-start: var(--spacing-3xs);
|
|
4777
|
+
font-size: var(--text-xs);
|
|
4778
|
+
color: var(--color-danger);
|
|
4779
|
+
}
|
|
4780
|
+
.Layer__UI__TextField {
|
|
4781
|
+
display: grid;
|
|
4782
|
+
grid-template-areas: "label" "input" "errorMessage";
|
|
4783
|
+
}
|
|
4784
|
+
.Layer__UI__TextField[data-inline] {
|
|
4785
|
+
grid-template-areas: "label input" ". errorMessage";
|
|
4786
|
+
align-items: center;
|
|
4787
|
+
}
|
|
4788
|
+
.Layer__UI__TextField[data-inline][data-textarea] {
|
|
4789
|
+
align-items: start;
|
|
4790
|
+
}
|
|
4791
|
+
.Layer__UI__TextField > [slot=errorMessage] {
|
|
4792
|
+
grid-area: errorMessage;
|
|
4793
|
+
}
|
|
4777
4794
|
.Layer__UI__Input {
|
|
4778
4795
|
min-inline-size: 0;
|
|
4779
4796
|
padding-inline: var(--spacing-xs);
|
|
@@ -4816,6 +4833,41 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
4816
4833
|
.Layer__InputGroup[data-disabled] {
|
|
4817
4834
|
cursor: not-allowed;
|
|
4818
4835
|
}
|
|
4836
|
+
.Layer__UI__TextArea {
|
|
4837
|
+
box-sizing: border-box;
|
|
4838
|
+
min-block-size: 5rem;
|
|
4839
|
+
padding-block: var(--spacing-xs);
|
|
4840
|
+
padding-inline-start: var(--spacing-xs);
|
|
4841
|
+
padding-inline-end: var(--spacing-3xs);
|
|
4842
|
+
border-radius: var(--input-border-radius);
|
|
4843
|
+
border: 1px solid var(--color-base-300);
|
|
4844
|
+
background-color: var(--color-base-0);
|
|
4845
|
+
font-size: var(--input-font-size);
|
|
4846
|
+
line-height: 140%;
|
|
4847
|
+
font-family: var(--font-family);
|
|
4848
|
+
}
|
|
4849
|
+
.Layer__UI__TextArea::-webkit-scrollbar-track {
|
|
4850
|
+
margin-block: 2px;
|
|
4851
|
+
}
|
|
4852
|
+
.Layer__UI__TextArea[data-resize=both] {
|
|
4853
|
+
resize: both;
|
|
4854
|
+
}
|
|
4855
|
+
.Layer__UI__TextArea[data-resize=horizontal] {
|
|
4856
|
+
resize: horizontal;
|
|
4857
|
+
}
|
|
4858
|
+
.Layer__UI__TextArea[data-resize=vertical] {
|
|
4859
|
+
resize: vertical;
|
|
4860
|
+
}
|
|
4861
|
+
.Layer__UI__TextArea[data-resize=none] {
|
|
4862
|
+
resize: none;
|
|
4863
|
+
}
|
|
4864
|
+
.Layer__UI__TextArea[data-focused] {
|
|
4865
|
+
border-color: var(--color-base-800);
|
|
4866
|
+
outline: 2px solid var(--outline-default);
|
|
4867
|
+
}
|
|
4868
|
+
.Layer__UI__TextArea[data-disabled] {
|
|
4869
|
+
cursor: not-allowed;
|
|
4870
|
+
}
|
|
4819
4871
|
.Layer__ListBox {
|
|
4820
4872
|
display: flex;
|
|
4821
4873
|
flex-direction: column;
|
|
@@ -6020,6 +6072,15 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
6020
6072
|
background: var(--color-base-0);
|
|
6021
6073
|
color: var(--color-base-200);
|
|
6022
6074
|
}
|
|
6075
|
+
.Layer__BaseDetailView {
|
|
6076
|
+
overflow: hidden;
|
|
6077
|
+
}
|
|
6078
|
+
.Layer__BaseDetailView__Header {
|
|
6079
|
+
align-items: center;
|
|
6080
|
+
height: 4.75rem;
|
|
6081
|
+
padding-left: 1.25rem;
|
|
6082
|
+
border-bottom: 1px solid var(--border-color);
|
|
6083
|
+
}
|
|
6023
6084
|
.Layer__bills__view .Layer__bills__main-datepicker input {
|
|
6024
6085
|
min-width: 180px;
|
|
6025
6086
|
}
|
|
@@ -6650,6 +6711,33 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
6650
6711
|
.Layer__InvoicesTable__StatusFilter {
|
|
6651
6712
|
width: 11rem;
|
|
6652
6713
|
}
|
|
6714
|
+
.Layer__InvoiceDetail__SubHeader {
|
|
6715
|
+
align-items: center;
|
|
6716
|
+
height: 5.5rem;
|
|
6717
|
+
padding-left: 2.25rem;
|
|
6718
|
+
border-bottom: 1px solid var(--border-color);
|
|
6719
|
+
}
|
|
6720
|
+
.Layer__InvoiceForm {
|
|
6721
|
+
min-width: 32rem;
|
|
6722
|
+
}
|
|
6723
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Customer,
|
|
6724
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Email,
|
|
6725
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__Field__Address {
|
|
6726
|
+
grid-template-columns: 8rem 24rem;
|
|
6727
|
+
}
|
|
6728
|
+
.Layer__InvoiceForm .Layer__InvoiceForm__LineItem {
|
|
6729
|
+
display: grid;
|
|
6730
|
+
grid-template-columns: minmax(10rem, 1.5fr) minmax(12rem, 2fr) minmax(5rem, 0.75fr) minmax(6rem, 0.75fr) minmax(6rem, 0.75fr) minmax(3rem, 0.25fr) auto;
|
|
6731
|
+
width: 100%;
|
|
6732
|
+
min-width: 45rem;
|
|
6733
|
+
}
|
|
6734
|
+
.Layer__InvoiceForm__Metadata {
|
|
6735
|
+
padding: var(--spacing-lg) var(--spacing-2xl);
|
|
6736
|
+
}
|
|
6737
|
+
.Layer__InvoiceForm__LineItems {
|
|
6738
|
+
padding: var(--spacing-lg) var(--spacing-2xl);
|
|
6739
|
+
background-color: var(--color-base-50);
|
|
6740
|
+
}
|
|
6653
6741
|
.Layer__DataTableHeader__Filters {
|
|
6654
6742
|
height: 4.25rem;
|
|
6655
6743
|
border-bottom: 1px solid var(--border-color);
|
|
@@ -7788,6 +7876,38 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
7788
7876
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
7789
7877
|
gap: var(--spacing-xs);
|
|
7790
7878
|
}
|
|
7879
|
+
.Layer__CustomerSelector {
|
|
7880
|
+
display: grid;
|
|
7881
|
+
grid-template-areas: "label" "input";
|
|
7882
|
+
gap: var(--spacing-3xs);
|
|
7883
|
+
}
|
|
7884
|
+
.Layer__CustomerSelector--inline {
|
|
7885
|
+
grid-template-areas: "label input";
|
|
7886
|
+
gap: 0;
|
|
7887
|
+
align-items: center;
|
|
7888
|
+
}
|
|
7889
|
+
.Layer__FormCheckboxField {
|
|
7890
|
+
display: grid;
|
|
7891
|
+
grid-template-areas: "label" "checkbox";
|
|
7892
|
+
justify-content: center;
|
|
7893
|
+
}
|
|
7894
|
+
.Layer__FormCheckboxField > [slot=checkbox] {
|
|
7895
|
+
grid-area: checkbox;
|
|
7896
|
+
justify-self: center;
|
|
7897
|
+
margin-block: var(--spacing-2xs);
|
|
7898
|
+
}
|
|
7899
|
+
.Layer__FormCheckboxField > [slot=label] {
|
|
7900
|
+
grid-area: label;
|
|
7901
|
+
padding-block-end: var(--spacing-3xs);
|
|
7902
|
+
}
|
|
7903
|
+
.Layer__FormCheckboxField--inline {
|
|
7904
|
+
grid-template-areas: "checkbox label";
|
|
7905
|
+
gap: var(--spacing-3xs);
|
|
7906
|
+
align-items: center;
|
|
7907
|
+
}
|
|
7908
|
+
.Layer__FormCheckboxField--inline > [slot=label] {
|
|
7909
|
+
padding-block-end: 0;
|
|
7910
|
+
}
|
|
7791
7911
|
.Layer__Public,
|
|
7792
7912
|
.Layer__Public::before,
|
|
7793
7913
|
.Layer__Public::after,
|
|
@@ -10758,7 +10878,7 @@ tbody .Layer__table__empty-row:first-child {
|
|
|
10758
10878
|
}
|
|
10759
10879
|
.Layer__panel__sidebar {
|
|
10760
10880
|
position: sticky;
|
|
10761
|
-
z-index:
|
|
10881
|
+
z-index: 10;
|
|
10762
10882
|
top: 0;
|
|
10763
10883
|
overflow-x: hidden;
|
|
10764
10884
|
height: 100%;
|