8
0
Просмотр исходного кода

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).
Aleksander Nowodzinski 5 лет назад
Родитель
Сommit
d26320a6ca

+ 38 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-table/colorinput.css

@@ -3,21 +3,38 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * 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";
 @import "../mixins/_rounded.css";
 
 
 .ck.ck-input-color {
 .ck.ck-input-color {
 	& > .ck.ck-input-text {
 	& > .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-dropdown {
 		& > .ck.ck-input-color__button {
 		& > .ck.ck-input-color__button {
-			border-top-left-radius: 0;
-			border-bottom-left-radius: 0;
-			margin-left: -1px;
 			padding: 0;
 			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 {
 			&.ck-disabled {
 				background: var(--ck-color-input-disabled-background);
 				background: var(--ck-color-input-disabled-background);
 			}
 			}
@@ -48,8 +65,24 @@
 		border-bottom: 1px solid var(--ck-color-input-border);
 		border-bottom: 1px solid var(--ck-color-input-border);
 		padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
 		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 {
 		& .ck.ck-icon {
 			margin-right: var(--ck-spacing-standard);
 			margin-right: var(--ck-spacing-standard);
+
+			@mixin ck-dir rtl {
+				margin-right: 0;
+				margin-left: var(--ck-spacing-standard);
+			}
 		}
 		}
 	}
 	}
 }
 }

+ 9 - 1
packages/ckeditor5-theme-lark/theme/ckeditor5-table/formrow.css

@@ -3,13 +3,21 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  * 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 {
 .ck.ck-form__row {
 	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
 	padding: var(--ck-spacing-standard) var(--ck-spacing-large) 0;
 
 
 	/* Ignore labels that work as fieldset legends */
 	/* Ignore labels that work as fieldset legends */
 	& > *:not(.ck-label) {
 	& > *: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);
+			}
 		}
 		}
 	}
 	}
 
 

+ 3 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css

@@ -39,20 +39,17 @@
 				text-align: center;
 				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 {
 			& .ck-table-form__dimensions-row__height {
-				margin-left: var(--ck-spacing-small);
+				margin: 0
 			}
 			}
 
 
 			& .ck-table-form__dimension-operator {
 			& .ck-table-form__dimension-operator {
-				margin: 0;
 				align-self: start;
 				align-self: start;
 				display: inline-block;
 				display: inline-block;
 				height: var(--ck-ui-component-min-height);
 				height: var(--ck-ui-component-min-height);
 				line-height: var(--ck-ui-component-min-height);
 				line-height: var(--ck-ui-component-min-height);
+				margin: 0 var(--ck-spacing-small);
 			}
 			}
 		}
 		}
 	}
 	}

+ 18 - 6
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/dropdown/dropdown.css

@@ -81,16 +81,28 @@
 	@mixin ck-rounded-corners;
 	@mixin ck-rounded-corners;
 	@mixin ck-drop-shadow;
 	@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);
 	background: var(--ck-color-dropdown-panel-background);
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	border: 1px solid var(--ck-color-dropdown-panel-border);
 	bottom: 0;
 	bottom: 0;
 
 
 	/* Make sure the panel is at least as wide as the drop-down's button. */
 	/* Make sure the panel is at least as wide as the drop-down's button. */
 	min-width: 100%;
 	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;
+	}
 }
 }

+ 54 - 33
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/toolbar/toolbar.css

@@ -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 {
 	&.ck-toolbar_vertical {
 		/* Items in a vertical toolbar span the entire width. */
 		/* Items in a vertical toolbar span the entire width. */
 		padding: 0;
 		padding: 0;
@@ -63,22 +70,10 @@
 		/* No spacing around items. */
 		/* No spacing around items. */
 		padding: 0;
 		padding: 0;
 
 
-		& .ck-toolbar__items > .ck {
-			/* No spacing between items. */
+		& > .ck-toolbar__items > * {
+			/* Compact toolbar items have no spacing between them. */
 			margin: 0;
 			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. */
 			/* "Middle" children should have no rounded corners. */
 			&:not(:first-child):not(:last-child) {
 			&:not(:first-child):not(:last-child) {
 				border-radius: 0;
 				border-radius: 0;
@@ -86,13 +81,6 @@
 		}
 		}
 	}
 	}
 
 
-	& > .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 {
 	& > .ck.ck-toolbar__grouped-dropdown {
 		/*
 		/*
 		 * Dropdown button has asymmetric padding to fit the arrow.
 		 * Dropdown button has asymmetric padding to fit the arrow.
@@ -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"
  * 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.
  * because its parent is not controlled by the editor framework.
  */
  */
 [dir="rtl"] .ck.ck-toolbar,
 [dir="rtl"] .ck.ck-toolbar,
 .ck.ck-toolbar[dir="rtl"] {
 .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. */
 	/* Separate the the separator form the grouping dropdown when some items are grouped. */
-	/* stylelint-disable-next-line no-descending-specificity */
 	& > .ck.ck-toolbar__separator {
 	& > .ck.ck-toolbar__separator {
 		margin-left: var(--ck-spacing-small);
 		margin-left: var(--ck-spacing-small);
 	}
 	}
@@ -139,19 +145,32 @@
 }
 }
 
 
 /*
 /*
+ * Styles for LTR toolbars.
+ *
  * Note: In some cases (e.g. a decoupled editor), the toolbar has its own "dir"
  * 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.
  * because its parent is not controlled by the editor framework.
  */
  */
 [dir="ltr"] .ck.ck-toolbar,
 [dir="ltr"] .ck.ck-toolbar,
 .ck.ck-toolbar[dir="ltr"] {
 .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. */
 	/* Separate the the separator form the grouping dropdown when some items are grouped. */
-	/* stylelint-disable-next-line no-descending-specificity */
 	& > .ck.ck-toolbar__separator {
 	& > .ck.ck-toolbar__separator {
 		margin-right: var(--ck-spacing-small);
 		margin-right: var(--ck-spacing-small);
 	}
 	}
@@ -161,3 +180,5 @@
 		margin-right: var(--ck-spacing-small);
 		margin-right: var(--ck-spacing-small);
 	}
 	}
 }
 }
+
+/* stylelint-enable */