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

Introduced styles for `LinkFormView` with manual decorators.

dkonopka 6 лет назад
Родитель
Сommit
8ea860b0a3
1 измененных файлов с 40 добавлено и 0 удалено
  1. 40 0
      packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

+ 40 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css

@@ -46,3 +46,43 @@
 	}
 }
 
+/* Style link form differently when manual decoratos are available.
+ * See: https://github.com/ckeditor/ckeditor5-link/issues/186.
+ */
+.ck.ck-link-form_decorators {
+	padding: 0;
+	width: var(--ck-input-text-width);
+
+	& .ck-labeled-input {
+		margin: var(--ck-spacing-standard);
+
+		& .ck-input-text {
+			min-width: 0;
+			width: 100%;
+		}
+	}
+
+	& .ck-button {
+		padding: var(--ck-spacing-standard);
+		margin: 0;
+		border-radius: 0;
+		border: 0;
+		border-top: 1px solid var(--ck-color-base-border);
+
+		&:first-of-type {
+			border-right: 1px solid var(--ck-color-base-border);
+		}
+	}
+
+	& .ck-list .ck-switchbutton {
+		border: 0;
+	}
+
+	/* Do not allow stretching switch button label (it breaks switch button). */
+	& .ck-list .ck-button__label {
+		text-overflow: ellipsis;
+		overflow: hidden;
+		max-width: calc( var(--ck-input-text-width) * .8 - var(--ck-switch-button-toggle-width) );
+	}
+}
+