@payloadcms/ui 3.50.0-canary.5 → 3.50.0-canary.7
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/elements/DocumentControls/index.scss +9 -1
- package/dist/elements/DocumentFields/index.scss +64 -27
- package/dist/exports/client/index.js +1 -1
- package/dist/exports/client/index.js.map +2 -2
- package/dist/styles.css +1 -1
- package/dist/views/List/GroupByHeader/index.d.ts.map +1 -1
- package/dist/views/List/GroupByHeader/index.js +1 -0
- package/dist/views/List/GroupByHeader/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -187,6 +187,12 @@
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
+
&__popup {
|
|
191
|
+
[dir='rtl'] & {
|
|
192
|
+
padding-left: var(--gutter-h);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
190
196
|
&__meta {
|
|
191
197
|
width: auto;
|
|
192
198
|
gap: calc(var(--base) / 2);
|
|
@@ -216,7 +222,9 @@
|
|
|
216
222
|
}
|
|
217
223
|
|
|
218
224
|
&__controls {
|
|
219
|
-
|
|
225
|
+
[dir='ltr'] & {
|
|
226
|
+
padding-left: var(--gutter-h);
|
|
227
|
+
}
|
|
220
228
|
overflow: auto;
|
|
221
229
|
|
|
222
230
|
// do not show scrollbar because the parent container has a static height
|
|
@@ -5,33 +5,64 @@
|
|
|
5
5
|
width: 100%;
|
|
6
6
|
display: flex;
|
|
7
7
|
--doc-sidebar-width: 325px;
|
|
8
|
+
--sidebar-gutter-h-right: var(--gutter-h);
|
|
9
|
+
--sidebar-gutter-h-left: calc(var(--base) * 2);
|
|
10
|
+
--main-gutter-h-left: var(--gutter-h);
|
|
11
|
+
--main-gutter-h-right: calc(var(--base) * 2);
|
|
12
|
+
|
|
13
|
+
[dir='rtl'] &:not(&--force-sidebar-wrap) {
|
|
14
|
+
--sidebar-gutter-h-left: var(--gutter-h);
|
|
15
|
+
--sidebar-gutter-h-right: calc(var(--base) * 2);
|
|
16
|
+
--main-gutter-h-left: calc(var(--base) * 2);
|
|
17
|
+
--main-gutter-h-right: var(--gutter-h);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&--force-sidebar-wrap,
|
|
21
|
+
&:has(.document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty) {
|
|
22
|
+
--sidebar-gutter-h-left: var(--gutter-h);
|
|
23
|
+
--sidebar-gutter-h-right: var(--gutter-h);
|
|
24
|
+
--main-gutter-h-left: var(--gutter-h);
|
|
25
|
+
--main-gutter-h-right: var(--gutter-h);
|
|
26
|
+
}
|
|
8
27
|
|
|
9
28
|
&--has-sidebar {
|
|
29
|
+
--main-width: 66.66%;
|
|
30
|
+
--main-border: 1px solid var(--theme-elevation-100);
|
|
31
|
+
--main-field-margin: calc(var(--base) * -2);
|
|
32
|
+
|
|
33
|
+
&:has(
|
|
34
|
+
.document-fields__sidebar-wrap .document-fields__sidebar-fields > .render-fields:empty
|
|
35
|
+
) {
|
|
36
|
+
--main-width: 100%;
|
|
37
|
+
--main-border: none;
|
|
38
|
+
--main-field-margin: initial;
|
|
39
|
+
}
|
|
40
|
+
|
|
10
41
|
.document-fields {
|
|
11
42
|
&__main {
|
|
12
|
-
width:
|
|
43
|
+
width: var(--main-width);
|
|
13
44
|
}
|
|
14
45
|
|
|
15
46
|
&__edit {
|
|
47
|
+
padding-left: var(--main-gutter-h-left);
|
|
48
|
+
padding-right: var(--main-gutter-h-right);
|
|
16
49
|
[dir='ltr'] & {
|
|
17
50
|
top: 0;
|
|
18
51
|
right: 0;
|
|
19
|
-
border-right:
|
|
20
|
-
padding-right: calc(var(--base) * 2);
|
|
52
|
+
border-right: var(--main-border);
|
|
21
53
|
}
|
|
22
54
|
|
|
23
55
|
[dir='rtl'] & {
|
|
24
56
|
top: 0;
|
|
25
57
|
left: 0;
|
|
26
|
-
border-left:
|
|
27
|
-
padding-left: calc(var(--base) * 2);
|
|
58
|
+
border-left: var(--main-border);
|
|
28
59
|
}
|
|
29
60
|
}
|
|
30
61
|
|
|
31
62
|
&__fields {
|
|
32
63
|
& > .tabs-field,
|
|
33
64
|
& > .group-field {
|
|
34
|
-
margin-right:
|
|
65
|
+
margin-right: var(--main-field-margin);
|
|
35
66
|
}
|
|
36
67
|
}
|
|
37
68
|
}
|
|
@@ -52,12 +83,21 @@
|
|
|
52
83
|
}
|
|
53
84
|
|
|
54
85
|
&__sidebar-wrap {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
86
|
+
&:has(.document-fields__sidebar-fields > .render-fields:empty) {
|
|
87
|
+
--sidebar-wrap-width: 0;
|
|
88
|
+
--sidebar-wrap-min-width: 0;
|
|
89
|
+
--sidebar-wrap-position: initial;
|
|
90
|
+
--sidebar-wrap-top: initial;
|
|
91
|
+
--sidebar-wrap-height: initial;
|
|
92
|
+
--sidebar-wrap-flex-shrink: initial;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
position: var(--sidebar-wrap-position, sticky);
|
|
96
|
+
top: var(--sidebar-wrap-top, 0);
|
|
97
|
+
width: var(--sidebar-wrap-width, 33.33%);
|
|
98
|
+
height: var(--sidebar-wrap-height, calc(100vh - var(--doc-controls-height)));
|
|
99
|
+
min-width: var(--sidebar-wrap-min-width, var(--doc-sidebar-width));
|
|
100
|
+
flex-shrink: var(--sidebar-wrap-flex-shrink, 0);
|
|
61
101
|
}
|
|
62
102
|
|
|
63
103
|
&__sidebar {
|
|
@@ -74,8 +114,8 @@
|
|
|
74
114
|
flex-direction: column;
|
|
75
115
|
gap: var(--base);
|
|
76
116
|
padding-top: calc(var(--base) * 1.5);
|
|
77
|
-
padding-left:
|
|
78
|
-
padding-right: var(--gutter-h);
|
|
117
|
+
padding-left: var(--sidebar-gutter-h-left);
|
|
118
|
+
padding-right: var(--sidebar-gutter-h-right);
|
|
79
119
|
padding-bottom: var(--spacing-view-bottom);
|
|
80
120
|
}
|
|
81
121
|
|
|
@@ -106,7 +146,6 @@
|
|
|
106
146
|
|
|
107
147
|
&__sidebar-fields {
|
|
108
148
|
padding-top: 0;
|
|
109
|
-
padding-left: var(--gutter-h);
|
|
110
149
|
padding-bottom: 0;
|
|
111
150
|
}
|
|
112
151
|
}
|
|
@@ -114,6 +153,16 @@
|
|
|
114
153
|
|
|
115
154
|
@include mid-break {
|
|
116
155
|
display: block;
|
|
156
|
+
[dir='rtl'] &:not(&--force-sidebar-wrap) {
|
|
157
|
+
--sidebar-gutter-h-left: var(--gutter-h);
|
|
158
|
+
--sidebar-gutter-h-right: var(--gutter-h);
|
|
159
|
+
--main-gutter-h-left: var(--gutter-h);
|
|
160
|
+
--main-gutter-h-right: var(--gutter-h);
|
|
161
|
+
}
|
|
162
|
+
--main-gutter-h-left: var(--gutter-h);
|
|
163
|
+
--main-gutter-h-right: var(--gutter-h);
|
|
164
|
+
--sidebar-gutter-h-left: var(--gutter-h);
|
|
165
|
+
--sidebar-gutter-h-right: var(--gutter-h);
|
|
117
166
|
|
|
118
167
|
&--has-sidebar {
|
|
119
168
|
.document-fields {
|
|
@@ -124,12 +173,10 @@
|
|
|
124
173
|
&__edit {
|
|
125
174
|
[dir='ltr'] & {
|
|
126
175
|
border-right: 0;
|
|
127
|
-
padding-right: var(--gutter-h);
|
|
128
176
|
}
|
|
129
177
|
|
|
130
178
|
[dir='rtl'] & {
|
|
131
179
|
border-left: 0;
|
|
132
|
-
padding-left: var(--gutter-h);
|
|
133
180
|
}
|
|
134
181
|
}
|
|
135
182
|
|
|
@@ -160,18 +207,8 @@
|
|
|
160
207
|
|
|
161
208
|
&__sidebar-fields {
|
|
162
209
|
padding-top: 0;
|
|
163
|
-
padding-left: var(--gutter-h);
|
|
164
|
-
padding-right: var(--gutter-h);
|
|
165
210
|
padding-bottom: 0;
|
|
166
211
|
gap: base(0.5);
|
|
167
|
-
|
|
168
|
-
[dir='ltr'] & {
|
|
169
|
-
padding-right: var(--gutter-h);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
[dir='rtl'] & {
|
|
173
|
-
padding-left: var(--gutter-h);
|
|
174
|
-
}
|
|
175
212
|
}
|
|
176
213
|
|
|
177
214
|
&__sidebar {
|