| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- /*
- * 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-resizer-size: 14px;
- --ck-resizer-border-width: 2px;
- --ck-resizer-offset: -2px;
- & .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;
- width: var( --ck-resizer-size );
- height: var( --ck-resizer-size );
- background: var( --ck-color-focus-border );
- outline: var( --ck-resizer-border-width ) solid white;
- &.ck-widget__resizer-top-left {
- top: var( --ck-resizer-offset );
- left: var( --ck-resizer-offset );
- }
- &.ck-widget__resizer-top-right {
- top: var( --ck-resizer-offset );
- right: var( --ck-resizer-offset );
- }
- &.ck-widget__resizer-bottom-right {
- bottom: var( --ck-resizer-offset );
- right: var( --ck-resizer-offset );
- }
- &.ck-widget__resizer-bottom-left {
- bottom: var( --ck-resizer-offset );
- left: var( --ck-resizer-offset );
- }
- &.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; */
- }
|