Browse Source

Moving new separator styles to 'ckeditor5-ui'

Paweł Kwaśnik 5 years ago
parent
commit
9e5a7a72b9

+ 3 - 1
packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js

@@ -23,6 +23,7 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import '../../../theme/textalternativeform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 
 /**
  * The TextAlternativeFormView class.
@@ -111,7 +112,8 @@ export default class TextAlternativeFormView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-text-alternative-form'
+					'ck-text-alternative-form',
+					'ck-responsive-form'
 				],
 
 				// https://github.com/ckeditor/ckeditor5-image/issues/40

+ 0 - 11
packages/ckeditor5-image/theme/textalternativeform.css

@@ -27,17 +27,6 @@
 
 		& .ck-button {
 			flex-basis: 50%;
-
-			&::after {
-				border-right: 1px solid var(--ck-color-base-border);
-				content: "";
-				width: 0;
-				position: absolute;
-				right: -1px;
-				top: var(--ck-spacing-small);
-				bottom: var(--ck-spacing-small);
-				z-index: 1;
-			}
 		}
 	}
 }

+ 3 - 1
packages/ckeditor5-link/src/ui/linkactionsview.js

@@ -21,6 +21,7 @@ import { ensureSafeUrl } from '../utils';
 import unlinkIcon from '../../theme/icons/unlink.svg';
 import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
 import '../../theme/linkactions.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 
 /**
  * The link actions view class. This view displays the link preview, allows
@@ -117,7 +118,8 @@ export default class LinkActionsView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-link-actions'
+					'ck-link-actions',
+					'ck-responsive-form'
 				],
 
 				// https://github.com/ckeditor/ckeditor5-link/issues/90

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

@@ -24,6 +24,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import '../../theme/linkform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 
 /**
  * The link form view controller class.
@@ -133,7 +134,7 @@ export default class LinkFormView extends View {
 			}
 		} );
 
-		const classList = [ 'ck', 'ck-link-form' ];
+		const classList = [ 'ck', 'ck-link-form', 'ck-responsive-form' ];
 
 		if ( linkCommand.manualDecorators.length ) {
 			classList.push( 'ck-link-form_layout-vertical' );

+ 0 - 11
packages/ckeditor5-link/theme/linkactions.css

@@ -27,17 +27,6 @@
 
 		& .ck-button:not(.ck-link-actions__preview) {
 			flex-basis: 50%;
-
-			&::after {
-				border-right: 1px solid var(--ck-color-base-border);
-				content: "";
-				width: 0;
-				position: absolute;
-				right: -1px;
-				top: var(--ck-spacing-small);
-				bottom: var(--ck-spacing-small);
-				z-index: 1;
-			}
 		}
 	}
 }

+ 0 - 11
packages/ckeditor5-link/theme/linkform.css

@@ -21,17 +21,6 @@
 
 		& .ck-button {
 			flex-basis: 50%;
-
-			&::after {
-				border-right: 1px solid var(--ck-color-base-border);
-				content: "";
-				width: 0;
-				position: absolute;
-				right: -1px;
-				top: var(--ck-spacing-small);
-				bottom: var(--ck-spacing-small);
-				z-index: 1;
-			}
 		}
 	}
 }

+ 3 - 1
packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -23,6 +23,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
 import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
 import '../../theme/mediaform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 
 /**
  * The media form view controller class.
@@ -123,7 +124,8 @@ export default class MediaFormView extends View {
 			attributes: {
 				class: [
 					'ck',
-					'ck-media-form'
+					'ck-media-form',
+					'ck-responsive-form'
 				],
 
 				tabindex: '-1'

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

@@ -98,17 +98,6 @@
 				border-right: 1px solid var(--ck-color-base-border);
 			}
 		}
-
-		&::after {
-			border-right: 1px solid var(--ck-color-base-border);
-			content: "";
-			width: 0;
-			position: absolute;
-			right: -1px;
-			top: var(--ck-spacing-small);
-			bottom: var(--ck-spacing-small);
-			z-index: 1;
-		}
 	}
 
 	/* Using additional `.ck` class for stronger CSS specificity than `.ck.ck-link-form > :not(:first-child)`. */

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

@@ -53,10 +53,6 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
-
-				&:first-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 
 			@mixin ck-dir rtl {

+ 16 - 0
packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css

@@ -0,0 +1,16 @@
+@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 {
+	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);
+		}
+	}
+}

+ 28 - 0
packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css

@@ -0,0 +1,28 @@
+@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 {
+	content: "";
+	width: 0;
+	position: absolute;
+	right: -1px;
+	top: var(--ck-spacing-small);
+	bottom: var(--ck-spacing-small);
+	z-index: 1;
+}
+
+/* This one is smart and works based on media queries. */
+@mixin ck-media-phone {
+	.ck-responsive-form {
+		button.ck-button::after {
+			content: "";
+			width: 0;
+			position: absolute;
+			right: -1px;
+			top: var(--ck-spacing-small);
+			bottom: var(--ck-spacing-small);
+			z-index: 1;
+		}
+	}
+}