jodit/src/styles/modules/btn.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
 */

.jodit_btn {
	.font();

	border: 1px solid #ccc;
	border-radius: 0;

	background-color: #f5f5f5;
	background-image: linear-gradient(to bottom, #fff, #e6e6e6);
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	color: #333;

	background-repeat: repeat-x;
	outline: 0;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;

	&:hover {
		background-color: #e6e6e6;
		background-position: 0 -15px;
		text-decoration: none;
	}

	.jodit_button_variant(
		@name,
		@background_color,
		@background_gradient_from_color,
		@background_gradient_to_color,
		@background_hover_color,
		@color: #ffffff
	) {
		&.jodit_btn_@{name} {
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			background-color: @background_color;
			background-image: linear-gradient(
				to bottom,
				@background_gradient_from_color,
				@background_gradient_to_color
			);
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1)
				rgba(0, 0, 0, 0.25);
			color: @color;

			svg {
				fill: @color;
			}

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

	.jodit_button_variant(success, #5bb75b, #62c462, #51a351, #51a351);
	.jodit_button_variant(danger, #da4f49, #ee5f5b, #bd362f, #bd362f);
	.jodit_button_variant(inverse, #363636, #444444, #222222, #222222);

	&:active,
	&.active {
		background-image: none;
		box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
			0 1px 2px rgba(0, 0, 0, 0.05);
	}
}