8
0

widget.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  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. :root {
  6. --ck-color-resizer: var(--ck-color-focus-border);
  7. --ck-resizer-size: 10px;
  8. --ck-resizer-border-width: 1px;
  9. --ck-resizer-border-radius: 2px;
  10. /* Set the resizer with a 50% offset. */
  11. --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
  12. --ck-resizer-tooltip-offset: 10px;
  13. --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
  14. --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
  15. }
  16. .ck .ck-widget.ck-widget_with-selection-handle {
  17. /* Make the widget wrapper a relative positioning container for the drag handle. */
  18. position: relative;
  19. & .ck-widget__selection-handle {
  20. position: absolute;
  21. & .ck-icon {
  22. /* Make sure the icon in not a subject to font-size or line-height to avoid
  23. unnecessary spacing around it. */
  24. display: block;
  25. }
  26. }
  27. /* Show the selection handle on mouse hover over the widget. */
  28. &:hover {
  29. & .ck-widget__selection-handle {
  30. visibility: visible;
  31. }
  32. }
  33. /* Show the selection handle when the widget is selected. */
  34. &.ck-widget_selected .ck-widget__selection-handle {
  35. visibility: visible;
  36. }
  37. }
  38. .ck .ck-size-view {
  39. background: var(--ck-color-resizer-tooltip-background);
  40. color: var(--ck-color-resizer-tooltip-text);
  41. border: 1px solid var(--ck-color-resizer-tooltip-text);
  42. border-radius: var(--ck-resizer-border-radius);
  43. font-size: var(--ck-font-size-tiny);
  44. display: block;
  45. padding: var(--ck-spacing-small);
  46. &.ck-orientation-top-left,
  47. &.ck-orientation-top-right,
  48. &.ck-orientation-bottom-right,
  49. &.ck-orientation-bottom-left {
  50. position: absolute;
  51. }
  52. &.ck-orientation-top-left {
  53. top: var( --ck-resizer-tooltip-offset );
  54. left: var( --ck-resizer-tooltip-offset );
  55. }
  56. &.ck-orientation-top-right {
  57. top: var( --ck-resizer-tooltip-offset );
  58. right: var( --ck-resizer-tooltip-offset );
  59. }
  60. &.ck-orientation-bottom-right {
  61. bottom: var( --ck-resizer-tooltip-offset );
  62. right: var( --ck-resizer-tooltip-offset );
  63. }
  64. &.ck-orientation-bottom-left {
  65. bottom: var( --ck-resizer-tooltip-offset );
  66. left: var( --ck-resizer-tooltip-offset );
  67. }
  68. }