Feature: Added styles of new fields in the table cell properties view…

…. Code refactoring (see ckeditor/ckeditor5#6189).
ckeditor · Feb 7, 2020 · c2bf945 · c2bf945
2 parents 7693efd + a585a3c
commit c2bf945
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/theme/ckeditor5-table/tablecellproperties.css b/theme/ckeditor5-table/tablecellproperties.css
@@ -7,15 +7,33 @@
 	width: 320px;
 
 	& .ck-form__row {
-		& .ck-table-cell-properties-form__background,
-		& .ck-table-cell-properties-form__padding {
-			width: 50%;
+		&.ck-table-cell-properties-form__dimensions-row,
+		&.ck-table-cell-properties-form__padding-row {
+			padding: 0;
 		}
 
 		&.ck-table-cell-properties-form__alignment-row {
 			& .ck.ck-toolbar {
 				background: none;
 			}
 		}
+
+		& .ck-table-cell-properties-form__padding-row {
+			width: 35%;
+		}
+
+		&.ck-table-cell-properties-form__dimensions-row {
+			& .ck-labeled-view > .ck-label {
+				font-size: 10px;
+			}
+
+			& .ck-table-cell-properties-form__width {
+				margin-right: var(--ck-spacing-small);
+			}
+
+			& .ck-table-cell-properties-form__height {
+				margin-left: var(--ck-spacing-small);
+			}
+		}
 	}
 }
diff --git a/theme/ckeditor5-table/tableform.css b/theme/ckeditor5-table/tableform.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+.ck.ck-table-form {
+	& .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);
+	}
+}
diff --git a/theme/ckeditor5-table/tableproperties.css b/theme/ckeditor5-table/tableproperties.css
@@ -9,8 +9,7 @@
 	& .ck-form__row {
 		&.ck-table-properties-form__dimensions-row,
 		&.ck-table-properties-form__alignment-row {
-			padding-left: 0;
-			padding-right: 0;
+			padding: 0;
 		}
 
 		&.ck-table-properties-form__dimensions-row {
@@ -22,14 +21,6 @@
 				margin-right: var(--ck-spacing-small);
 			}
 
-			& .ck-table-properties-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);
-			}
-
 			& .ck-table-properties-form__height {
 				margin-left: var(--ck-spacing-small);
 			}