widgetresize.css 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. .ck .ck-widget_with-resizer {
  6. /* Make the widget wrapper a relative positioning container for the drag handle. */
  7. position: relative;
  8. }
  9. .ck .ck-widget__resizer {
  10. display: none;
  11. position: absolute;
  12. /* The wrapper itself should not interfere with the pointer device, only the handles should. */
  13. pointer-events: none;
  14. left: 0;
  15. top: 0;
  16. outline: 1px solid var(--ck-color-resizer);
  17. }
  18. .ck-focused .ck-widget_with-resizer.ck-widget_selected {
  19. & > .ck-widget__resizer {
  20. display: block;
  21. }
  22. }
  23. .ck .ck-widget__resizer__handle {
  24. position: absolute;
  25. /* Resizers are the only UI elements that should interfere with a pointer device. */
  26. pointer-events: all;
  27. width: var(--ck-resizer-size);
  28. height: var(--ck-resizer-size);
  29. background: var(--ck-color-focus-border);
  30. border: var(--ck-resizer-border-width) solid hsl(0, 0%, 100%);
  31. border-radius: var(--ck-resizer-border-radius);
  32. &.ck-widget__resizer__handle-top-left {
  33. top: var( --ck-resizer-offset );
  34. left: var( --ck-resizer-offset );
  35. cursor: nwse-resize;
  36. }
  37. &.ck-widget__resizer__handle-top-right {
  38. top: var( --ck-resizer-offset );
  39. right: var( --ck-resizer-offset );
  40. cursor: nesw-resize;
  41. }
  42. &.ck-widget__resizer__handle-bottom-right {
  43. bottom: var( --ck-resizer-offset );
  44. right: var( --ck-resizer-offset );
  45. cursor: nwse-resize;
  46. }
  47. &.ck-widget__resizer__handle-bottom-left {
  48. bottom: var( --ck-resizer-offset );
  49. left: var( --ck-resizer-offset );
  50. cursor: nesw-resize;
  51. }
  52. }