From 5d22fa5f9fc46efab75234b26218fe5ef6891725 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Fri, 9 Oct 2020 08:55:10 +0200
Subject: [PATCH 01/14] Buttons separators in RWD mobile should not be full
 height

---
 .../ckeditor5-link/src/ui/linkformview.js     |  4 +++
 .../ckeditor5-link/tests/ui/linkformview.js   |  8 ++++--
 packages/ckeditor5-link/theme/linkform.css    | 27 ++++++++++++++++++-
 .../theme/ckeditor5-link/linkform.css         | 10 ++++---
 4 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index e20a747e8d0..87ce8e1d1b4 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/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 ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 /**
  * The link form view controller class.
@@ -85,6 +86,8 @@ export default class LinkFormView extends View {
 		 */
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
+		this.separatorView = new ToolbarSeparatorView();
+
 		/**
 		 * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
 		 * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
@@ -331,6 +334,7 @@ export default class LinkFormView extends View {
 		}
 
 		children.add( this.saveButtonView );
+		children.add( this.separatorView );
 		children.add( this.cancelButtonView );
 
 		return children;
diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js
index 402274d89c7..b478e08d925 100644
--- a/packages/ckeditor5-link/tests/ui/linkformview.js
+++ b/packages/ckeditor5-link/tests/ui/linkformview.js
@@ -45,14 +45,17 @@ describe( 'LinkFormView', () => {
 		it( 'should create child views', () => {
 			expect( view.urlInputView ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
+			expect( view.separatorView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 
 			expect( view.saveButtonView.element.classList.contains( 'ck-button-save' ) ).to.be.true;
+			expect( view.separatorView.element.classList.contains( 'ck-toolbar__separator' ) ).to.be.true;
 			expect( view.cancelButtonView.element.classList.contains( 'ck-button-cancel' ) ).to.be.true;
 
 			expect( view.children.get( 0 ) ).to.equal( view.urlInputView );
 			expect( view.children.get( 1 ) ).to.equal( view.saveButtonView );
-			expect( view.children.get( 2 ) ).to.equal( view.cancelButtonView );
+			expect( view.children.get( 2 ) ).to.equal( view.separatorView );
+			expect( view.children.get( 3 ) ).to.equal( view.cancelButtonView );
 		} );
 
 		it( 'should create #focusTracker instance', () => {
@@ -94,7 +97,8 @@ describe( 'LinkFormView', () => {
 
 			it( 'has button views', () => {
 				expect( view.template.children[ 0 ].get( 1 ) ).to.equal( view.saveButtonView );
-				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.cancelButtonView );
+				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.separatorView );
+				expect( view.template.children[ 0 ].get( 3 ) ).to.equal( view.cancelButtonView );
 			} );
 		} );
 	} );
diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index 091b35fbc8f..526d0cde69b 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/packages/ckeditor5-link/theme/linkform.css
@@ -20,7 +20,32 @@
 		}
 
 		& .ck-button {
-			flex-basis: 50%;
+			flex-grow: 1;
+		}
+
+		& .ck-toolbar__separator {
+			align-self: stretch;
+			width: 1px;
+			min-width: 1px;
+			background: var(--ck-color-toolbar-border);
+
+			/*
+			 * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
+			 * See https://github.com/ckeditor/ckeditor5/issues/7493.
+			 */
+			margin-top: calc(var(--ck-spacing-large) + var(--ck-spacing-extra-tiny));
+			margin-bottom: var(--ck-spacing-small);
+
+			&::before {
+				content: ".";
+				display: inline-block;
+				position: relative;
+				top: -5px;
+				width: 1px;
+				height: 1px;
+				color: var(--ck-color-base-background);
+				background-color: var(--ck-color-toolbar-border);
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 2578bf350ff..9e0d6be72b6 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
@@ -27,6 +27,12 @@
 	}
 
 	@mixin ck-media-phone {
+		@mixin ck-dir ltr {
+			& > :not(:first-child) {
+				margin-left: 0;
+			}
+		}
+
 		padding: 0;
 		width: calc(.8 * var(--ck-input-text-width));
 
@@ -49,10 +55,6 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
-
-				&:first-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 
 			@mixin ck-dir rtl {

From 64fa3ccfcf4ad9bbb10c4c68fe0ce32f6a40545c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Fri, 9 Oct 2020 09:04:41 +0200
Subject: [PATCH 02/14] Added comment

---
 packages/ckeditor5-link/theme/linkform.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index 526d0cde69b..e1bf51255f8 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/packages/ckeditor5-link/theme/linkform.css
@@ -36,6 +36,9 @@
 			margin-top: calc(var(--ck-spacing-large) + var(--ck-spacing-extra-tiny));
 			margin-bottom: var(--ck-spacing-small);
 
+			/*
+			 * To fill empty space between top border created by adjacent buttons
+			 */
 			&::before {
 				content: ".";
 				display: inline-block;

From 856ea72c16002fe8fb83681010c2dd2fee2b8d26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Fri, 9 Oct 2020 11:08:57 +0200
Subject: [PATCH 03/14] Refactoring

---
 packages/ckeditor5-link/src/ui/linkformview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index 87ce8e1d1b4..41400dcc549 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/packages/ckeditor5-link/src/ui/linkformview.js
@@ -12,6 +12,7 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
+import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
 import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
@@ -24,7 +25,6 @@ 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 ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 /**
  * The link form view controller class.

From 7c730168ae667b25f3bcf74160f03dcd8b3d4e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 12 Oct 2020 15:17:29 +0200
Subject: [PATCH 04/14] Revert "Refactoring"

This reverts commit 856ea72c16002fe8fb83681010c2dd2fee2b8d26.
---
 packages/ckeditor5-link/src/ui/linkformview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index 41400dcc549..87ce8e1d1b4 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/packages/ckeditor5-link/src/ui/linkformview.js
@@ -12,7 +12,6 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
-import ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
 import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
@@ -25,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 ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 /**
  * The link form view controller class.

From a2001d52ea1cb6219cfc45ee9b978cb69972a323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 12 Oct 2020 15:17:47 +0200
Subject: [PATCH 05/14] Revert "Added comment"

This reverts commit 64fa3ccfcf4ad9bbb10c4c68fe0ce32f6a40545c.
---
 packages/ckeditor5-link/theme/linkform.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index e1bf51255f8..526d0cde69b 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/packages/ckeditor5-link/theme/linkform.css
@@ -36,9 +36,6 @@
 			margin-top: calc(var(--ck-spacing-large) + var(--ck-spacing-extra-tiny));
 			margin-bottom: var(--ck-spacing-small);
 
-			/*
-			 * To fill empty space between top border created by adjacent buttons
-			 */
 			&::before {
 				content: ".";
 				display: inline-block;

From 0c25b60b8a60efa6f97e998ec686ef7d6d1f5566 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 12 Oct 2020 15:18:05 +0200
Subject: [PATCH 06/14] Revert "Buttons separators in RWD mobile should not be
 full height"

This reverts commit 5d22fa5f9fc46efab75234b26218fe5ef6891725.
---
 .../ckeditor5-link/src/ui/linkformview.js     |  4 ---
 .../ckeditor5-link/tests/ui/linkformview.js   |  8 ++----
 packages/ckeditor5-link/theme/linkform.css    | 27 +------------------
 .../theme/ckeditor5-link/linkform.css         | 10 +++----
 4 files changed, 7 insertions(+), 42 deletions(-)

diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index 87ce8e1d1b4..e20a747e8d0 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/packages/ckeditor5-link/src/ui/linkformview.js
@@ -24,7 +24,6 @@ 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 ToolbarSeparatorView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarseparatorview';
 
 /**
  * The link form view controller class.
@@ -86,8 +85,6 @@ export default class LinkFormView extends View {
 		 */
 		this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
 
-		this.separatorView = new ToolbarSeparatorView();
-
 		/**
 		 * A collection of {@link module:ui/button/switchbuttonview~SwitchButtonView},
 		 * which corresponds to {@link module:link/linkcommand~LinkCommand#manualDecorators manual decorators}
@@ -334,7 +331,6 @@ export default class LinkFormView extends View {
 		}
 
 		children.add( this.saveButtonView );
-		children.add( this.separatorView );
 		children.add( this.cancelButtonView );
 
 		return children;
diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js
index b478e08d925..402274d89c7 100644
--- a/packages/ckeditor5-link/tests/ui/linkformview.js
+++ b/packages/ckeditor5-link/tests/ui/linkformview.js
@@ -45,17 +45,14 @@ describe( 'LinkFormView', () => {
 		it( 'should create child views', () => {
 			expect( view.urlInputView ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
-			expect( view.separatorView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 
 			expect( view.saveButtonView.element.classList.contains( 'ck-button-save' ) ).to.be.true;
-			expect( view.separatorView.element.classList.contains( 'ck-toolbar__separator' ) ).to.be.true;
 			expect( view.cancelButtonView.element.classList.contains( 'ck-button-cancel' ) ).to.be.true;
 
 			expect( view.children.get( 0 ) ).to.equal( view.urlInputView );
 			expect( view.children.get( 1 ) ).to.equal( view.saveButtonView );
-			expect( view.children.get( 2 ) ).to.equal( view.separatorView );
-			expect( view.children.get( 3 ) ).to.equal( view.cancelButtonView );
+			expect( view.children.get( 2 ) ).to.equal( view.cancelButtonView );
 		} );
 
 		it( 'should create #focusTracker instance', () => {
@@ -97,8 +94,7 @@ describe( 'LinkFormView', () => {
 
 			it( 'has button views', () => {
 				expect( view.template.children[ 0 ].get( 1 ) ).to.equal( view.saveButtonView );
-				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.separatorView );
-				expect( view.template.children[ 0 ].get( 3 ) ).to.equal( view.cancelButtonView );
+				expect( view.template.children[ 0 ].get( 2 ) ).to.equal( view.cancelButtonView );
 			} );
 		} );
 	} );
diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index 526d0cde69b..091b35fbc8f 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/packages/ckeditor5-link/theme/linkform.css
@@ -20,32 +20,7 @@
 		}
 
 		& .ck-button {
-			flex-grow: 1;
-		}
-
-		& .ck-toolbar__separator {
-			align-self: stretch;
-			width: 1px;
-			min-width: 1px;
-			background: var(--ck-color-toolbar-border);
-
-			/*
-			 * These margins make the separators look better in balloon toolbars (when aligned with the "tip").
-			 * See https://github.com/ckeditor/ckeditor5/issues/7493.
-			 */
-			margin-top: calc(var(--ck-spacing-large) + var(--ck-spacing-extra-tiny));
-			margin-bottom: var(--ck-spacing-small);
-
-			&::before {
-				content: ".";
-				display: inline-block;
-				position: relative;
-				top: -5px;
-				width: 1px;
-				height: 1px;
-				color: var(--ck-color-base-background);
-				background-color: var(--ck-color-toolbar-border);
-			}
+			flex-basis: 50%;
 		}
 	}
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 9e0d6be72b6..2578bf350ff 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
@@ -27,12 +27,6 @@
 	}
 
 	@mixin ck-media-phone {
-		@mixin ck-dir ltr {
-			& > :not(:first-child) {
-				margin-left: 0;
-			}
-		}
-
 		padding: 0;
 		width: calc(.8 * var(--ck-input-text-width));
 
@@ -55,6 +49,10 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
+
+				&:first-of-type {
+					border-right: 1px solid var(--ck-color-base-border);
+				}
 			}
 
 			@mixin ck-dir rtl {

From 11f14a324ee2b38d5e6140dac538fa2ac36b24a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 12 Oct 2020 16:18:46 +0200
Subject: [PATCH 07/14] Change link tooltip button separator design

---
 packages/ckeditor5-link/theme/linkactions.css         | 11 +++++++++++
 packages/ckeditor5-link/theme/linkform.css            | 11 +++++++++++
 .../theme/ckeditor5-link/linkactions.css              |  4 ----
 .../theme/ckeditor5-link/linkform.css                 |  8 --------
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/ckeditor5-link/theme/linkactions.css b/packages/ckeditor5-link/theme/linkactions.css
index 52e3464f3bf..a55fbf40780 100644
--- a/packages/ckeditor5-link/theme/linkactions.css
+++ b/packages/ckeditor5-link/theme/linkactions.css
@@ -27,6 +27,17 @@
 
 		& .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;
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index 091b35fbc8f..7d22705753a 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/packages/ckeditor5-link/theme/linkform.css
@@ -21,6 +21,17 @@
 
 		& .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;
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
index bcf638e238a..b9950fa7f2c 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
@@ -92,10 +92,6 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
-
-				&:first-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 
 			@mixin ck-dir rtl {
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 2578bf350ff..952ef04a31d 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
@@ -49,10 +49,6 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
-
-				&:first-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 
 			@mixin ck-dir rtl {
@@ -93,10 +89,6 @@
 
 		@mixin ck-dir ltr {
 			margin-left: 0;
-
-			&:first-of-type {
-				border-right: 1px solid var(--ck-color-base-border);
-			}
 		}
 
 		@mixin ck-dir rtl {

From 96011f918e1ebb5af5be809ed5b7aa9a33f639cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Tue, 13 Oct 2020 09:35:51 +0200
Subject: [PATCH 08/14] Change link tooltip button separator design for manual
 decorators

---
 .../theme/ckeditor5-link/linkform.css                 | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 952ef04a31d..cce6ce95221 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
@@ -98,6 +98,17 @@
 				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)`. */

From f728cb06d1b21c526d4ee6640fe0da2dc5d657b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Sun, 18 Oct 2020 21:32:18 +0200
Subject: [PATCH 09/14] Changed button separator length for text alternative
 form

---
 .../ckeditor5-image/theme/textalternativeform.css     | 11 +++++++++++
 .../theme/ckeditor5-image/textalternativeform.css     |  4 ----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ckeditor5-image/theme/textalternativeform.css b/packages/ckeditor5-image/theme/textalternativeform.css
index 1cf0911b4bd..f8f6b480210 100644
--- a/packages/ckeditor5-image/theme/textalternativeform.css
+++ b/packages/ckeditor5-image/theme/textalternativeform.css
@@ -27,6 +27,17 @@
 
 		& .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;
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
index 2f9c332adfd..a0525e5f0c0 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
@@ -49,10 +49,6 @@
 
 			@mixin ck-dir ltr {
 				margin-left: 0;
-
-				&:first-of-type {
-					border-right: 1px solid var(--ck-color-base-border);
-				}
 			}
 
 			@mixin ck-dir rtl {

From 9e5a7a72b9475bc04eb592e7043e7bc84394a74b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Sun, 18 Oct 2020 23:30:26 +0200
Subject: [PATCH 10/14] Moving new separator styles to 'ckeditor5-ui'

---
 .../ui/textalternativeformview.js             |  4 ++-
 .../theme/textalternativeform.css             | 11 --------
 .../ckeditor5-link/src/ui/linkactionsview.js  |  4 ++-
 .../ckeditor5-link/src/ui/linkformview.js     |  3 +-
 packages/ckeditor5-link/theme/linkactions.css | 11 --------
 packages/ckeditor5-link/theme/linkform.css    | 11 --------
 .../src/ui/mediaformview.js                   |  4 ++-
 .../theme/ckeditor5-link/linkform.css         | 11 --------
 .../theme/ckeditor5-media-embed/mediaform.css |  4 ---
 .../responsive-form/responsiveform.css        | 16 +++++++++++
 .../responsive-form/responsiveform.css        | 28 +++++++++++++++++++
 11 files changed, 55 insertions(+), 52 deletions(-)
 create mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
 create mode 100644 packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css

diff --git a/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js
index 5427970b79e..c4f1c042642 100644
--- a/packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js
+++ b/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
diff --git a/packages/ckeditor5-image/theme/textalternativeform.css b/packages/ckeditor5-image/theme/textalternativeform.css
index f8f6b480210..1cf0911b4bd 100644
--- a/packages/ckeditor5-image/theme/textalternativeform.css
+++ b/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;
-			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-link/src/ui/linkactionsview.js b/packages/ckeditor5-link/src/ui/linkactionsview.js
index 8ca27dc56df..09eeb5825d6 100644
--- a/packages/ckeditor5-link/src/ui/linkactionsview.js
+++ b/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
diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index e20a747e8d0..135bc54e067 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/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' );
diff --git a/packages/ckeditor5-link/theme/linkactions.css b/packages/ckeditor5-link/theme/linkactions.css
index a55fbf40780..52e3464f3bf 100644
--- a/packages/ckeditor5-link/theme/linkactions.css
+++ b/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;
-			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-link/theme/linkform.css b/packages/ckeditor5-link/theme/linkform.css
index 7d22705753a..091b35fbc8f 100644
--- a/packages/ckeditor5-link/theme/linkform.css
+++ b/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;
-			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-media-embed/src/ui/mediaformview.js b/packages/ckeditor5-media-embed/src/ui/mediaformview.js
index b48e0a09c5e..04bf9c42c41 100644
--- a/packages/ckeditor5-media-embed/src/ui/mediaformview.js
+++ b/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'
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index cce6ce95221..952ef04a31d 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/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)`. */
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css
index 56b7cf74da1..f57e77f52c6 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css
+++ b/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 {
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
new file mode 100644
index 00000000000..4126ef7d472
--- /dev/null
+++ b/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);
+		}
+	}
+}
diff --git a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
new file mode 100644
index 00000000000..f927d8e752d
--- /dev/null
+++ b/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;
+		}
+	}
+}

