From d00ad558beba834caeee106c964acfb89475e68f Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 12 Oct 2018 15:00:12 +0200 Subject: [PATCH 1/3] Made the link UI responsive when the screen is narrow. --- theme/linkactions.css | 18 ++++++++++++++++++ theme/linkform.css | 20 +++++++++++++++++--- 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/theme/linkactions.css b/theme/linkactions.css index bf24f18..48ee990 100644 --- a/theme/linkactions.css +++ b/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%; + } + } } diff --git a/theme/linkform.css b/theme/linkform.css index 5478210..871e65a 100644 --- 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-mobile { + flex-wrap: wrap; + + & .ck-labeled-input { + flex-basis: 100%; + } + + & .ck-button { + flex-basis: 50%; + } + } } From a8409691d4c50b96dd6290d11570b3e9d2608985 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 12 Oct 2018 15:04:02 +0200 Subject: [PATCH 2/3] Renamed the media query mixin. --- theme/linkactions.css | 2 +- theme/linkform.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/linkactions.css b/theme/linkactions.css index 48ee990..58dec69 100644 --- a/theme/linkactions.css +++ b/theme/linkactions.css @@ -18,7 +18,7 @@ } } - @mixin ck-media-mobile { + @mixin ck-media-narrow { flex-wrap: wrap; & .ck-link-actions__preview { diff --git a/theme/linkform.css b/theme/linkform.css index 871e65a..7e1b35f 100644 --- a/theme/linkform.css +++ b/theme/linkform.css @@ -14,7 +14,7 @@ display: none; } - @mixin ck-media-mobile { + @mixin ck-media-narrow { flex-wrap: wrap; & .ck-labeled-input { From 636291e9d161febe53e8a891652c99692b44aad5 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 15 Oct 2018 10:54:58 +0200 Subject: [PATCH 3/3] Renamed media mixin ck-media-narrow->ck-media-phone. --- theme/linkactions.css | 2 +- theme/linkform.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/theme/linkactions.css b/theme/linkactions.css index 58dec69..ea097bf 100644 --- a/theme/linkactions.css +++ b/theme/linkactions.css @@ -18,7 +18,7 @@ } } - @mixin ck-media-narrow { + @mixin ck-media-phone { flex-wrap: wrap; & .ck-link-actions__preview { diff --git a/theme/linkform.css b/theme/linkform.css index 7e1b35f..b3f3b02 100644 --- a/theme/linkform.css +++ b/theme/linkform.css @@ -14,7 +14,7 @@ display: none; } - @mixin ck-media-narrow { + @mixin ck-media-phone { flex-wrap: wrap; & .ck-labeled-input {