Răsfoiți Sursa

Made the link UI responsive when the screen is narrow.

Aleksander Nowodzinski 7 ani în urmă
părinte
comite
e5a18effad

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

@@ -3,7 +3,13 @@
  * 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;
 
@@ -11,4 +17,16 @@
 			overflow: hidden;
 		}
 	}
+
+	@mixin ck-media-mobile {
+		flex-wrap: wrap;
+
+		& .ck-link-actions__preview {
+			flex-basis: 100%;
+		}
+
+		& .ck-button:not(.ck-link-actions__preview) {
+			flex-basis: 50%;
+		}
+	}
 }

+ 17 - 3
packages/ckeditor5-link/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-mobile {
+		flex-wrap: wrap;
+
+		& .ck-labeled-input {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			flex-basis: 50%;
+		}
+	}
 }