widget.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  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 {
  6. /* Make the widget wrapper a relative positioning container for the drag handler. */
  7. position: relative;
  8. & .ck-widget__resizer-wrapper {
  9. visibility: hidden;
  10. position: absolute;
  11. /* The wrapper itself should not interfere with pointer device */
  12. pointer-events: none;
  13. left: 0;
  14. right: 0;
  15. top: 0;
  16. bottom: 0;
  17. & .ck-widget__resizer-shadow {
  18. display: none;
  19. position: absolute;
  20. left: 0;
  21. right: 0;
  22. top: 0;
  23. bottom: 0;
  24. /* @todo: remove this dirty hack. It's purpose is that shadow element should not be
  25. overlapped by elements that follow it in the DOM. */
  26. z-index: 100;
  27. outline: 2px dashed var(--ck-color-focus-border);
  28. background-color: rgba(71, 164, 245, 0.25);
  29. &.ck-widget__resizer-shadow-active {
  30. display: block;
  31. visibility: visible;
  32. }
  33. }
  34. }
  35. & .ck-widget__resizer {
  36. position: absolute;
  37. /* Resizers are the only UI elements that should interfere with pointer device */
  38. pointer-events: all;
  39. &.ck-widget__resizer-top-left {
  40. top: 0;
  41. left: 0;
  42. }
  43. &.ck-widget__resizer-top-right {
  44. top: 0;
  45. right: 0;
  46. }
  47. &.ck-widget__resizer-bottom-right {
  48. bottom: 0;
  49. right: 0;
  50. }
  51. &.ck-widget__resizer-bottom-left {
  52. bottom: 0;
  53. left: 0;
  54. }
  55. &.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right {
  56. &:hover {
  57. cursor: nwse-resize;
  58. }
  59. }
  60. /* Show the selection handler on mouse hover over the widget. */
  61. &:hover {
  62. cursor: nesw-resize;
  63. }
  64. }
  65. &:hover {
  66. & .ck-widget__resizer-wrapper {
  67. visibility: visible;
  68. }
  69. }
  70. }
  71. .ck .ck-widget.ck-widget_with-selection-handler {
  72. /* Make the widget wrapper a relative positioning container for the drag handler. */
  73. position: relative;
  74. & .ck-widget__selection-handler {
  75. /* visibility: hidden; */
  76. position: absolute;
  77. & .ck-icon {
  78. /* Make sure the icon in not a subject to fon-size/line-height to avoid
  79. unnecessary spacing around it. */
  80. display: block;
  81. }
  82. }
  83. /* Show the selection handler on mouse hover over the widget. */
  84. &:hover {
  85. & .ck-widget__selection-handler {
  86. visibility: visible;
  87. }
  88. }
  89. /* Show the selection handler when the widget is selected. */
  90. &.ck-widget_selected {
  91. & .ck-widget__selection-handler {
  92. visibility: visible;
  93. }
  94. }
  95. }
  96. .ck .ck-widget_resizer-shadow {
  97. width: 60px;
  98. height: 60px;
  99. outline: 2px solid red !important;
  100. }