widget.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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-color-widget-border-blurred: hsl(0, 0%, 87%);
  10. --ck-color-widget-border-hover: hsl(43, 100%, 62%);
  11. --ck-color-widget-editable-focused-background: var(--ck-color-base-background);
  12. --ck-color-widget-drag-handler-icon-color: hsl(0, 0%, 100%);
  13. --ck-color-widget-drag-icon-size: 16px;
  14. --ck-color-widget-drag-animation-duration: 200ms;
  15. --ck-color-widget-drag-animation-curve: ease;
  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-color-widget-drag-animation-duration) var(--ck-color-widget-drag-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. @nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
  29. outline-width: var(--ck-widget-outline-thickness);
  30. outline-color: var(--ck-color-widget-border-blurred);
  31. }
  32. &:hover {
  33. outline-color: var(--ck-color-widget-border-hover);
  34. }
  35. }
  36. .ck .ck-editor__nested-editable {
  37. border: 1px solid transparent;
  38. /* The :focus style is applied before .ck-editor__nested-editable_focused class is rendered in the view.
  39. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
  40. &.ck-editor__nested-editable_focused,
  41. &:focus {
  42. @mixin ck-focus-ring;
  43. @mixin ck-box-shadow var(--ck-inner-shadow);
  44. background-color: var(--ck-color-widget-editable-focused-background);
  45. }
  46. }
  47. .ck .ck-widget.ck-widget_selectable {
  48. & .ck-widget__selection-handler {
  49. padding: 4px;
  50. box-sizing: border-box;
  51. /* Background and opacity will be animated as the handler shows up or the widget gets selected. */
  52. background-color: transparent;
  53. opacity: 0;
  54. /* Transition:
  55. * background-color for the .ck-widget_selected state change,
  56. * visibility for hiding the handler,
  57. * opacity for the proper look of the icon when the handler disappears. */
  58. transition:
  59. background-color var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve),
  60. visibility var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve),
  61. opacity var(--ck-color-widget-drag-animation-duration) var(--ck-color-widget-drag-animation-curve);
  62. /* Make only top corners round. */
  63. border-radius: var(--ck-border-radius) var(--ck-border-radius) 0 0;
  64. /* Place the drag handler outside the widget wrapper. */
  65. transform: translateY(-100%);
  66. left: calc(0px - var(--ck-widget-outline-thickness));
  67. /* Advertise using the look of the icon that once clicked the handler, the widget will be selected. */
  68. &:hover .ck-icon .ck-icon__selected-indicator {
  69. opacity: 1;
  70. }
  71. & .ck-icon {
  72. /* Make sure the dimensions of the icon are independent of the fon-size of the content. */
  73. width: var(--ck-color-widget-drag-icon-size);
  74. height: var(--ck-color-widget-drag-icon-size);
  75. color: var(--ck-color-widget-drag-handler-icon-color);
  76. /* The "selected" part of the icon is invisible by default */
  77. & .ck-icon__selected-indicator {
  78. opacity: 0;
  79. /* Note: The animation is longer on purpose. Simply feels better. */
  80. transition: opacity 300ms var(--ck-color-widget-drag-animation-curve);
  81. }
  82. }
  83. }
  84. /* Show the selection handler when the widget is selected. */
  85. &.ck-widget_selected,
  86. &.ck-widget_selected:hover {
  87. & .ck-widget__selection-handler {
  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. /* Show the selection handler on mouse hover over the widget. */
  97. &:hover .ck-widget__selection-handler {
  98. opacity: 1;
  99. background-color: var(--ck-color-widget-border-hover);
  100. }
  101. }