widget.css 3.8 KB

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