editor.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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. // Don't display tooltips for disabled buttons in the toolbar,
  20. // they're unavailable anyway.
  21. &.ck-disabled {
  22. @include ck-tooltip_disabled();
  23. }
  24. }
  25. .ck-dropdown__button {
  26. border-width: 1px;
  27. &:not(:hover):not(:focus):not(.ck-on) {
  28. background: ck-color( 'background' );
  29. }
  30. }
  31. }
  32. // TODO/NOTE: This along with _editor helper will probably become a creator theme.
  33. @include ck-editor {
  34. @include ck-rounded-corners();
  35. // All the elements within `.ck-editor` are positioned relatively to it.
  36. // If any element needs to be positioned with respect to the <body>, etc.,
  37. // it must land outside of the `.ck-editor` in DOM.
  38. position: relative;
  39. .ck-editor__top {
  40. .ck-toolbar {
  41. @include ck-editor-toolbar();
  42. border-top: 0;
  43. border-left: 0;
  44. border-right: 0;
  45. }
  46. }
  47. .ck-editor__main {
  48. background: ck-color();
  49. }
  50. .ck-editor__bottom {
  51. border-bottom: 0;
  52. border-left: 0;
  53. border-right: 0;
  54. padding: ck-spacing();
  55. }
  56. .ck-editor__editable {
  57. &.ck-focused {
  58. @include ck-focus-outline();
  59. }
  60. &_inline {
  61. overflow: auto;
  62. padding: 0 ck-spacing();
  63. }
  64. }
  65. }
  66. .ck-editor,
  67. .ck-editor-bottom {
  68. background: ck-color( 'foreground' );
  69. border: 1px solid ck-border-color( 'foreground' );
  70. }