editorui.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /*
  2. * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. @import "../../mixins/_rounded.css";
  6. @import "../../mixins/_disabled.css";
  7. @import "../../mixins/_shadow.css";
  8. @import "../../mixins/_focus.css";
  9. @import "../mixins/_button.css";
  10. .ck-editor__editable {
  11. @mixin ck-rounded-corners;
  12. &.ck-focused {
  13. @mixin ck-focus-ring;
  14. @mixin ck-box-shadow var(--ck-inner-shadow);
  15. }
  16. }
  17. .ck-editor__editable_inline {
  18. overflow: auto;
  19. padding: 0 var(--ck-spacing-standard);
  20. border: 1px solid transparent;
  21. }
  22. .ck-editor-toolbar {
  23. & .ck-button,
  24. & .ck-button:focus {
  25. border-width: 0;
  26. }
  27. & .ck-button {
  28. &:not(:hover):not(:focus):not(.ck-on),
  29. &.ck-disabled {
  30. background: var(--ck-color-editor-toolbar-background);
  31. }
  32. &.ck-on {
  33. @mixin ck-button-colors --ck-color-editor-toolbar-button-on;
  34. }
  35. }
  36. & .ck-button.ck-dropdown__button {
  37. border-width: 1px;
  38. &:not(:hover):not(:focus):not(.ck-on) {
  39. background: var(--ck-color-editor-dropdown-background);
  40. }
  41. }
  42. @nest .ck-toolbar-container & {
  43. background: var(--ck-color-editor-toolbar-background);
  44. }
  45. }
  46. /* https://github.com/ckeditor/ckeditor5-theme-lark/issues/111 */
  47. .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_n"] {
  48. &:after {
  49. border-bottom-color: var(--ck-color-editor-toolbar-background);
  50. }
  51. }
  52. .ck-toolbar-container.ck-editor-toolbar-container[class*="arrow_s"] {
  53. &:after {
  54. border-top-color: var(--ck-color-editor-toolbar-background);
  55. }
  56. }