/* * 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:hover .ck-widget__resizer-shadow { display: block !important; } .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 solid 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; /* background: red; */ background: var( --ck-color-focus-border ); &.ck-widget__resizer-top-left { top: -5px; left: -5px; } &.ck-widget__resizer-top-right { top: -5px; right: -5px; } &.ck-widget__resizer-bottom-right { bottom: -5px; right: -5px; } &.ck-widget__resizer-bottom-left { bottom: -5px; left: -5px; } &.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; } .ck .ck-size-view { background: lightyellow; border: 2px solid var(--ck-color-focus-border); display: inline-block; padding: 3px; --ck-sizer-offset: 20px; &.ck-orientation-top-left, &.ck-orientation-top-right, &.ck-orientation-bottom-right, &.ck-orientation-bottom-left { position: absolute; } &.ck-orientation-top-left { top: var( --ck-sizer-offset ); left: var( --ck-sizer-offset ); } &.ck-orientation-top-right { top: var( --ck-sizer-offset ); right: var( --ck-sizer-offset ); } &.ck-orientation-bottom-right { bottom: var( --ck-sizer-offset ); right: var( --ck-sizer-offset ); } &.ck-orientation-bottom-left { bottom: var( --ck-sizer-offset ); left: var( --ck-sizer-offset ); } } .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline { /* padding: 100px !important; */ }