Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit 931351c

Browse files
oleqoleq
authoredMar 9, 2020
Merge pull request #269 from ckeditor/i/6107
Feature: Brought the right–to–left UI styles to the table and table cell property forms (see ckeditor/ckeditor5#6107).
·
v19.0.0v18.0.0
2 parents 3ce24b5 + 5fe5e5b commit 931351c

File tree

5 files changed

+122
-51
lines changed

5 files changed

+122
-51
lines changed
 

‎theme/ckeditor5-table/colorinput.css

+38-5
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,38 @@
33
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
44
*/
55

6+
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
67
@import "../mixins/_rounded.css";
78

89
.ck.ck-input-color {
910
& > .ck.ck-input-text {
10-
border-top-right-radius: 0;
11-
border-bottom-right-radius: 0;
11+
@mixin ck-dir ltr {
12+
border-top-right-radius: 0;
13+
border-bottom-right-radius: 0;
14+
}
15+
16+
@mixin ck-dir rtl {
17+
border-top-left-radius: 0;
18+
border-bottom-left-radius: 0;
19+
}
1220
}
1321

1422
& > .ck.ck-dropdown {
1523
& > .ck.ck-input-color__button {
16-
border-top-left-radius: 0;
17-
border-bottom-left-radius: 0;
18-
margin-left: -1px;
1924
padding: 0;
2025

26+
@mixin ck-dir ltr {
27+
border-top-left-radius: 0;
28+
border-bottom-left-radius: 0;
29+
margin-left: -1px;
30+
}
31+
32+
@mixin ck-dir rtl {
33+
border-top-right-radius: 0;
34+
border-bottom-right-radius: 0;
35+
margin-right: -1px;
36+
}
37+
2138
&.ck-disabled {
2239
background: var(--ck-color-input-disabled-background);
2340
}
@@ -48,8 +65,24 @@
4865
border-bottom: 1px solid var(--ck-color-input-border);
4966
padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
5067

68+
border-bottom-left-radius: 0;
69+
border-bottom-right-radius: 0;
70+
71+
@mixin ck-dir ltr {
72+
border-top-right-radius: 0;
73+
}
74+
75+
@mixin ck-dir rtl {
76+
border-top-left-radius: 0;
77+
}
78+
5179
& .ck.ck-icon {
5280
margin-right: var(--ck-spacing-standard);
81+
82+
@mixin ck-dir rtl {
83+
margin-right: 0;
84+
margin-left: var(--ck-spacing-standard);
85+
}
5386
}
5487
}
5588
}

‎theme/ckeditor5-table/formrow.css

+9-1
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,21 @@
33
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
44
*/
55

6+
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
7+
68
.ck.ck-form__row {
79
padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
810

911
/* Ignore labels that work as fieldset legends */
1012
& > *:not(.ck-label) {
1113
& + * {
12-
margin-left: var(--ck-spacing-large);
14+
@mixin ck-dir ltr {
15+
margin-left: var(--ck-spacing-large);
16+
}
17+
18+
@mixin ck-dir rtl {
19+
margin-right: var(--ck-spacing-large);
20+
}
1321
}
1422
}
1523

‎theme/ckeditor5-table/tableform.css

+3-6
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,17 @@
3939
text-align: center;
4040
}
4141

42-
& .ck-table-form__dimensions-row__width {
43-
margin-right: var(--ck-spacing-small);
44-
}
45-
42+
& .ck-table-form__dimensions-row__width,
4643
& .ck-table-form__dimensions-row__height {
47-
margin-left: var(--ck-spacing-small);
44+
margin: 0
4845
}
4946

5047
& .ck-table-form__dimension-operator {
51-
margin: 0;
5248
align-self: start;
5349
display: inline-block;
5450
height: var(--ck-ui-component-min-height);
5551
line-height: var(--ck-ui-component-min-height);
52+
margin: 0 var(--ck-spacing-small);
5653
}
5754
}
5855
}

‎theme/ckeditor5-ui/components/dropdown/dropdown.css

+18-6
Original file line numberDiff line numberDiff line change
@@ -81,16 +81,28 @@
8181
@mixin ck-rounded-corners;
8282
@mixin ck-drop-shadow;
8383

84-
/* Disabled radius of top-left border to be consistent with .dropdown__button
85-
https://github.com/ckeditor/ckeditor5/issues/816 */
86-
@mixin ck-rounded-corners {
87-
border-top-left-radius: 0;
88-
}
89-
9084
background: var(--ck-color-dropdown-panel-background);
9185
border: 1px solid var(--ck-color-dropdown-panel-border);
9286
bottom: 0;
9387

9488
/* Make sure the panel is at least as wide as the drop-down's button. */
9589
min-width: 100%;
90+
91+
/* Disabled corner border radius to be consistent with the .dropdown__button
92+
https://github.com/ckeditor/ckeditor5/issues/816 */
93+
&.ck-dropdown__panel_se {
94+
border-top-left-radius: 0;
95+
}
96+
97+
&.ck-dropdown__panel_sw {
98+
border-top-right-radius: 0;
99+
}
100+
101+
&.ck-dropdown__panel_ne {
102+
border-bottom-left-radius: 0;
103+
}
104+
105+
&.ck-dropdown__panel_nw {
106+
border-bottom-right-radius: 0;
107+
}
96108
}

