widget.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /*
  2. * Copyright (c) 2003-2019, 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: 2px;
  9. /* Set resizer with 50% offset. */
  10. --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 1px );
  11. }
  12. .ck .ck-widget_with-resizer {
  13. /* Make the widget wrapper a relative positioning container for the drag handler. */
  14. position: relative;
  15. }
  16. .ck .ck-widget_with-resizer.ck-widget_selected {
  17. & .ck-widget__resizer-wrapper {
  18. visibility: visible;
  19. }
  20. & .ck-widget__resizer-shadow {
  21. display: block;
  22. }
  23. }
  24. .ck .ck-widget__resizer-wrapper {
  25. visibility: hidden;
  26. position: absolute;
  27. /* The wrapper itself should not interfere with pointer device */
  28. pointer-events: none;
  29. left: 0;
  30. right: 0;
  31. top: 0;
  32. bottom: 0;
  33. }
  34. .ck .ck-widget__resizer-shadow {
  35. display: none;
  36. position: absolute;
  37. left: 0;
  38. right: 0;
  39. top: 0;
  40. bottom: 0;
  41. outline: 2px solid var(--ck-color-resizer);
  42. /* @todo: remove this dirty hack. It's purpose is that shadow element should not be
  43. overlapped by elements that follow it in the DOM. */
  44. z-index: var(--ck-z-default);
  45. &.ck-widget__resizer-shadow-active {
  46. display: block;
  47. visibility: visible;
  48. }
  49. }
  50. .ck .ck-widget__resizer {
  51. position: absolute;
  52. /* Resizers are the only UI elements that should interfere with pointer device */
  53. pointer-events: all;
  54. width: var(--ck-resizer-size);
  55. height: var(--ck-resizer-size);
  56. background: var(--ck-color-focus-border);
  57. outline: var(--ck-resizer-border-width) solid #fff;
  58. &.ck-widget__resizer-top-left {
  59. top: var( --ck-resizer-offset );
  60. left: var( --ck-resizer-offset );
  61. cursor: nwse-resize;
  62. }
  63. &.ck-widget__resizer-top-right {
  64. top: var( --ck-resizer-offset );
  65. right: var( --ck-resizer-offset );
  66. cursor: nesw-resize;
  67. }
  68. &.ck-widget__resizer-bottom-right {
  69. bottom: var( --ck-resizer-offset );
  70. right: var( --ck-resizer-offset );
  71. cursor: nwse-resize;
  72. }
  73. &.ck-widget__resizer-bottom-left {
  74. bottom: var( --ck-resizer-offset );
  75. left: var( --ck-resizer-offset );
  76. cursor: nesw-resize;
  77. }
  78. }
  79. .ck .ck-widget.ck-widget_with-selection-handler {
  80. /* Make the widget wrapper a relative positioning container for the drag handler. */
  81. position: relative;
  82. /* Show the selection handler on mouse hover over the widget. */
  83. &:hover {
  84. & .ck-widget__selection-handler {
  85. visibility: visible;
  86. }
  87. }
  88. & .ck-widget__selection-handler {
  89. position: absolute;
  90. & .ck-icon {
  91. /* Make sure the icon in not a subject to font-size/line-height to avoid
  92. unnecessary spacing around it. */
  93. display: block;
  94. }
  95. }
  96. /* Show the selection handler when the widget is selected. */
  97. &.ck-widget_selected {
  98. & .ck-widget__selection-handler {
  99. visibility: visible;
  100. }
  101. }
  102. }
  103. .ck .ck-size-view {
  104. background: #fff;
  105. border: 2px solid var(--ck-color-focus-border);
  106. display: block;
  107. padding: var(--ck-spacing-small);
  108. --ck-sizer-offset: 10px;
  109. &.ck-orientation-top-left,
  110. &.ck-orientation-top-right,
  111. &.ck-orientation-bottom-right,
  112. &.ck-orientation-bottom-left {
  113. position: absolute;
  114. }
  115. &.ck-orientation-top-left {
  116. top: var( --ck-sizer-offset );
  117. left: var( --ck-sizer-offset );
  118. }
  119. &.ck-orientation-top-right {
  120. top: var( --ck-sizer-offset );
  121. right: var( --ck-sizer-offset );
  122. }
  123. &.ck-orientation-bottom-right {
  124. bottom: var( --ck-sizer-offset );
  125. right: var( --ck-sizer-offset );
  126. }
  127. &.ck-orientation-bottom-left {
  128. bottom: var( --ck-sizer-offset );
  129. left: var( --ck-sizer-offset );
  130. }
  131. }