8
0
Эх сурвалжийг харах

Moving new separator styles to 'ckeditor5-ui'

Paweł Kwaśnik 5 жил өмнө
parent
commit
9e0065e9cb

+ 1 - 1
packages/ckeditor5-link/src/ui/linkformview.js

@@ -137,7 +137,7 @@ export default class LinkFormView extends View {
 		const classList = [ 'ck', 'ck-link-form', 'ck-responsive-form' ];
 
 		if ( linkCommand.manualDecorators.length ) {
-			classList.push( 'ck-link-form_layout-vertical' );
+			classList.push( 'ck-link-form_layout-vertical', 'ck-vertical-form' );
 		}
 
 		this.setTemplate( {

+ 0 - 63
packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css

@@ -1,63 +0,0 @@
-/*
- * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
-
-.ck.ck-text-alternative-form {
-	padding: var(--ck-spacing-standard);
-
-	&:focus {
-		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
-		outline: none;
-	}
-
-	@mixin ck-dir ltr {
-		& > :not(:first-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-dir rtl {
-		& > :not(:last-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-media-phone {
-		padding: 0;
-		width: calc(.8 * var(--ck-input-text-width));
-
-		& .ck-labeled-field-view {
-			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
-
-			& .ck-input-text {
-				min-width: 0;
-				width: 100%;
-			}
-		}
-
-		& .ck-button {
-			padding: var(--ck-spacing-standard);
-			margin-top: var(--ck-spacing-standard);
-
-			border-radius: 0;
-			border: 0;
-			border-top: 1px solid var(--ck-color-base-border);
-
-			@mixin ck-dir ltr {
-				margin-left: 0;
-			}
-
-			@mixin ck-dir rtl {
-				margin-left: 0;
-
-				&:last-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
-			}
-		}
-	}
-}

+ 0 - 21
packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css

@@ -11,8 +11,6 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 
 .ck.ck-link-actions {
-	padding: var(--ck-spacing-standard);
-
 	& .ck-button.ck-link-actions__preview {
 		padding-left: 0;
 		padding-right: 0;
@@ -52,11 +50,6 @@
 		}
 	}
 
-	&:focus {
-		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
-		outline: none;
-	}
-
 	@mixin ck-dir ltr {
 		& .ck-button:not(:first-child) {
 			margin-left: var(--ck-spacing-standard);
@@ -70,9 +63,6 @@
 	}
 
 	@mixin ck-media-phone {
-		padding: 0;
-		width: calc(.8 * var(--ck-input-text-width));
-
 		& .ck-button.ck-link-actions__preview {
 			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
 
@@ -83,23 +73,12 @@
 		}
 
 		& .ck-button:not(.ck-link-actions__preview) {
-			padding: var(--ck-spacing-standard);
-			margin-top: var(--ck-spacing-standard);
-
-			border-radius: 0;
-			border: 0;
-			border-top: 1px solid var(--ck-color-base-border);
-
 			@mixin ck-dir ltr {
 				margin-left: 0;
 			}
 
 			@mixin ck-dir rtl {
 				margin-left: 0;
-
-				&:last-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 		}
 	}

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

@@ -3,65 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
-.ck.ck-link-form {
-	padding: var(--ck-spacing-standard);
-
-	&:focus {
-		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
-		outline: none;
-	}
-
-	@mixin ck-dir ltr {
-		& > :not(:first-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-dir rtl {
-		& > :not(:last-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-media-phone {
-		padding: 0;
-		width: calc(.8 * var(--ck-input-text-width));
-
-		& .ck-labeled-field-view {
-			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
-
-			& .ck-input-text {
-				min-width: 0;
-				width: 100%;
-			}
-		}
-
-		& .ck-button {
-			padding: var(--ck-spacing-standard);
-			margin-top: var(--ck-spacing-standard);
-
-			border-radius: 0;
-			border: 0;
-			border-top: 1px solid var(--ck-color-base-border);
-
-			@mixin ck-dir ltr {
-				margin-left: 0;
-			}
-
-			@mixin ck-dir rtl {
-				margin-left: 0;
-
-				&:last-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
-			}
-		}
-	}
-}
-
 /*
  * Style link form differently when manual decorators are available.
  * See: https://github.com/ckeditor/ckeditor5-link/issues/186.

+ 0 - 67
packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

@@ -1,67 +0,0 @@
-/*
- * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
-
-.ck.ck-media-form {
-	padding: var(--ck-spacing-standard);
-
-	&:focus {
-		outline: none;
-	}
-
-	@mixin ck-dir ltr {
-		& > :not(:first-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-dir rtl {
-		& > :not(:last-child) {
-			margin-left: var(--ck-spacing-standard);
-		}
-	}
-
-	@mixin ck-media-phone {
-		padding: 0;
-		width: calc(.8 * var(--ck-input-text-width));
-
-		& .ck-labeled-field-view {
-			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
-
-			& .ck-input-text {
-				min-width: 0;
-				width: 100%;
-			}
-
-			/* Let the long error messages wrap in the narrow form. */
-			& .ck-labeled-field-view__error {
-				white-space: normal;
-			}
-		}
-
-		& .ck-button {
-			padding: var(--ck-spacing-standard);
-			margin-top: var(--ck-spacing-standard);
-
-			border-radius: 0;
-			border: 0;
-			border-top: 1px solid var(--ck-color-base-border);
-
-			@mixin ck-dir ltr {
-				margin-left: 0;
-			}
-
-			@mixin ck-dir rtl {
-				margin-left: 0;
-
-				&:last-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
-			}
-		}
-	}
-}

