jodit/src/styles/widgets/tabs.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) '../variables';
@import (reference) '../mixins';

.jodit_tabs {
	.font();

	.jodit_tabs_buttons {
		line-height: 18px;
		margin-bottom: 5px;
		margin-top: 4px;
		display: flex;

		> a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;

			font-size: 11px;
			font-weight: bold;
			text-align: center;
			white-space: nowrap;
			height: 29px;
			line-height: 27px;

			position: relative;
			vertical-align: middle;
			transition: background 0.1s linear;

			text-overflow: ellipsis;
			overflow: hidden;

			box-shadow: none;

			background-color: @color-background-tab;
			color: @color-tab;
			border: 1px solid @color-border-tab;

			outline: none;

			@media (max-width: @screen-sm) {
				width: 100% !important;
				border-radius: 0 !important;
			}

			& + a {
				margin-left: -1px;
			}

			i,
			svg {
				width: 16px;
				height: 16px;
				display: inline-block;
				vertical-align: sub;
				margin-right: 5px;
				fill: @color-tab;
			}

			&:hover {
				border: 1px solid @color-border-tab_hover;
				color: @color-tab_hover;
				box-shadow: none;
				background-color: @color-background-gray-hover;
				outline: none;

				i,
				svg {
					fill: @color-tab_hover;
				}
			}

			&:active,
			&.active {
				outline: none;
				background: @color-background-tab_active;
				border: 1px solid @color-border-tab_active;
				color: @color-tab_active;

				i,
				svg {
					fill: @color-tab_active;
				}
			}
		}
	}

	.jodit_tabs_wrapper {
		.jodit_tab {
			display: none;

			&.active {
				display: block;
			}

			.jodit_tab_empty {
				min-width: 220px;
				min-height: 100px;
			}
		}
	}
}