jodit/src/styles/plugins/search.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
 */
@import (reference) '../mixins';

@height-search: 30px;
@width-search: 320px;
@width-search-input-box: 60%;
@width-search-count-box: 15%;
@transform-button-active: 0.95;
@timeout-button-active: 0.1s;

.jodit_search {
	.font();
	visibility: hidden;

	&.jodit_search-active {
		visibility: visible;
	}

	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;

	.jodit_search_box {
		width: @width-search;
		position: absolute;
		right: 0;
		background-color: @color-toolbar;
		border: solid @color-border;
		border-width: 0 0 1px 1px;
		padding: @padding-default / 2;

		input {
			margin: 0;
			width: 100%;
			height: 100%;
			border: 0;
			background-color: transparent;
			outline: none;
			padding: 0 @padding-default;

			&.jodit_search-replace {
				display: none;
			}
		}

		.jodit_search_buttons,
		.jodit_search_counts,
		.jodit_search_inputs {
			height: @height-search;
			display: inline-block;
			vertical-align: top;
		}

		.jodit_search_inputs {
			width: @width-search-input-box;
			padding-right: @padding-default / 2;
		}

		.jodit_search_counts {
			width: @width-search-count-box;
			line-height: 100%;
			text-align: center;
			color: @color-border;
			border-left: 1px solid @color-border;

			&:before {
				content: '';
				display: inline-block;
				vertical-align: middle;
				height: 100%;
			}

			span {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.jodit_search_buttons {
			padding-left: 0;
			width: 100% - @width-search-input-box - @width-search-count-box;

			button {
				outline: 0;
				width: 32%;
				padding: 1px @padding-default / 2;
				margin-right: 1%;
				transition: transform @timeout-button-active linear;

				&.jodit_search_buttons-replace {
					width: 100%;
					border: 1px solid @color-border;
					margin-top: 2px;
					display: none;
				}

				height: 100%;
				border: 1px solid transparent;
				background-color: transparent;

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

				&:focus {
					border: 1px solid fade(@color-background-selection, 50);
				}

				&:active {
					border: 1px solid @color-background-selection;
					transform: scale(
						@transform-button-active,
						@transform-button-active
					);
				}
			}
		}
	}
	&.jodit_search-and-replace {
		.jodit_search_counts,
		.jodit_search_inputs {
			height: @height-search * 2;
			input {
				height: 50%;
				transition: background-color @timeout-button-active linear;
				&:focus {
					//background-color: fade(@color-background-selection, 9);
					box-shadow: inset 0px 0px 3px 0px fade(@color-border, 58);
				}
			}
		}

		.jodit_search_buttons button.jodit_search_buttons-replace,
		.jodit_search_inputs input.jodit_search-replace {
			display: block;
		}
	}

	@media (max-width: @width-search) {
		width: 100%;
		.jodit_search_box {
			width: 100%;
		}
	}
}