Parcourir la source

Made the image text alternative, link and media embed UI responsive in narrow screens.

Aleksander Nowodzinski il y a 7 ans
Parent
commit
738476f758

+ 29 - 0
packages/ckeditor5-theme-lark/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,31 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-mobile {
+		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 {
+			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);
+			}
+		}
+	}
 }

+ 29 - 1
packages/ckeditor5-theme-lark/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,34 @@
 		outline: none;
 	}
 
-	& > :not(:first-child) {
+	& .ck-button:not(.ck-link-actions__preview) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-mobile {
+		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) {
+			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);
+			}
+		}
+	}
 }

+ 30 - 0
packages/ckeditor5-theme-lark/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,32 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-mobile {
+		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 {
+			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);
+			}
+		}
+	}
 }
+

+ 29 - 0
packages/ckeditor5-theme-lark/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,31 @@
 	& > :not(:first-child) {
 		margin-left: var(--ck-spacing-standard);
 	}
+
+	@mixin ck-media-mobile {
+		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 {
+			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);
+			}
+		}
+	}
 }