widget.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. }
  16. & .ck-widget__resizer {
  17. position: absolute;
  18. &.ck-widget__resizer-top-left {
  19. top: 0;
  20. left: 0;
  21. }
  22. &.ck-widget__resizer-top-right {
  23. top: 0;
  24. right: 0;
  25. }
  26. &.ck-widget__resizer-bottom-right {
  27. bottom: 0;
  28. right: 0;
  29. }
  30. &.ck-widget__resizer-bottom-left {
  31. bottom: 0;
  32. left: 0;
  33. }
  34. &.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right {
  35. &:hover {
  36. cursor: nwse-resize;
  37. }
  38. }
  39. /* Show the selection handler on mouse hover over the widget. */
  40. &:hover {
  41. cursor: nesw-resize;
  42. }
  43. }
  44. &:hover {
  45. & .ck-widget__resizer-wrapper {
  46. visibility: visible;
  47. }
  48. }
  49. }
  50. .ck .ck-widget.ck-widget_with-selection-handler {
  51. /* Make the widget wrapper a relative positioning container for the drag handler. */
  52. position: relative;
  53. & .ck-widget__selection-handler {
  54. /* visibility: hidden; */
  55. position: absolute;
  56. & .ck-icon {
  57. /* Make sure the icon in not a subject to fon-size/line-height to avoid
  58. unnecessary spacing around it. */
  59. display: block;
  60. }
  61. }
  62. /* Show the selection handler on mouse hover over the widget. */
  63. &:hover {
  64. & .ck-widget__selection-handler {
  65. visibility: visible;
  66. }
  67. }
  68. /* Show the selection handler when the widget is selected. */
  69. &.ck-widget_selected {
  70. & .ck-widget__selection-handler {
  71. visibility: visible;
  72. }
  73. }
  74. }