widget.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /*
  2. * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. :root {
  6. --ck-color-resizer: var(--ck-color-focus-border);
  7. --ck-resizer-size: 10px;
  8. --ck-resizer-border-width: 1px;
  9. --ck-resizer-border-radius: 2px;
  10. /* Set the resizer with a 50% offset. */
  11. --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 2px);
  12. --ck-resizer-tooltip-offset: 10px;
  13. --ck-color-resizer-tooltip-background: hsl(0, 0%, 15%);
  14. --ck-color-resizer-tooltip-text: hsl(0, 0%, 95%);
  15. }
  16. .ck .ck-widget {
  17. /* This is neccessary for type around UI to be positioned properly. */
  18. position: relative;
  19. }
  20. .ck .ck-widget.ck-widget_with-selection-handle {
  21. /* Make the widget wrapper a relative positioning container for the drag handle. */
  22. position: relative;
  23. & .ck-widget__selection-handle {
  24. position: absolute;
  25. & .ck-icon {
  26. /* Make sure the icon in not a subject to font-size or line-height to avoid
  27. unnecessary spacing around it. */
  28. display: block;
  29. }
  30. }
  31. /* Show the selection handle on mouse hover over the widget. */
  32. &:hover {
  33. & .ck-widget__selection-handle {
  34. visibility: visible;
  35. }
  36. }
  37. /* Show the selection handle when the widget is selected. */
  38. &.ck-widget_selected .ck-widget__selection-handle {
  39. visibility: visible;
  40. }
  41. }
  42. .ck .ck-size-view {
  43. background: var(--ck-color-resizer-tooltip-background);
  44. color: var(--ck-color-resizer-tooltip-text);
  45. border: 1px solid var(--ck-color-resizer-tooltip-text);
  46. border-radius: var(--ck-resizer-border-radius);
  47. font-size: var(--ck-font-size-tiny);
  48. display: block;
  49. padding: var(--ck-spacing-small);
  50. &.ck-orientation-top-left,
  51. &.ck-orientation-top-right,
  52. &.ck-orientation-bottom-right,
  53. &.ck-orientation-bottom-left {
  54. position: absolute;
  55. }
  56. &.ck-orientation-top-left {
  57. top: var( --ck-resizer-tooltip-offset );
  58. left: var( --ck-resizer-tooltip-offset );
  59. }
  60. &.ck-orientation-top-right {
  61. top: var( --ck-resizer-tooltip-offset );
  62. right: var( --ck-resizer-tooltip-offset );
  63. }
  64. &.ck-orientation-bottom-right {
  65. bottom: var( --ck-resizer-tooltip-offset );
  66. right: var( --ck-resizer-tooltip-offset );
  67. }
  68. &.ck-orientation-bottom-left {
  69. bottom: var( --ck-resizer-tooltip-offset );
  70. left: var( --ck-resizer-tooltip-offset );
  71. }
  72. }