editor.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  2. // For licensing, see LICENSE.md or http://ckeditor.com/license
  3. @mixin ck-editor-toolbar {
  4. // Toolbars should not react to ck-rounded-corners() mixin.
  5. border-radius: 0;
  6. .ck-button {
  7. border-width: 0;
  8. // Make sure the next button does not overlap focused one.
  9. &:focus {
  10. z-index: 1;
  11. }
  12. &:not(:hover):not(:focus):not(.ck-on),
  13. &.ck-disabled {
  14. background: ck-color( 'foreground' );
  15. }
  16. &.ck-on {
  17. @include ck-button-colors( 'foreground', -10 );
  18. }
  19. }
  20. .ck-dropdown__button {
  21. border-width: 1px;
  22. &:not(:hover):not(:focus):not(.ck-on) {
  23. background: ck-color( 'background' );
  24. }
  25. }
  26. }
  27. // TODO/NOTE: This along with _editor helper will probably become a creator theme.
  28. @include ck-editor {
  29. @include ck-rounded-corners();
  30. // All the elements within `.ck-editor` are positioned relatively to it.
  31. // If any element needs to be positioned with respect to the <body>, etc.,
  32. // it must land outside of the `.ck-editor` in DOM.
  33. position: relative;
  34. .ck-editor__top {
  35. .ck-toolbar {
  36. @include ck-editor-toolbar();
  37. border-top: 0;
  38. border-left: 0;
  39. border-right: 0;
  40. }
  41. }
  42. .ck-editor__main {
  43. background: ck-color();
  44. }
  45. .ck-editor__bottom {
  46. border-bottom: 0;
  47. border-left: 0;
  48. border-right: 0;
  49. padding: ck-spacing();
  50. }
  51. .ck-editor__editable {
  52. &.ck-focused {
  53. @include ck-focus-ring( 'outline' );
  54. @include ck-box-shadow( $ck-inner-shadow );
  55. }
  56. &_inline {
  57. overflow: auto;
  58. padding: 0 ck-spacing();
  59. }
  60. }
  61. }
  62. .ck-editor,
  63. .ck-editor-bottom {
  64. background: ck-color( 'foreground' );
  65. border: 1px solid ck-border-color( 'foreground' );
  66. }