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

Feature: Improved responsiveness of the form and actions views in narrow viewports (see ckeditor/ckeditor5#416).
ckeditor · Oct 26, 2018 · 74dbe69 · 74dbe69
2 parents 9faf4e1 + 1f1438f
commit 74dbe69
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/theme/linkactions.css b/theme/linkactions.css
@@ -3,12 +3,30 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css";
+
 .ck.ck-link-actions {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+
 	& .ck-link-actions__preview {
 		display: inline-block;
 
 		& .ck-button__label {
 			overflow: hidden;
 		}
 	}
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-link-actions__preview {
+			flex-basis: 100%;
+		}
+
+		& .ck-button:not(.ck-link-actions__preview) {
+			flex-basis: 50%;
+		}
+	}
 }
diff --git a/theme/linkform.css b/theme/linkform.css
@@ -3,12 +3,26 @@
  * For licensing, see LICENSE.md.
  */
 
+@import "@ckeditor/ckeditor5-theme-lark/theme/mixins/_rwd.css";
+
 .ck.ck-link-form {
-	& .ck-labeled-input {
-		display: inline-block;
-	}
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
 
 	& .ck-label {
 		display: none;
 	}
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-labeled-input {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			flex-basis: 50%;
+		}
+	}
 }