From 9e0065e9cb49df51fe1b958f12f0147edd37d766 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 19 Oct 2020 13:42:37 +0200
Subject: [PATCH 11/14] Moving new separator styles to 'ckeditor5-ui'

---
 .../ckeditor5-link/src/ui/linkformview.js     |  2 +-
 .../ckeditor5-image/textalternativeform.css   | 63 ----------------
 .../theme/ckeditor5-link/linkactions.css      | 21 ------
 .../theme/ckeditor5-link/linkform.css         | 57 ---------------
 .../theme/ckeditor5-media-embed/mediaform.css | 67 -----------------
 .../responsive-form/responsiveform.css        | 71 ++++++++++++++++---
 .../responsive-form/responsiveform.css        | 11 ++-
 7 files changed, 68 insertions(+), 224 deletions(-)
 delete mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
 delete mode 100644 packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css

diff --git a/packages/ckeditor5-link/src/ui/linkformview.js b/packages/ckeditor5-link/src/ui/linkformview.js
index 135bc54e067..0269f0e666e 100644
--- a/packages/ckeditor5-link/src/ui/linkformview.js
+++ b/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( {
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
deleted file mode 100644
index a0525e5f0c0..00000000000
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
+++ /dev/null
@@ -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);
-				}
-			}
-		}
-	}
-}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
index b9950fa7f2c..b4f269fcd01 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
+++ b/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);
-				}
 			}
 		}
 	}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