+ 63 - 8
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css

@@ -1,16 +1,71 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";
 
-/* This one can be used here https://github.com/ckeditor/ckeditor5/blob/0706215c592edcf1b701b4af63298f4b77f8dd01/packages/ckeditor5-link/src/ui/linkformview.js#L139 */
-/* It simply enforces the mode when the class is set. */
-.ck-link-form_layout-vertical button.ck-button::after {
+.ck-vertical-form .ck-button::after {
 	border-right: 1px solid var(--ck-color-base-border);
 }
 
-/* This one is smart and works based on media queries. */
-@mixin ck-media-phone {
-	.ck-responsive-form {
-		button.ck-button::after {
-			border-right: 1px solid var(--ck-color-base-border);
+.ck.ck-responsive-form {
+	padding: var(--ck-spacing-standard);
+
+	&:focus {
+		/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
+		outline: none;
+	}
+
+	@mixin ck-dir ltr {
+		& > :not(:first-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-dir rtl {
+		& > :not(:last-child) {
+			margin-left: var(--ck-spacing-standard);
+		}
+	}
+
+	@mixin ck-media-phone {
+		padding: 0;
+		width: calc(.8 * var(--ck-input-text-width));
+
+		& .ck-labeled-field-view {
+			margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;
+
+			& .ck-input-text {
+				min-width: 0;
+				width: 100%;
+			}
+
+			/* Let the long error messages wrap in the narrow form. */
+			& .ck-labeled-field-view__error {
+				white-space: normal;
+			}
+		}
+
+		& button.ck-button {
+			padding: var(--ck-spacing-standard);
+			margin-top: var(--ck-spacing-standard);
+
+			border-radius: 0;
+			border: 0;
+			border-top: 1px solid var(--ck-color-base-border);
+
+			@mixin ck-dir ltr {
+				margin-left: 0;
+			}
+
+			@mixin ck-dir rtl {
+				margin-left: 0;
+
+				&:last-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
+			}
+
+			&::after {
+				border-right: 1px solid var(--ck-color-base-border);
+			}
 		}
 	}
 }

+ 4 - 7
packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css

@@ -1,8 +1,6 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
 
-/* This one can be used here https://github.com/ckeditor/ckeditor5/blob/0706215c592edcf1b701b4af63298f4b77f8dd01/packages/ckeditor5-link/src/ui/linkformview.js#L139 */
-/* It simply enforces the mode when the class is set. */
-.ck-link-form_layout-vertical button.ck-button::after {
+.ck-vertical-form .ck-button::after {
 	content: "";
 	width: 0;
 	position: absolute;
@@ -12,10 +10,9 @@
 	z-index: 1;
 }
 
-/* This one is smart and works based on media queries. */
-@mixin ck-media-phone {
-	.ck-responsive-form {
-		button.ck-button::after {
+.ck.ck-responsive-form {
+	@mixin ck-media-phone {
+		& .ck-button::after {
 			content: "";
 			width: 0;
 			position: absolute;