@payloadcms/ui 3.50.0-canary.5 → 3.50.0-canary.6

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.
@@ -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
- padding-left: var(--gutter-h);
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,6 +5,24 @@
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
+ --sidebar-gutter-h-left: var(--gutter-h);
22
+ --sidebar-gutter-h-right: var(--gutter-h);
23
+ --main-gutter-h-left: var(--gutter-h);
24
+ --main-gutter-h-right: var(--gutter-h);
25
+ }
8
26
 
9
27
  &--has-sidebar {
10
28
  .document-fields {
@@ -13,18 +31,18 @@
13
31
  }
14
32
 
15
33
  &__edit {
34
+ padding-left: var(--main-gutter-h-left);
35
+ padding-right: var(--main-gutter-h-right);
16
36
  [dir='ltr'] & {
17
37
  top: 0;
18
38
  right: 0;
19
39
  border-right: 1px solid var(--theme-elevation-100);
20
- padding-right: calc(var(--base) * 2);
21
40
  }
22
41
 
23
42
  [dir='rtl'] & {
24
43
  top: 0;
25
44
  left: 0;
26
45
  border-left: 1px solid var(--theme-elevation-100);
27
- padding-left: calc(var(--base) * 2);
28
46
  }
29
47
  }
30
48
 
@@ -74,8 +92,8 @@
74
92
  flex-direction: column;
75
93
  gap: var(--base);
76
94
  padding-top: calc(var(--base) * 1.5);
77
- padding-left: calc(var(--base) * 2);
78
- padding-right: var(--gutter-h);
95
+ padding-left: var(--sidebar-gutter-h-left);
96
+ padding-right: var(--sidebar-gutter-h-right);
79
97
  padding-bottom: var(--spacing-view-bottom);
80
98
  }
81
99
 
@@ -106,7 +124,6 @@
106
124
 
107
125
  &__sidebar-fields {
108
126
  padding-top: 0;
109
- padding-left: var(--gutter-h);
110
127
  padding-bottom: 0;
111
128
  }
112
129
  }
@@ -114,6 +131,16 @@
114
131
 
115
132
  @include mid-break {
116
133
  display: block;
134
+ [dir='rtl'] &:not(&--force-sidebar-wrap) {
135
+ --sidebar-gutter-h-left: var(--gutter-h);
136
+ --sidebar-gutter-h-right: var(--gutter-h);
137
+ --main-gutter-h-left: var(--gutter-h);
138
+ --main-gutter-h-right: var(--gutter-h);
139
+ }
140
+ --main-gutter-h-left: var(--gutter-h);
141
+ --main-gutter-h-right: var(--gutter-h);
142
+ --sidebar-gutter-h-left: var(--gutter-h);
143
+ --sidebar-gutter-h-right: var(--gutter-h);
117
144
 
118
145
  &--has-sidebar {
119
146
  .document-fields {
@@ -124,12 +151,10 @@
124
151
  &__edit {
125
152
  [dir='ltr'] & {
126
153
  border-right: 0;
127
- padding-right: var(--gutter-h);
128
154
  }
129
155
 
130
156
  [dir='rtl'] & {
131
157
  border-left: 0;
132
- padding-left: var(--gutter-h);
133
158
  }
134
159
  }
135
160
 
@@ -160,18 +185,8 @@
160
185
 
161
186
  &__sidebar-fields {
162
187
  padding-top: 0;
163
- padding-left: var(--gutter-h);
164
- padding-right: var(--gutter-h);
165
188
  padding-bottom: 0;
166
189
  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
190
  }
176
191
 
177
192
  &__sidebar {