8
0

widget.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /*
  2. * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  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: hsl(43, 100%, 62%);
  14. --ck-color-widget-editable-focus-background: var(--ck-color-base-background);
  15. --ck-color-widget-drag-handler-icon-color: var(--ck-color-base-background);
  16. }
  17. .ck .ck-widget {
  18. margin: var(--ck-spacing-standard) 0;
  19. padding: 0;
  20. outline-width: var(--ck-widget-outline-thickness);
  21. outline-style: solid;
  22. outline-color: transparent;
  23. transition: outline-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  24. &.ck-widget_selected,
  25. &.ck-widget_selected:hover {
  26. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
  27. }
  28. &:hover {
  29. outline-color: var(--ck-color-widget-hover-border);
  30. }
  31. }
  32. .ck .ck-editor__nested-editable {
  33. border: 1px solid transparent;
  34. /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
  35. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
  36. &.ck-editor__nested-editable_focused,
  37. &:focus {
  38. @mixin ck-focus-ring;
  39. @mixin ck-box-shadow var(--ck-inner-shadow);
  40. background-color: var(--ck-color-widget-editable-focus-background);
  41. }
  42. }
  43. .ck .ck-widget.ck-widget_selectable {
  44. & .ck-widget__selection-handler {
  45. padding: 4px;
  46. box-sizing: border-box;
  47. /* Background and opacity will be animated as the handler shows up or the widget gets selected. */
  48. background-color: transparent;
  49. opacity: 0;
  50. /* Transition:
  51. * background-color for the .ck-widget_selected state change,
  52. * visibility for hiding the handler,
  53. * opacity for the proper look of the icon when the handler disappears. */
  54. transition:
  55. background-color var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  56. visibility var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve),
  57. opacity var(--ck-widget-handler-animation-duration) var(--ck-widget-handler-animation-curve);
  58. /* Make only top corners round. */
  59. border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  60. /* Place the drag handler outside the widget wrapper. */
  61. transform: translateY(-100%);
  62. left: calc(0px - var(--ck-widget-outline-thickness));
  63. /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
  64. &:hover .ck-icon .ck-icon__selected-indicator {
  65. opacity: 1;
  66. }
  67. & .ck-icon {
  68. /* Make sure the dimensions of the icon are independent of the fon-size of the content. */
  69. width: var(--ck-widget-handler-icon-size);
  70. height: var(--ck-widget-handler-icon-size);
  71. color: var(--ck-color-widget-drag-handler-icon-color);
  72. /* The "selected" part of the icon is invisible by default */
  73. & .ck-icon__selected-indicator {
  74. opacity: 0;
  75. /* Note: The animation is longer on purpose. Simply feels better. */
  76. transition: opacity 300ms var(--ck-widget-handler-animation-curve);
  77. }
  78. }
  79. }
  80. /* Show the selection handler when the widget is selected. */
  81. &.ck-widget_selected,
  82. &.ck-widget_selected:hover {
  83. & .ck-widget__selection-handler {
  84. opacity: 1;
  85. background-color: var(--ck-color-focus-border);
  86. /* When the widget is selected, notify the user using the proper look of the icon. */
  87. & .ck-icon .ck-icon__selected-indicator {
  88. opacity: 1;
  89. }
  90. }
  91. }
  92. /* Show the selection handler on mouse hover over the widget. */
  93. &:hover .ck-widget__selection-handler {
  94. opacity: 1;
  95. background-color: var(--ck-color-widget-hover-border);
  96. }
  97. }
  98. /* Style the widget when it's selected but the editable it belongs to lost focus. */
  99. .ck-editor__editable.ck-blurred .ck-widget {
  100. &.ck-widget_selected,
  101. &.ck-widget_selected:hover {
  102. outline-color: var(--ck-color-widget-blurred-border);
  103. & .ck-widget__selection-handler,
  104. & .ck-widget__selection-handler:hover {
  105. background: var(--ck-color-widget-blurred-border);
  106. }
  107. }
  108. }
  109. .ck-editor__editable.ck-read-only .ck-widget {
  110. /* Disable visual effects of hover/active widget when CKEditor is in readOnly mode.
  111. See: https://github.com/ckeditor/ckeditor5/issues/1261 */
  112. --ck-widget-outline-thickness: 0;
  113. }