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

Fixed border row styles in table forms when editor renders in German.

Aleksander Nowodzinski 5 лет назад
Родитель
Сommit
76a7bcc42d

+ 0 - 17
packages/ckeditor5-table/theme/tableform.css

@@ -7,23 +7,6 @@
 	& .ck-form__row {
 		&.ck-table-form__border-row {
 			flex-wrap: wrap;
-
-			& .ck-labeled-field-view {
-				display: flex;
-				flex-direction: column-reverse;
-
-				& .ck.ck-dropdown {
-					flex-grow: 0;
-				}
-			}
-
-			& .ck-table-form__border-style {
-				flex-grow: 0;
-			}
-
-			& .ck-table-form__border-width {
-				flex-grow: 0;
-			}
 		}
 
 		&.ck-table-form__background-row {

+ 2 - 5
packages/ckeditor5-theme-lark/theme/ckeditor5-table/tableform.css

@@ -20,14 +20,11 @@
 				}
 			}
 
-			& .ck-table-form__border-style {
-				width: 80px;
-				min-width: 80px;
-			}
-
+			& .ck-table-form__border-style,
 			& .ck-table-form__border-width {
 				width: 80px;
 				min-width: 80px;
+				max-width: 80px;
 			}
 		}
 

+ 21 - 14
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/labeledfield/labeledfieldview.css

@@ -7,26 +7,16 @@
 
 :root {
 	--ck-labeled-field-view-transition: .1s cubic-bezier(0, 0, 0.24, 0.95);
+	--ck-labeled-field-empty-unfocused-max-width: 100% - 2 * var(--ck-spacing-medium);
 }
 
 .ck.ck-labeled-field-view {
 	@mixin ck-rounded-corners;
 
 	& > .ck.ck-labeled-field-view__input-wrapper {
+		display: flex;
 		position: relative;
 		width: 100%;
-
-		& > .ck-dropdown > .ck.ck-button {
-			background: transparent;
-		}
-	}
-
-	&.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
-		opacity: 0;
-	}
-
-	& .ck-labeled-input__wrapper {
-		position: relative;
 	}
 
 	& .ck.ck-input {
@@ -104,10 +94,27 @@
 	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck.ck-label {
 		transform: translate(var(--ck-spacing-medium), calc(0.6 * var(--ck-font-size-base))) scale(1);
 
-		/* Compensate for the default translate position */
-		max-width: calc(100% - 2 * var(--ck-spacing-medium));
+		/* Compensate for the default translate position. */
+		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width));
 
 		background: transparent;
 		padding: 0;
 	}
+
+	/*------ DropdownView integration ----------------------------------------------------------------------------------- */
+
+	/* Make sure dropdown' background color in any of dropdown's state does not collide with labeled field. */
+	& > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck.ck-button {
+		background: transparent;
+	}
+
+	/* When the dropdown is "empty", the labeled field label replaces its label. */
+	&.ck-labeled-field-view_empty > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown > .ck-button > .ck-button__label {
+		opacity: 0;
+	}
+
+	/* Make sure the label of the empty, unfocused input does not cover the dropdown arrow. */
+	&.ck-labeled-field-view_empty:not(.ck-labeled-field-view_focused):not(.ck-labeled-field-view_placeholder) > .ck.ck-labeled-field-view__input-wrapper > .ck-dropdown + .ck-label {
+		max-width: calc(var(--ck-labeled-field-empty-unfocused-max-width) - var(--ck-dropdown-arrow-size) - var(--ck-spacing-standard));
+	}
 }