jodit/src/styles/widgets/colorpicker.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';
@color-cell-size: 18px;
@color-cell-icon-size: 12px;
.jodit_colorpicker {
	min-width: 180px;
	text-align: left;
	margin: 0;
	user-select: none;
	.jodit_colorpicker_group {
		margin-bottom: 5px;
		white-space: normal;
	}
	a {
		width: @color-cell-size;
		height: @color-cell-size;
		line-height: @color-cell-size - 2;
		display: inline-block;
		text-decoration: none;
		vertical-align: middle;
		text-align: center;
		&:before {
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
			width: 0;
		}
		svg {
			display: inline-block;
			vertical-align: middle;
			font-smoothing: antialiased;
			max-width: @color-cell-size - 4;
		}

		&:hover {
			border-color: #000;
		}
		&:active {
			background: #d6d6d6;
			color: @color-border-active;
		}
	}
	.jodit_text_icon {
		width: auto;
		text-decoration: none;
		color: @color-default;
	}
	span {
		float: right;
		em {
			width: 16px;
			height: 16px;
			display: inline-block;
			margin-right: 4px;
		}
		input {
			width: 18px;
			height: 18px;
			padding: 0;
			border: none;
			-webkit-appearance: none;
			&[type='color']::-webkit-color-swatch-wrapper {
				padding: 0;
			}
			input[type='color']::-webkit-color-swatch {
				border: none;
			}
		}
	}
}