widget.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  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. outline: 2px dashed red;
  23. &.ck-widget__resizer-shadow-active {
  24. display: block;
  25. visibility: visible;
  26. }
  27. }
  28. }
  29. & .ck-widget__resizer {
  30. position: absolute;
  31. &.ck-widget__resizer-top-left {
  32. top: 0;
  33. left: 0;
  34. }
  35. &.ck-widget__resizer-top-right {
  36. top: 0;
  37. right: 0;
  38. }
  39. &.ck-widget__resizer-bottom-right {
  40. bottom: 0;
  41. right: 0;
  42. }
  43. &.ck-widget__resizer-bottom-left {
  44. bottom: 0;
  45. left: 0;
  46. }
  47. &.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right {
  48. &:hover {
  49. cursor: nwse-resize;
  50. }
  51. }
  52. /* Show the selection handler on mouse hover over the widget. */
  53. &:hover {
  54. cursor: nesw-resize;
  55. }
  56. }
  57. &:hover {
  58. & .ck-widget__resizer-wrapper {
  59. visibility: visible;
  60. }
  61. }
  62. }
  63. .ck .ck-widget.ck-widget_with-selection-handler {
  64. /* Make the widget wrapper a relative positioning container for the drag handler. */
  65. position: relative;
  66. & .ck-widget__selection-handler {
  67. /* visibility: hidden; */
  68. position: absolute;
  69. & .ck-icon {
  70. /* Make sure the icon in not a subject to fon-size/line-height to avoid
  71. unnecessary spacing around it. */
  72. display: block;
  73. }
  74. }
  75. /* Show the selection handler on mouse hover over the widget. */
  76. &:hover {
  77. & .ck-widget__selection-handler {
  78. visibility: visible;
  79. }
  80. }
  81. /* Show the selection handler when the widget is selected. */
  82. &.ck-widget_selected {
  83. & .ck-widget__selection-handler {
  84. visibility: visible;
  85. }
  86. }
  87. }
  88. .ck .ck-widget_resizer-shadow {
  89. width: 60px;
  90. height: 60px;
  91. outline: 2px solid red !important;
  92. }