8000 feat: add RTL support to admin modal · django-cms/djangocms-admin-style@9563c42 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9563c42

Browse files
sakhawysakhawy
committed
feat: add RTL support to admin modal
1 parent 7b7e5e5 commit 9563c42

File tree

3 files changed

+81
-23
lines changed

3 files changed

+81
-23
lines changed

‎djangocms_admin_style/sass/components/_content.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -815,7 +815,13 @@ a.addlink {
815815
// attributes field
816816
.attributes-pair .field-box {
817817
margin-bottom: 10px;
818+
819+
.delete-attributes-pair {
820+
// override admin-style
821+
margin-left: 0px !important;
822+
margin-inline-start: 16px !important;
823+
}
818824
}
819825
.attributes-pair .field-box:first-child {
820-
padding-right: 15px;
826+
padding-inline-end: 15px;
821827
}

‎djangocms_admin_style/sass/components/_forms.scss

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,9 @@ form {
277277
color: $color-primary;
278278
}
279279
}
280+
.fieldBox {
281+
margin-inline-end: 20px !important; // override admin-style rtl
282+
}
280283
}
281284
label select {
282285
display: block;
@@ -305,7 +308,12 @@ form {
305308
float: left !important;
306309
// FABR: ! Important conflicts with unfilled buttons
307310
color: $white; // !important;
308-
padding: 6px 12px !important;
311+
padding-block: 6px !important;
312+
padding-inline: 12px !important;
313+
314+
[dir=rtl] & {
315+
float: right !important;
316+
}
309317
}
310318
&.btn-default,
311319
&.btn-link {
@@ -317,7 +325,18 @@ form {
317325
}
318326
label.aligned + div.readonly {
319327
width: 160px;
320-
margin-left: 170px;
328+
margin-inline-start: 170px;
329+
}
330+
.aligned {
331+
// overriding admin style rtl.css
332+
// to match the style of djangocms-admin-style
333+
div.help {
334+
margin-right: 0px !important;
335+
}
336+
.form-row input[type="text"] {
337+
margin-right: 0px !important;
338+
margin-left: 0px !important;
339+
}
321340
}
322341
// input
323342
input,
@@ -346,7 +365,7 @@ form {
346365
width: auto !important;
347366
height: auto;
348367
min-height: unset;
349-
margin-right: 10px;
368+
margin-inline-end: 10px !important; // override admin-style rtl
350369
padding: 0 !important;
351370
border: 0 !important;
352371
}
@@ -372,6 +391,12 @@ form {
372391
background-size: 25px !important;
373392

374393
appearance: none;
394+
395+
[dir=rtl] & {
396+
// The png has a left padding of 30px. It's width is reduced from 60px to 25px
397+
// so the right possition should start from 12.5px (30*25/60)
398+
background-position: 12.5px center !important;
399+
}
375400
}
376401
select[multiple] {
377402
height: auto !important;

‎djangocms_admin_style/sass/components/_modal.scss

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
.cms_modal-window {
2424
#container .breadcrumbs + .messagelist + #content,
2525
#container .breadcrumbs + #content {
26-
margin-left: 20px !important;
26+
margin-inline-start: 20px !important;
2727
}
2828
&.app-aldryn_bootstrap3 .filerFile .filerClearer {
2929
// make sure that file clear button has the correct size #140
@@ -41,9 +41,9 @@
4141
}
4242
// resets checkbox row margin and padding in modal window because of wrapping border #188
4343
.checkbox-row {
44-
margin-left: -20px;
45-
margin-right: -20px;
46-
padding-left: 20px !important;
44+
margin-inline-start: -20px;
45+
margin-inline-end: -20px;
46+
padding-inline-start: 20px !important;
4747
}
4848
}
4949
// resets background color and shadow which is needed in admin for very long names
@@ -66,12 +66,17 @@
6666
float: left;
6767
width: 100%;
6868
.results {
69-
margin-right: 0 !important;
69+
margin-inline-end: 0 !important;
7070
}
7171
#result_list tbody th,
7272
#result_list tbody td {
7373
height: auto;
7474
}
75+
76+
[dir=rtl] & {
77+
// inline-start & inline-end are not widely supported
78+
float: right;
79+
}
7580
}
7681
}
7782
&.cms-pagetree-root {
@@ -98,7 +103,7 @@
98103
}
99104
// resets table styles in modal window #189
100105
table {
101-
margin-left: 0;
106+
margin-inline-start: 0;
102107
box-shadow: none !important;
103108
td > select {
104109
width: auto !important;
@@ -122,15 +127,17 @@
122127
}
123128
#content,
124129
&.filebrowser #content {
125-
margin: 20px 20px 0 !important;
130+
margin-block: 20px 0 !important;
131+
margin-inline: 20px !important;
126132
}
127133
#content .submit-row {
128-
margin: 20px -20px 0 !important;
134+
margin-block: 20px 0 !important;
135+
margin-inline: -20px !important;
129136
padding: 20px 20px !important;
130137
}
131138
.form-row {
132-
padding-left: 0;
133-
padding-right: 0;
139+
padding-inline-start: 0;
140+
padding-inline-end: 0;
134141
.btn-group-context label {
135142
margin-top: 0 !important;
136143
margin-bottom: 5px;
@@ -143,15 +150,21 @@
143150
float: left;
144151
margin-top: 0;
145152
&.field-registration_deadline_at {
146-
margin-right: 0 !important;
153+
margin-inline-end: 0 !important;
154+
}
155+
156+
[dir=rtl] & {
157+
// inline-start & inline-end are not widely supported
158+
float: right;
147159
}
148160
}
149161
}
150162
// resets column width on bootstrap row plugin #59
151163
.bootstrap3-column {
152164
.form-row {
153165
overflow: hidden;
154-
padding: 14px 0 10px;
166+
padding-block: 14px 10px;
167+
padding-inline: 0px;
155168
border-bottom: solid 1px $gray-lighter;
156169
&.field-create {
157170
input {
@@ -161,13 +174,23 @@
161174
display: inline-block;
162175
float: left;
163176
width: 160px !important;
177+
178+
[dir=rtl] & {
179+
// inline-start & inline-end are not widely supported
180+
float: right;
181+
}
164182
}
165183
}
166184
.fieldBox {
167185
label {
168186
display: inline-block;
169187
float: left;
170188
width: 70px !important;
189+
190+
[dir=rtl] & {
191+
// inline-start & inline-end are not widely supported
192+
float: right;
193+
}
171194
}
172195
input {
173196
width: auto !important;
@@ -196,7 +219,7 @@
196219
#container .breadcrumbs + .messagelist + #content,
197220
#container .breadcrumbs + #content {
198221
// make sure that margin is same as on modal window
199-
margin-left: 20px !important;
222+
margin-inline-start: 20px !important;
200223
}
201224
.colM {
202225
box-shadow: none;
@@ -212,18 +235,22 @@
212235
padding: 0 !important;
213236
}
214237
ul {
215-
margin: 10px -20px 0;
238+
margin-block: 10px 0;
239+
margin-inline: -20px;
216240
li {
217-
padding: 10px 0 10px 20px;
241+
padding-block: 10px;
242+
padding-inline: 20px 0;
218243
}
219244
ul {
220-
margin: 10px 0 -10px -20px;
245+
margin-block: 10px -10px;
246+
margin-inline: -20px 0;
221247
li {
222-
padding: 10px 0 10px 20px;
248+
padding-block: 10px;
249+
padding-inline: 20px 0;
223250
}
224251
ul {
225-
margin-left: 0;
226-
margin-right: 0;
252+
margin-inline-start: 0;
253+
margin-inline-end: 0;
227254
}
228255
}
229256
}

0 commit comments

Comments
 (0)
0