Apply Text area (mainly WYSIWYG editor) style updates

[zolhorvath]

Issue

This PR fix #21.

Screenshots before/after (now Chrome on OSX only)

Todo

Testing instructions

• Add https://github.com/zolhorvath/seven-refresh/ as drupal-profile (sevenrefresh) to a Drupal project.
• Remove core/themes/seven
• Make sure that this theme is installed to themes/custom/seven
• Symlink core/misc to themes/custom/misc
• Run yarn && yarn build:css in the theme's root
• Install a Drupal with profile sevenrefresh. This will enable additional field types such as telephone or date_range and enable styleguide drupal module as well

After that Drupal is installed, Styleguide will be the front page and you'll have the test form at /contact/textarea.

[zolhorvath]

@lauriii, @ckrina: this is ready for the review.

Screenshots:

Textarea screenshots - Ubuntu and Windows.zip Textarea screenshots - mobile and OSX.zip

[zolhorvath]

Disabled editor has to be fixed, see #74

[zolhorvath]

@ckrina I added an improvement for the case when Claro is the front end theme. (I think it's a very limited use case, but maybe it's worth to do so.)

However, as I see, you're using Bartik as a front end theme. Bartik provides CKEditor stylesheets as well, an in that case, CKEditor inputs are using those to provide a visual feedback for editors about how the text looks on front end theme, see the API doc about this feature (at API features / CKEditor iframe CSS / Front-end theme CSS).

[ckrina]

Thanks @zolhorvath ! I just changed the frontend theme to Claro too, but now it takes the styles from the core ckeditor modules and ends up using Arial instead of the system fonts, and it looks really strange having a text area with one font and the other with another one. Is there any way to change this?

[zolhorvath]

@ckrina did you refreshed the theme?

[ckrina]

You're right, sorry! I forgot the yarn command. The everything good for me.