widget.css 2.1 KB

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