| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- /*
- * 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;
- }
|