index 952ef04a31d..686747e8402 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
+++ b/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.
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css
deleted file mode 100644
index f57e77f52c6..00000000000
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-media-embed/mediaform.css
+++ /dev/null
@@ -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);
-				}
-			}
-		}
-	}
-}
diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
index 4126ef7d472..a0bbcb0bd8f 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
+++ b/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);
+			}
 		}
 	}
 }
diff --git a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
index f927d8e752d..7574bf65d64 100644
--- a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
+++ b/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;

From ec432cab5370b43a26784a92ccde1ffdae2d994e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 19 Oct 2020 14:23:38 +0200
Subject: [PATCH 12/14] Added copyright

---
 .../components/responsive-form/responsiveform.css            | 5 +++++
 .../theme/components/responsive-form/responsiveform.css      | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
index a0bbcb0bd8f..bc027544362 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
@@ -1,3 +1,8 @@
+/*
+ * 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";
 
diff --git a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
index 7574bf65d64..26113e44745 100644
--- a/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
+++ b/packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
@@ -1,3 +1,8 @@
+/*
+ * 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";
 
 .ck-vertical-form .ck-button::after {

From af1aab9dbbcc68e881fb278328c2778f1e6f757c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Mon, 19 Oct 2020 22:15:12 +0200
Subject: [PATCH 13/14] Added tests

---
 .../tests/imagetextalternative/ui/textalternativeformview.js     | 1 +
 packages/ckeditor5-link/tests/ui/linkactionsview.js              | 1 +
 packages/ckeditor5-link/tests/ui/linkformview.js                 | 1 +
 packages/ckeditor5-media-embed/tests/ui/mediaformview.js         | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
index 6d1993a5595..96b5879d25d 100644
--- a/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
+++ b/packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
@@ -29,6 +29,7 @@ describe( 'TextAlternativeFormView', () => {
 
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-text-alternative-form' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.be.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 
diff --git a/packages/ckeditor5-link/tests/ui/linkactionsview.js b/packages/ckeditor5-link/tests/ui/linkactionsview.js
index 974d8a4132f..07f42c09201 100644
--- a/packages/ckeditor5-link/tests/ui/linkactionsview.js
+++ b/packages/ckeditor5-link/tests/ui/linkactionsview.js
@@ -26,6 +26,7 @@ describe( 'LinkActionsView', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-link-actions' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 
diff --git a/packages/ckeditor5-link/tests/ui/linkformview.js b/packages/ckeditor5-link/tests/ui/linkformview.js
index 402274d89c7..876eb259a0c 100644
--- a/packages/ckeditor5-link/tests/ui/linkformview.js
+++ b/packages/ckeditor5-link/tests/ui/linkformview.js
@@ -39,6 +39,7 @@ describe( 'LinkFormView', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-link-form' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 
diff --git a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
index c5a28ea26db..629472aa510 100644
--- a/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
+++ b/packages/ckeditor5-media-embed/tests/ui/mediaformview.js
@@ -35,6 +35,7 @@ describe( 'MediaFormView', () => {
 		it( 'should create element from template', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.true;
 			expect( view.element.classList.contains( 'ck-media-form' ) ).to.true;
+			expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
 			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 

From 172a5440d7b330d6d89733ef36d2fd9e0e98f417 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kwa=C5=9Bnik?= <kwach2000@gmail.com>
Date: Tue, 20 Oct 2020 10:14:35 +0200
Subject: [PATCH 14/14] Added comment

---
 .../ckeditor5-ui/components/responsive-form/responsiveform.css   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
index bc027544362..e426a9d9c8c 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/responsive-form/responsiveform.css
@@ -48,6 +48,7 @@
 			}
 		}
 
+		/* 'button' selector must be used because those styles shouldn't be added to other elements, like 'a'. Example in LinkActionsView. */
 		& button.ck-button {
 			padding: var(--ck-spacing-standard);
 			margin-top: var(--ck-spacing-standard);