jodit/src/modules/dialog/dialog.less

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Released under MIT see LICENSE.txt in the project root for license information.
 * Copyright (c) 2013-2020 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

@import (reference) '../../styles/variables';
@import (reference) '../../styles/mixins';

.jodit-dialog__box {
	.font();

	&.jodit-dialog__box-moved {
		user-select: none;
	}

	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}

	.jodit_elfinder {
		&,
		& * {
			box-sizing: initial;
		}
	}

	position: absolute;
	display: none;
	width: 0;
	height: 0;
	border: 0;
	will-change: left, top, width, height;

	.jodit-dialog__overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: var(--z-index-dialog-overlay);
		text-align: center;
		white-space: nowrap;
		overflow: auto;
		display: none;
		background-color: rgba(0, 0, 0, 0.5);
	}

	&.jodit-modal .jodit-dialog__overlay {
		display: block;
	}

	&.jodit-dialog_active {
		display: block;
	}

	.jodit-dialog {
		z-index: var(--z-index-dialog);
		display: flex;
		flex-flow: column nowrap;
		white-space: normal;
		text-align: left;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #fff;
		box-shadow: 0 var(--padding-default) calc(var(--padding-default) * 2)
				rgba(0, 0, 0, 0.19),
			0 6px 6px rgba(0, 0, 0, 0.23);
		min-width: 200px;
		min-height: 100px;
		max-height: 100%;

		@media (max-width: @screen-xs) {
			max-width: 100%;
			width: 100% !important;
			height: 100% !important;
			top: 0 !important;
			left: 0 !important;
		}

		&_prompt {
			max-width: 300px;
			min-width: 200px;
			padding: var(--padding-default);
			word-break: break-all;

			label {
				margin-bottom: calc(var(--padding-default) / 2);
				display: block;
			}
		}

		&_alert {
			max-width: 300px;
			min-width: 200px;
			padding: var(--padding-default);
			word-break: break-all;
		}

		&__header {
			display: flex;
			justify-content: space-between;
			text-align: left;

			@media (max-width: @screen-xs) {
				flex-direction: column;
			}

			cursor: move;
			overflow: hidden;
			color: #222;
			border-bottom: 1px solid var(--color-border);

			&-toolbar,
			&-title {
				display: flex;
				align-items: center;
				flex-shrink: 3;
				font-size: 18px;
				margin: 0;
				font-weight: 400;
				line-height: 48px;
				vertical-align: top;
				padding: 0 var(--padding-default);
			}

			&-toolbar {
				@media (max-width: @screen-xs) {
					padding-left: 0;
				}
			}

			&-button {
				color: #222;
				font-size: 28px;
				transition: background-color 0.2s ease 0s;
				flex-basis: 48px;
				height: 48px;
				line-height: 48px;
				text-decoration: none;
				text-align: center;

				&:hover {
					background-color: var(--color-background-button-hover);
				}
			}

			.jodit_toolbar {
				background: transparent;
				border: 0;
				box-shadow: none;

				> li.jodit-toolbar-button {
					.jodit-input {
						padding-left: var(--padding-default);
						width: auto;
					}
				}
			}
		}

		&__content {
			flex: 1 0;
			min-height: 100px;
			overflow: auto;

			.jodit-form__group {
				margin-bottom: calc(var(--padding-default) * 1.5);
				padding: 0 var(--padding-default);

				&:first-child {
					margin-top: var(--padding-default);
				}

				label + .jodit-select,
				label + .jodit-grid,
				label + .jodit-input_group,
				label + input {
					margin-top: calc(var(--padding-default) / 2);
				}

				.jodit-input_group {
					display: table;
					border-collapse: separate;
					width: 100%;

					> * {
						vertical-align: middle;
						display: table-cell;
						height: 34px;
					}

					> input {
						margin: 0 !important;

						&:not([class*='col-']) {
							width: 100%;
						}
					}

					&-buttons {
						width: 1%;
						font-size: 0;
						white-space: nowrap;
						vertical-align: middle;

						> .jodit-button {
							border: 1px solid var(--color-border);
							margin-left: -1px;
							height: 34px;
							line-height: 34px;
							border-radius: 0;
						}
					}
				}
			}
		}

		&__footer {
			padding: var(--padding-default);
			justify-content: space-between;
			flex-wrap: nowrap;
			display: none;

			button {
				margin-right: calc(var(--padding-default) / 2);

				&:last-child {
					margin-right: 0;
				}
			}
		}

		&__column {
			display: flex;
		}

		&__resizer {
			position: absolute;
			bottom: 0;
			right: 0;
			cursor: se-resize;
			width: 7px;
			height: 7px;
			display: inline-block;
			background-image: data-uri('../../styles/icons/resizer.png');
			opacity: 0.6;

			&:hover {
				border-color: rgba(0, 0, 0, 0.6);
			}
		}

		@media (max-width: @screen-xs) {
			&__resizer {
				display: none;
			}
		}
	}

	.jodit-dialog_footer_true .jodit-dialog__footer {
		display: flex;
	}

	&.jodit_fullsize .jodit-dialog {
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100% !important;

		.jodit-dialog__resizer {
			display: none;
		}
	}
}