jodit/src/styles/plugins/resizer.less

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

[data-jodit_iframe_wrapper] {
	display: block;
	clear: both;
	user-select: none;
	position: relative;
	&:after {
		position: absolute;
		content: '';
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		cursor: pointer;
		display: block;
		background: rgba(0, 0, 0, 0);
	}
}
.jodit_resizer {
	width: 100px;
	height: 100px;
	position: absolute;
	border: 1px solid @color-border-resize;
	top: 0px;
	left: 0px;
	display: none;
	pointer-events: none;
	font-size: 0;
	* {
		box-sizing: border-box;
	}
	@viewer_width: 70px;
	@viewer_height: 24px;
	> span {
		position: absolute;
		display: inline-block;
		opacity: 0;
		transition: opacity 0.2s linear;
		left: 50%;
		top: 50%;
		height: @viewer_height;
		line-height: @viewer_height;
		font-size: 12px;
		width: @viewer_width;
		margin-left: -@viewer_width / 2;
		margin-top: -@viewer_height / 2;
		text-align: center;
		overflow: visible;
		color: @color-white;
		background-color: @color-placeholder;
		max-width: 100%;
	}
	> i {
		position: absolute;
		display: inline-block;

		z-index: 4;
		pointer-events: all;

		border: 1px solid @color-border-resize;
		background-color: @color-background-gray;

		&:hover {
			background-color: @color-background-gray-hover;
		}

		.handleSizes(@size-resizer-handle) {
			width: @size-resizer-handle;
			height: @size-resizer-handle;
			&:nth-child(1) {
				left: -@size-resizer-handle / 2;
				top: -@size-resizer-handle / 2;
				cursor: nw-resize;
			}
			&:nth-child(2) {
				right: -@size-resizer-handle / 2;
				top: -@size-resizer-handle / 2;
				cursor: ne-resize;
			}
			&:nth-child(3) {
				right: -@size-resizer-handle / 2;
				bottom: -@size-resizer-handle / 2;
				cursor: se-resize;
			}
			&:nth-child(4) {
				left: -@size-resizer-handle / 2;
				bottom: -@size-resizer-handle / 2;
				cursor: sw-resize;
			}
		}

		.handleSizes(10px);
		@media (max-width: @screen-sm) {
			.handleSizes(20px);
		}
	}
}