widget.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  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. @import "../mixins/_focus.css";
  6. @import "../mixins/_shadow.css";
  7. :root {
  8. --ck-widget-outline-thickness: 3px;
  9. --ck-widget-handler-icon-size: 16px;
  10. --ck-widget-handler-animation-duration: 200ms;
  11. --ck-widget-handler-animation-curve: ease;
  12. --ck-color-widget-blurred-border: hsl(0, 0%, 87%);
  13. --ck-color-widget-hover-border-coordinates: 43, 100%, 62%;
  14. --ck-color-widget-hover-border: hsl(var(--ck-color-widget-hover-border-coordinates));
  15. --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
  16. --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
  17. }
  18. .ck .ck-widget {
  19. outline-width: var(--ck-widget-outline-thickness);
  20. outline-style: solid;
  21. outline-color: transparent;
  22. transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  23. &.ck-widget_selected,
  24. &.ck-widget_selected:hover {
  25. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
  26. }
  27. &:hover {
  28. outline-color: var(--ck-color-widget-hover-border);
  29. }
  30. }
  31. .ck .ck-editor__nested-editable {
  32. border: 1px solid transparent;
  33. /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
  34. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
  35. &.ck-editor__nested-editable_focused,
  36. &:focus {
  37. @mixin ck-focus-ring;
  38. @mixin ck-box-shadow var(--ck-inner-shadow);
  39. background-color: var(--ck-color-widget-editable-focus-background);
  40. }
  41. }
  42. .ck .ck-widget.ck-widget_with-selection-handle {
  43. & .ck-widget__selection-handle {
  44. padding: 4px;
  45. box-sizing: border-box;
  46. /* Background and opacity will be animated as the handler shows up or the widget gets selected. */
  47. background-color: transparent;
  48. opacity: 0;
  49. /* Transition:
  50. * background-color for the .ck-widget_selected state change,
  51. * visibility for hiding the handler,
  52. * opacity for the proper look of the icon when the handler disappears. */
  53. transition:
  54. background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  55. visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  56. opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  57. /* Make only top corners round. */
  58. border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  59. /* Place the drag handler outside the widget wrapper. */
  60. transform: translateY(-100%);
  61. left: calc(0px - var(--ck-widget-outline-thickness));
  62. & .ck-icon {
  63. /* Make sure the dimensions of the icon are independent of the fon-size of the content. */
  64. width: var(--ck-widget-handler-icon-size);
  65. height: var(--ck-widget-handler-icon-size);
  66. color: var(--ck-color-widget-drag-handler-icon-color);
  67. /* The "selected" part of the icon is invisible by default */
  68. & .ck-icon__selected-indicator {
  69. opacity: 0;
  70. /* Note: The animation is longer on purpose. Simply feels better. */
  71. transition: opacity 300ms var(--ck-widget-handler-animation-curve);
  72. }
  73. }
  74. /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
  75. &:hover .ck-icon .ck-icon__selected-indicator {
  76. opacity: 1;
  77. }
  78. }
  79. /* Show the selection handler on mouse hover over the widget. */
  80. &:hover .ck-widget__selection-handle {
  81. opacity: 1;
  82. background-color: var(--ck-color-widget-hover-border);
  83. }
  84. /* Show the selection handler when the widget is selected. */
  85. &.ck-widget_selected,
  86. &.ck-widget_selected:hover {
  87. & .ck-widget__selection-handle {
  88. opacity: 1;
  89. background-color: var(--ck-color-focus-border);
  90. /* When the widget is selected, notify the user using the proper look of the icon. */
  91. & .ck-icon .ck-icon__selected-indicator {
  92. opacity: 1;
  93. }
  94. }
  95. }
  96. }
  97. /* In a RTL environment, align the selection handler to the right side of the widget */
  98. /* stylelint-disable-next-line no-descending-specificity */
  99. .ck[dir="rtl"] .ck-widget.ck-widget_with-selection-handle .ck-widget__selection-handle {
  100. left: auto;
  101. right: calc(0px - var(--ck-widget-outline-thickness));
  102. }
  103. /* https://github.com/ckeditor/ckeditor5/issues/6415 */
  104. .ck.ck-editor__editable.ck-read-only .ck-widget {
  105. /* Prevent the :hover outline from showing up because of the used outline-color transition. */
  106. transition: none;
  107. &:not(.ck-widget_selected) {
  108. /* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
  109. See: https://github.com/ckeditor/ckeditor5/issues/1261 */
  110. --ck-widget-outline-thickness: 0;
  111. }
  112. &.ck-widget_with-selection-handle {
  113. & .ck-widget__selection-handle,
  114. & .ck-widget__selection-handle:hover {
  115. background: var(--ck-color-widget-blurred-border);
  116. }
  117. }
  118. }
  119. /* Style the widget when it's selected but the editable it belongs to lost focus. */
  120. /* stylelint-disable-next-line no-descending-specificity */
  121. .ck.ck-editor__editable.ck-blurred .ck-widget {
  122. &.ck-widget_selected,
  123. &.ck-widget_selected:hover {
  124. outline-color: var(--ck-color-widget-blurred-border);
  125. &.ck-widget_with-selection-handle {
  126. & .ck-widget__selection-handle,
  127. & .ck-widget__selection-handle:hover {
  128. background: var(--ck-color-widget-blurred-border);
  129. }
  130. }
  131. }
  132. }
  133. .ck.ck-editor__editable > .ck-widget.ck-widget_with-selection-handle:first-child,
  134. .ck.ck-editor__editable blockquote > .ck-widget.ck-widget_with-selection-handle:first-child {
  135. /* Do not crop selection handler if a widget is a first-child in the blockquote or in the root editable.
  136. In fact, anything with overflow: hidden.
  137. https://github.com/ckeditor/ckeditor5-block-quote/issues/28
  138. https://github.com/ckeditor/ckeditor5-widget/issues/44
  139. https://github.com/ckeditor/ckeditor5-widget/issues/66 */
  140. margin-top: calc(1em + var(--ck-widget-handler-icon-size));
  141. }