Merge pull request #266 from ckeditor/i/6106

Feature: Added styles for the color input (see ckeditor/ckeditor5/issues/6106).

theme/ckeditor5-table/colorinput.css

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+@import "../mixins/_rounded.css";
+
+.ck.ck-input-color {
+	& > .ck.ck-input-text {
+		border-top-right-radius: 0;
+		border-bottom-right-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;
+
+			&.ck-disabled {
+				background: var(--ck-color-input-disabled-background);
+			}
+
+			& > .ck.ck-input-color__button__preview {
+				@mixin ck-rounded-corners;
+
+				width: 20px;
+				height: 20px;
+				border: 1px solid var(--ck-color-input-border);
+
+				& > .ck.ck-input-color__button__preview__no-color-indicator {
+					top: -30%;
+					left: 50%;
+					height: 150%;
+					width: 8%;
+					background: red;
+					border-radius: 2px;
+					transform: rotate(45deg);
+					transform-origin: 50%;
+				}
+			}
+		}
+	}
+
+	& .ck.ck-input-color__remove-color {
+		width: 100%;
+		border-bottom: 1px solid var(--ck-color-input-border);
+		padding: calc(var(--ck-spacing-standard) / 2) var(--ck-spacing-standard);
+
+		& .ck.ck-icon {
+			margin-right: var(--ck-spacing-standard);
+		}
+	}
+}

theme/ckeditor5-table/tablecellproperties.css

@@ -7,33 +7,15 @@
 	width: 320px;
 
 	& .ck-form__row {
-		&.ck-table-cell-properties-form__dimensions-row,
 		&.ck-table-cell-properties-form__padding-row {
 			padding: 0;
+			width: 35%;
 		}
 
 		&.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);
-			}
-		}
 	}
 }

theme/ckeditor5-table/tableform.css

@@ -11,30 +11,50 @@
 }
 
 .ck.ck-table-form {
-	& .ck-table-form__border-row {
-		& .ck-labeled-view {
-			& > .ck-label {
-				font-size: var(--ck-font-size-tiny);
+	& .ck-form__row {
+		&.ck-table-form__border-row {
+			& .ck-labeled-view {
+				& > .ck-label {
+					font-size: var(--ck-font-size-tiny);
+					text-align: center;
+				}
 			}
-		}
 
-		& .ck-table-form__border-style {
-			width: 80px;
-			min-width: 80px;
-		}
+			& .ck-table-form__border-style {
+				width: 80px;
+				min-width: 80px;
+			}
 
-		& .ck-table-form__border-width {
-			width: 80px;
-			min-width: 80px;
+			& .ck-table-form__border-width {
+				width: 50px;
+				min-width: 50px;
+			}
 		}
-	}
 
-	& .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);
+		&.ck-table-form__dimensions-row {
+			padding: 0;
+
+			& .ck-labeled-view > .ck-label {
+				font-size: 10px;
+				text-align: center;
+			}
+
+			& .ck-table-form__dimensions-row__width {
+				margin-right: var(--ck-spacing-small);
+			}
+
+			& .ck-table-form__dimensions-row__height {
+				margin-left: var(--ck-spacing-small);
+			}
+
+			& .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);
+			}
+		}
 	}
 
 	& .ck.ck-labeled-view {

theme/ckeditor5-table/tableproperties.css

@@ -7,26 +7,9 @@
 	width: 320px;
 
 	& .ck-form__row {
-		&.ck-table-properties-form__dimensions-row,
 		&.ck-table-properties-form__alignment-row {
 			padding: 0;
-		}
-
-		&.ck-table-properties-form__dimensions-row {
-			& .ck-labeled-view > .ck-label {
-				font-size: 10px;
-			}
-
-			& .ck-table-properties-form__width {
-				margin-right: var(--ck-spacing-small);
-			}
 
-			& .ck-table-properties-form__height {
-				margin-left: var(--ck-spacing-small);
-			}
-		}
-
-		&.ck-table-properties-form__alignment-row {
 			& .ck.ck-toolbar {
 				background: none;
 

theme/ckeditor5-ui/components/labeledview/labeledview.css

@@ -15,3 +15,9 @@
 .ck.ck-labeled-view .ck-labeled-view__status_error {
 	color: var(--ck-color-base-error);
 }
+
+.ck.ck-labeled-view > .ck.ck-label {
+	width: 100%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}