From 115faebee63b5fb920d5b60c586346249ac1d4f7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 2 Apr 2019 09:14:44 +0100 Subject: [PATCH 1/3] Fix the text editor styles after the mixins reset --- .../edit-post/src/components/text-editor/style.scss | 4 ++++ .../editor/src/components/post-text-editor/style.scss | 11 ++++++----- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index e925344dc9e3a..eaf28918ea5da 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -32,6 +32,10 @@ border: $border-width solid $light-gray-500; margin-bottom: 4px; padding: $block-padding; + + &:focus { + border: $border-width solid $light-gray-500; + } } textarea:hover, diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index fd1c77195cc2f..d2ef1f124186a 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -1,5 +1,5 @@ .editor-post-text-editor { - border: $border-width solid $light-gray-500; + border: $border-width solid $light-gray-500 !important; display: block; margin: 0 0 2em; width: 100%; @@ -8,6 +8,7 @@ overflow: hidden; font-family: $editor-html-font; line-height: 150%; + border-radius: 0 !important; /* Fonts smaller than 16px causes mobile safari to zoom. */ font-size: $mobile-text-min-font-size; @@ -17,11 +18,11 @@ &:hover, &:focus { - border: $border-width solid $light-gray-500; - box-shadow: none; + border: $border-width solid $light-gray-500 !important; + box-shadow: none !important; // Emulate the effect used on the post title. - outline: $border-width solid $light-gray-500; - outline-offset: -2px; + outline: $border-width solid $light-gray-500 !important; + outline-offset: -2px !important; } } From 500b18b29190ce184bfc1650c1c228d8aadf51a0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 2 Apr 2019 10:26:55 +0100 Subject: [PATCH 2/3] Fix font sizes and family for the text editor --- packages/editor/src/components/post-text-editor/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index d2ef1f124186a..3043be342e78d 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -6,14 +6,14 @@ box-shadow: none; resize: none; overflow: hidden; - font-family: $editor-html-font; + font-family: $editor-html-font !important; line-height: 150%; border-radius: 0 !important; /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; + font-size: $mobile-text-min-font-size !important; @include break-small { - font-size: $text-editor-font-size; + font-size: $text-editor-font-size !important; } &:hover, From 161c7644928da4cf6f53012a3eed8244d4deb8f5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 2 Apr 2019 13:25:32 +0100 Subject: [PATCH 3/3] Fix the hover/focused style of the text editor --- packages/editor/src/components/post-text-editor/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index 3043be342e78d..f8f1c91c67ff0 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -18,10 +18,9 @@ &:hover, &:focus { - border: $border-width solid $light-gray-500 !important; + border: $border-width solid $light-gray-800 !important; box-shadow: none !important; // Emulate the effect used on the post title. - outline: $border-width solid $light-gray-500 !important; outline-offset: -2px !important; } }