/* * Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ :root { --ck-color-resizer: var(--ck-color-focus-border); --ck-resizer-size: 10px; --ck-resizer-border-width: 2px; /* Set resizer with 50% offset. */ --ck-resizer-offset: calc( ( var(--ck-resizer-size) / -2 ) - 1px ); } .ck .ck-widget_with-resizer { /* Make the widget wrapper a relative positioning container for the drag handler. */ position: relative; } .ck .ck-widget_with-resizer.ck-widget_selected { & .ck-widget__resizer-wrapper { visibility: visible; } & .ck-widget__resizer-shadow { display: block; } } .ck .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 .ck-widget__resizer-shadow { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; outline: 2px solid var(--ck-color-resizer); /* @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: var(--ck-z-default); &.ck-widget__resizer-shadow-active { display: block; visibility: visible; } } .ck .ck-widget__resizer { position: absolute; /* Resizers are the only UI elements that should interfere with pointer device */ pointer-events: all; width: var(--ck-resizer-size); height: var(--ck-resizer-size); background: var(--ck-color-focus-border); outline: var(--ck-resizer-border-width) solid #fff; &.ck-widget__resizer-top-left { top: var( --ck-resizer-offset ); left: var( --ck-resizer-offset ); cursor: nwse-resize; } &.ck-widget__resizer-top-right { top: var( --ck-resizer-offset ); right: var( --ck-resizer-offset ); cursor: nesw-resize; } &.ck-widget__resizer-bottom-right { bottom: var( --ck-resizer-offset ); right: var( --ck-resizer-offset ); cursor: nwse-resize; } &.ck-widget__resizer-bottom-left { bottom: var( --ck-resizer-offset ); left: var( --ck-resizer-offset ); cursor: nesw-resize; } } .ck .ck-widget.ck-widget_with-selection-handler { /* Make the widget wrapper a relative positioning container for the drag handler. */ position: relative; /* Show the selection handler on mouse hover over the widget. */ &:hover { & .ck-widget__selection-handler { visibility: visible; } } & .ck-widget__selection-handler { position: absolute; & .ck-icon { /* Make sure the icon in not a subject to font-size/line-height to avoid unnecessary spacing around it. */ display: block; } } /* Show the selection handler when the widget is selected. */ &.ck-widget_selected { & .ck-widget__selection-handler { visibility: visible; } } } .ck .ck-size-view { background: #fff; border: 2px solid var(--ck-color-focus-border); display: block; padding: var(--ck-spacing-small); --ck-sizer-offset: 10px; &.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 ); } }