widget.css 2.3 KB

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