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

Commit

Permalink
Merge pull request #269 from ckeditor/i/6107
Browse files Browse the repository at this point in the history 
Feature: Brought the right–to–left UI styles to the table and table cell property forms (see ckeditor/ckeditor5#6107).
  • Loading branch information
@oleq
oleq authored Mar 9, 2020
2 parents 3ce24b5 + 5fe5e5b commit 931351c
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 51 deletions.
43 changes: 38 additions & 5 deletions theme/ckeditor5-table/colorinput.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,38 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
@import "../mixins/_rounded.css";

.ck.ck-input-color {
& > .ck.ck-input-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
@mixin ck-dir ltr {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

@mixin ck-dir rtl {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

& > .ck.ck-dropdown {
& > .ck.ck-input-color__button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
padding: 0;

@mixin ck-dir ltr {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}

@mixin ck-dir rtl {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -1px;
}

&.ck-disabled {
background: var(--ck-color-input-disabled-background);
}
Expand Down Expand Up @@ -48,8 +65,24 @@
border-bottom: 1px solid var(--ck-color-input-border);
padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);

border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

@mixin ck-dir ltr {
border-top-right-radius: 0;
}

@mixin ck-dir rtl {
border-top-left-radius: 0;
}

& .ck.ck-icon {
margin-right: var(--ck-spacing-standard);

@mixin ck-dir rtl {
margin-right: 0;
margin-left: var(--ck-spacing-standard);
}
}
}
}
10 changes: 9 additions & 1 deletion theme/ckeditor5-table/formrow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,21 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-form__row {
padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;

/* Ignore labels that work as fieldset legends */
& > *:not(.ck-label) {
& + * {
margin-left: var(--ck-spacing-large);
@mixin ck-dir ltr {
margin-left: var(--ck-spacing-large);
}

@mixin ck-dir rtl {
margin-right: var(--ck-spacing-large);
}
}
}

Expand Down
9 changes: 3 additions & 6 deletions theme/ckeditor5-table/tableform.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,17 @@
text-align: center;
}

& .ck-table-form__dimensions-row__width {
margin-right: var(--ck-spacing-small);
}

& .ck-table-form__dimensions-row__width,
& .ck-table-form__dimensions-row__height {
margin-left: var(--ck-spacing-small);
margin: 0
}

& .ck-table-form__dimension-operator {
margin: 0;
align-self: start;
display: inline-block;
height: var(--ck-ui-component-min-height);
line-height: var(--ck-ui-component-min-height);
margin: 0 var(--ck-spacing-small);
}
}
}
Expand Down
24 changes: 18 additions & 6 deletions theme/ckeditor5-ui/components/dropdown/dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,28 @@
@mixin ck-rounded-corners;
@mixin ck-drop-shadow;

/* Disabled radius of top-left border to be consistent with .dropdown__button
https://github.com/ckeditor/ckeditor5/issues/816 */
@mixin ck-rounded-corners {
border-top-left-radius: 0;
}

background: var(--ck-color-dropdown-panel-background);
border: 1px solid var(--ck-color-dropdown-panel-border);
bottom: 0;

/* Make sure the panel is at least as wide as the drop-down's button. */
min-width: 100%;

/* Disabled corner border radius to be consistent with the .dropdown__button
https://github.com/ckeditor/ckeditor5/issues/816 */
&.ck-dropdown__panel_se {
border-top-left-radius: 0;
}

&.ck-dropdown__panel_sw {
border-top-right-radius: 0;
}

&.ck-dropdown__panel_ne {
border-bottom-left-radius: 0;
}

&.ck-dropdown__panel_nw {
border-bottom-right-radius: 0;
}
}
87 changes: 54 additions & 33 deletions theme/ckeditor5-ui/components/toolbar/toolbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,13 @@
}
}

& > .ck-toolbar__items > *,
& > .ck.ck-toolbar__grouped-dropdown {
/* Make sure items wrapped to the next line have v-spacing */
margin-top: var(--ck-spacing-small);
margin-bottom: var(--ck-spacing-small);
}

&.ck-toolbar_vertical {
/* Items in a vertical toolbar span the entire width. */
padding: 0;
Expand All @@ -63,36 +70,17 @@
/* No spacing around items. */
padding: 0;

& .ck-toolbar__items > .ck {
/* No spacing between items. */
& > .ck-toolbar__items > * {
/* Compact toolbar items have no spacing between them. */
margin: 0;

/* No rounded corners on the right side of the first child. */
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

/* No rounded corners on the left side of the last child. */
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

/* "Middle" children should have no rounded corners. */
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
}

& > .ck-toolbar__items > *,
& > .ck.ck-toolbar__grouped-dropdown {
/* Make sure items wrapped to the next line have v-spacing */
margin-top: var(--ck-spacing-small);
margin-bottom: var(--ck-spacing-small);
}

& > .ck.ck-toolbar__grouped-dropdown {
/*
* Dropdown button has asymmetric padding to fit the arrow.
Expand All @@ -108,26 +96,44 @@
}
}

/* stylelint-disable */

/*
* Styles for RTL toolbars.
*
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
* because its parent is not controlled by the editor framework.
*/
[dir="rtl"] .ck.ck-toolbar,
.ck.ck-toolbar[dir="rtl"] {
& > .ck.ck-toolbar__items {
& > * {
/* (#11) Separate toolbar items. */
margin-left: var(--ck-spacing-small);
margin-right: 0;
& > .ck-toolbar__items > .ck {
margin-right: 0;
}

&:not(.ck-toolbar_compact) > .ck-toolbar__items > .ck {
/* (#11) Separate toolbar items. */
margin-left: var(--ck-spacing-small);
}

& > .ck-toolbar__items > .ck:last-child {
margin-left: 0;
}

&.ck-toolbar_compact > .ck-toolbar__items > .ck {
/* No rounded corners on the right side of the first child. */
&:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

& > *:last-child {
margin-left: 0;
/* No rounded corners on the left side of the last child. */
&:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}

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

/*
* Styles for LTR toolbars.
*
* Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
* because its parent is not controlled by the editor framework.
*/
[dir="ltr"] .ck.ck-toolbar,
.ck.ck-toolbar[dir="ltr"] {
& > .ck.ck-toolbar__items {
& > *:last-child {
margin-right: 0;
& > .ck-toolbar__items > .ck:last-child {
margin-right: 0;
}

&.ck-toolbar_compact > .ck-toolbar__items > .ck {
/* No rounded corners on the right side of the first child. */
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

/* No rounded corners on the left side of the last child. */
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}

/* Separate the the separator form the grouping dropdown when some items are grouped. */
/* stylelint-disable-next-line no-descending-specificity */
& > .ck.ck-toolbar__separator {
margin-right: var(--ck-spacing-small);
}
Expand All @@ -161,3 +180,5 @@
margin-right: var(--ck-spacing-small);
}
}

/* stylelint-enable */

0 comments on commit 931351c

Please sign in to comment.