‎theme/ckeditor5-ui/components/toolbar/toolbar.css

+54-33
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,13 @@
3939
}
4040
}
4141

42+
& > .ck-toolbar__items > *,
43+
& > .ck.ck-toolbar__grouped-dropdown {
44+
/* Make sure items wrapped to the next line have v-spacing */
45+
margin-top: var(--ck-spacing-small);
46+
margin-bottom: var(--ck-spacing-small);
47+
}
48+
4249
&.ck-toolbar_vertical {
4350
/* Items in a vertical toolbar span the entire width. */
4451
padding: 0;
@@ -63,36 +70,17 @@
6370
/* No spacing around items. */
6471
padding: 0;
6572

66-
& .ck-toolbar__items > .ck {
67-
/* No spacing between items. */
73+
& > .ck-toolbar__items > * {
74+
/* Compact toolbar items have no spacing between them. */
6875
margin: 0;
6976

70-
/* No rounded corners on the right side of the first child. */
71-
&:first-child {
72-
border-top-right-radius: 0;
73-
border-bottom-right-radius: 0;
74-
}
75-
76-
/* No rounded corners on the left side of the last child. */
77-
&:last-child {
78-
border-top-left-radius: 0;
79-
border-bottom-left-radius: 0;
80-
}
81-
8277
/* "Middle" children should have no rounded corners. */
8378
&:not(:first-child):not(:last-child) {
8479
border-radius: 0;
8580
}
8681
}
8782
}
8883

89-
& > .ck-toolbar__items > *,
90-
& > .ck.ck-toolbar__grouped-dropdown {
91-
/* Make sure items wrapped to the next line have v-spacing */
92-
margin-top: var(--ck-spacing-small);
93-
margin-bottom: var(--ck-spacing-small);
94-
}
95-
9684
& > .ck.ck-toolbar__grouped-dropdown {
9785
/*
9886
* Dropdown button has asymmetric padding to fit the arrow.
@@ -108,26 +96,44 @@
10896
}
10997
}
11098

99+
/* stylelint-disable */
100+
111101
/*
102+
* Styles for RTL toolbars.
103+
*
112104
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
113105
* because its parent is not controlled by the editor framework.
114106
*/
115107
[dir="rtl"] .ck.ck-toolbar,
116108
.ck.ck-toolbar[dir="rtl"] {
117-
& > .ck.ck-toolbar__items {
118-
& > * {
119-
/* (#11) Separate toolbar items. */
120-
margin-left: var(--ck-spacing-small);
121-
margin-right: 0;
109+
& > .ck-toolbar__items > .ck {
110+
margin-right: 0;
111+
}
112+
113+
&:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
114+
/* (#11) Separate toolbar items. */
115+
margin-left: var(--ck-spacing-small);
116+
}
117+
118+
& > .ck-toolbar__items > .ck:last-child {
119+
margin-left: 0;
120+
}
121+
122+
&.ck-toolbar_compact > .ck-toolbar__items > .ck {
123+
/* No rounded corners on the right side of the first child. */
124+
&:first-child {
125+
border-top-left-radius: 0;
126+
border-bottom-left-radius: 0;
122127
}
123128

124-
& > *:last-child {
125-
margin-left: 0;
129+
/* No rounded corners on the left side of the last child. */
130+
&:last-child {
131+
border-top-right-radius: 0;
132+
border-bottom-right-radius: 0;
126133
}
127134
}
128135

129136
/* Separate the the separator form the grouping dropdown when some items are grouped. */
130-
/* stylelint-disable-next-line no-descending-specificity */
131137
& > .ck.ck-toolbar__separator {
132138
margin-left: var(--ck-spacing-small);
133139
}
@@ -139,19 +145,32 @@
139145
}
140146

141147
/*
148+
* Styles for LTR toolbars.
149+
*
142150
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
143151
* because its parent is not controlled by the editor framework.
144152
*/
145153
[dir="ltr"] .ck.ck-toolbar,
146154
.ck.ck-toolbar[dir="ltr"] {
147-
& > .ck.ck-toolbar__items {
148-
& > *:last-child {
149-
margin-right: 0;
155+
& > .ck-toolbar__items > .ck:last-child {
156+
margin-right: 0;
157+
}
158+
159+
&.ck-toolbar_compact > .ck-toolbar__items > .ck {
160+
/* No rounded corners on the right side of the first child. */
161+
&:first-child {
162+
border-top-right-radius: 0;
163+
border-bottom-right-radius: 0;
164+
}
165+
166+
/* No rounded corners on the left side of the last child. */
167+
&:last-child {
168+
border-top-left-radius: 0;
169+
border-bottom-left-radius: 0;
150170
}
151171
}
152172

153173
/* Separate the the separator form the grouping dropdown when some items are grouped. */
154-
/* stylelint-disable-next-line no-descending-specificity */
155174
& > .ck.ck-toolbar__separator {
156175
margin-right: var(--ck-spacing-small);
157176
}
@@ -161,3 +180,5 @@
161180
margin-right: var(--ck-spacing-small);
162181
}
163182
}
183+
184+
/* stylelint-enable */

0 commit comments

Comments
 (0)