widget.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  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%, 68%);
  11. --ck-color-widget-editable-focused-background: var(--ck-color-base-background),
  12. }
  13. .ck.ck-widget {
  14. margin: var(--ck-spacing-standard) 0;
  15. padding: 0;
  16. &.ck-widget_selected,
  17. &.ck-widget_selected:hover {
  18. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-focus-border);
  19. }
  20. @nest .ck-editor__editable.ck-blurred &.ck-widget_selected {
  21. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-blurred);
  22. }
  23. &:hover {
  24. outline: var(--ck-widget-outline-thickness) solid var(--ck-color-widget-border-hover);
  25. }
  26. & .ck-editable {
  27. border: 1px solid transparent;
  28. /* The :focus style is applied before .ck-editable_focused class is rendered in the view.
  29. These styles show a different border for a blink of an eye, so `:focus` need to have same styles applied. */
  30. &.ck-editable_focused,
  31. &:focus {
  32. @mixin ck-focus-ring;
  33. @mixin ck-box-shadow var(--ck-inner-shadow);
  34. background-color: var(--ck-color-widget-editable-focused-background);
  35. }
  36. }
  37. }