/* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ .ck .ck-widget_with-resizer { /* Make the widget wrapper a relative positioning container for the drag handler. */ position: relative; & .ck-widget__resizer-wrapper { visibility: hidden; position: absolute; /* The wrapper itself should not interfere with pointer device */ pointer-events: none; left: 0; right: 0; top: 0; bottom: 0; & .ck-widget__resizer-shadow { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; /* @todo: remove this dirty hack. It's purpose is that shadow element should not be overlapped by elements that follow it in the DOM. */ z-index: 100; outline: 2px dashed var(--ck-color-focus-border); background-color: rgba(71, 164, 245, 0.25); &.ck-widget__resizer-shadow-active { display: block; visibility: visible; } } } & .ck-widget__resizer { position: absolute; /* Resizers are the only UI elements that should interfere with pointer device */ pointer-events: all; &.ck-widget__resizer-top-left { top: 0; left: 0; } &.ck-widget__resizer-top-right { top: 0; right: 0; } &.ck-widget__resizer-bottom-right { bottom: 0; right: 0; } &.ck-widget__resizer-bottom-left { bottom: 0; left: 0; } &.ck-widget__resizer-top-left, &.ck-widget__resizer-bottom-right { &:hover { cursor: nwse-resize; } } /* Show the selection handler on mouse hover over the widget. */ &:hover { cursor: nesw-resize; } } &:hover { & .ck-widget__resizer-wrapper { visibility: visible; } } } .ck .ck-widget.ck-widget_with-selection-handler { /* Make the widget wrapper a relative positioning container for the drag handler. */ position: relative; & .ck-widget__selection-handler { /* visibility: hidden; */ position: absolute; & .ck-icon { /* Make sure the icon in not a subject to fon-size/line-height to avoid unnecessary spacing around it. */ display: block; } } /* Show the selection handler on mouse hover over the widget. */ &:hover { & .ck-widget__selection-handler { visibility: visible; } } /* Show the selection handler when the widget is selected. */ &.ck-widget_selected { & .ck-widget__selection-handler { visibility: visible; } } } .ck .ck-widget_resizer-shadow { width: 60px; height: 60px; outline: 2px solid red !important; }