8
0

editor.scss 2.0 KB

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