8
0

theme.scss 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. @import '~ckeditor5-theme-lark/theme/helpers/_spacing';
  4. @import '~ckeditor5-theme-lark/theme/helpers/_colors';
  5. @import '~ckeditor5-theme-lark/theme/helpers/_rounded';
  6. @import '~ckeditor5-theme-lark/theme/helpers/_shadow';
  7. @import '~ckeditor5-theme-lark/theme/helpers/_states';
  8. // Common styles applied to all widgets.
  9. .ck-widget {
  10. margin: 10px 0;
  11. padding: 0;
  12. &.ck-widget_selected, &.ck-widget_selected:hover {
  13. outline: 2px solid #ace;
  14. }
  15. .ck-editor__editable.ck-blurred &.ck-widget_selected {
  16. outline: 2px solid #ddd;
  17. }
  18. &:hover {
  19. outline: 2px solid yellow;
  20. }
  21. }
  22. // Image widget's styles.
  23. .ck-widget.image {
  24. text-align: center;
  25. clear: both;
  26. &.image-style-side {
  27. display: inline-block;
  28. float: right;
  29. margin-left: 0.8em;
  30. }
  31. }
  32. // Textarea view.
  33. // TODO: how to define by class only without textarea
  34. textarea.ck-textarea {
  35. @include ck-rounded-corners();
  36. @include ck-box-shadow( $ck-inner-shadow );
  37. border: 1px solid ck-border-color( 'foreground' );
  38. padding: ck-spacing( 'medium' );
  39. min-width: 250px;
  40. resize: none;
  41. &:focus {
  42. @include ck-focus-ring();
  43. @include ck-box-shadow( $ck-focus-outer-shadow, $ck-inner-shadow );
  44. }
  45. }