Merge pull request #204 from ckeditor/t/ckeditor5/416

Feature: Introduced the ck-media-phone RWD mixin that outputs a @media query. Improved responsiveness of media embed, link, and image form views in narrow viewports (see ckeditor/ckeditor5#416).

theme/ckeditor5-image/textalternativeform.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "../mixins/_rwd.css";
+
 .ck.ck-text-alternative-form {
 	padding: var(--ck-spacing-standard);
 
@@ -14,4 +16,32 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-phone {
+		padding: 0;
+		width: calc(.8 * var(--ck-input-text-width));
+
+		& .ck-labeled-input {
+			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);
+			margin-left: 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);
+			}
+		}
+	}
 }

theme/ckeditor5-link/linkactions.css

@@ -7,6 +7,7 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_unselectable.css";
 @import "../mixins/_focus.css";
 @import "../mixins/_shadow.css";
+@import "../mixins/_rwd.css";
 
 .ck.ck-link-actions {
 	padding: var(--ck-spacing-standard);
@@ -55,7 +56,35 @@
 		outline: none;
 	}
 
-	& > :not(:first-child) {
+	& .ck-button:not(.ck-link-actions__preview) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@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;
+
+			& .ck-button__label {
+				min-width: 0;
+				max-width: 100%;
+			}
+		}
+
+		& .ck-button:not(.ck-link-actions__preview) {
+			padding: var(--ck-spacing-standard);
+			margin-top: var(--ck-spacing-standard);
+			margin-left: 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);
+			}
+		}
+	}
 }

theme/ckeditor5-link/linkform.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "../mixins/_rwd.css";
+
 .ck.ck-link-form {
 	padding: var(--ck-spacing-standard);
 
@@ -14,4 +16,33 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-phone {
+		padding: 0;
+		width: calc(.8 * var(--ck-input-text-width));
+
+		& .ck-labeled-input {
+			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);
+			margin-left: 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);
+			}
+		}
+	}
 }
+

theme/ckeditor5-media-embed/mediaform.css

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "../mixins/_rwd.css";
+
 .ck.ck-media-form {
 	padding: var(--ck-spacing-standard);
 
@@ -13,4 +15,37 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-phone {
+		padding: 0;
+		width: calc(.8 * var(--ck-input-text-width));
+
+		& .ck-labeled-input {
+			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-input__error {
+				white-space: normal;
+			}
+		}
+
+		& .ck-button {
+			padding: var(--ck-spacing-standard);
+			margin-top: var(--ck-spacing-standard);
+			margin-left: 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);
+			}
+		}
+	}
 }

theme/mixins/_rwd.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+@define-mixin ck-media-phone {
+	@media screen and (max-width: 600px) {
+		@mixin-content;
+	}
+}