jodit
Version:
Jodit is awesome and usefully wysiwyg editor with filebrowser
421 lines (389 loc) • 8.6 kB
text/less
/*!
* 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';
.jodit_dialog_box {
.font();
&.jodit_dialog_box-moved {
user-select: none;
}
box-sizing: border-box;
* {
box-sizing: border-box;
}
.jodit_elfinder {
&,
& * {
box-sizing: initial;
}
}
display: none;
width: 0;
height: 0;
border: 0;
position: absolute;
will-change: left, top, width, height;
.jodit_dialog_overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: @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;
}
&.active {
display: block;
}
.jodit_dialog {
z-index: @z-index-dialog;
display: inline-block;
vertical-align: middle;
white-space: normal;
text-align: left;
position: fixed;
left: 0;
top: 0;
background-color: #fff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
min-width: 200px;
min-height: 100px;
@media (max-width: @screen-xs) {
max-width: 100%;
width: 100% ;
height: 100% ;
top: 0 ;
left: 0 ;
}
.jodit_promt {
max-width: 300px;
min-width: 200px;
padding: 10px;
word-break: break-all;
label {
margin-bottom: 5px;
display: block;
}
input[type='text'] {
display: block;
border: 1px solid #ccc;
background: #fff;
width: 100%;
height: 28px;
line-height: 16px;
padding: 3px 6px;
outline: none;
}
}
.jodit_alert {
max-width: 300px;
min-width: 200px;
padding: 10px;
word-break: break-all;
}
.jodit_button {
padding: 0;
margin: 0;
border: 0;
display: inline-block;
vertical-align: top;
width: 32px;
height: 48px;
line-height: 48px;
text-align: center;
cursor: pointer;
text-decoration: none;
&:not(.disabled):hover {
background-color: @color-background-button-hover;
}
&.disabled {
opacity: 0.7;
}
}
.jodit_input {
border: 1px solid #ccc;
padding: 5px 10px;
background-color: #fff;
outline: 0;
font: 13px Arial;
height: 28px;
vertical-align: middle;
}
select.jodit_input {
width: 75px;
}
.jodit_button .jodit_icon,
.jodit_dialog_header .jodit_icon,
.jodit_button svg,
.jodit_dialog_header svg {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
}
.jodit_dialog_header {
display: flex;
justify-content: space-between;
text-align: left;
color: #222222;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16),
0 1px 2px rgba(0, 0, 0, 0.23);
cursor: move;
height: 48px;
overflow: hidden;
.jodit_dialog_header-toolbar,
.jodit_dialog_header-title {
flex-shrink: 3;
font-size: 18px;
margin: 0;
font-weight: 400;
line-height: 48px;
//display: inline-block;
vertical-align: top;
@media (max-width: @screen-xs) {
padding-left: 0;
}
padding: 0 @padding-default;
}
button {
margin-right: 10px;
}
.jodit_dialog_header-button {
color: #222222;
font-size: 28px;
//font-weight: 700;
//display: inline-block;
transition: background-color 0.2s ease 0s;
flex-basis: 48px;
height: 48px;
//vertical-align: top;
line-height: 48px;
text-decoration: none;
text-align: center;
//float: right;
&:hover {
background-color: @color-background-button-hover;
}
}
.jodit_toolbar {
background: transparent;
display: block;
height: 100%;
border: 0;
box-shadow: none;
> li.jodit_toolbar_btn {
vertical-align: middle;
select,
input[type='text'],
input[type='number'],
input[type='url'] {
padding-left: @padding-default;
width: auto;
}
}
}
//.jodit_close svg {
// width: 18px;
// height: 18px;
// margin: 15px 0;
// vertical-align: top;
//}
}
.jodit_dialog_content {
height: calc(~'100% - 48px');
overflow: auto;
.jodit_form_group {
margin-bottom: 10px;
padding: 0 10px;
&:first-child {
margin-top: 10px;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
select,
input {
&.select,
&[type='text'],
&[type='number'],
&[type='url'] {
display: block;
height: 34px;
padding: 6px 4px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
&:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
0 0 8px rgba(102, 175, 233, 0.6);
}
&[disabled] {
background-color: #f0f0f0;
color: #ccc;
}
&:not([class*='col-']) {
width: 100%;
}
}
}
.jodit_input_group {
display: table;
border-collapse: separate;
width: 100%;
> * {
vertical-align: middle;
display: table-cell;
height: 34px;
}
> input {
float: left;
margin: 0 ;
&:not([class*='col-']) {
width: 100%;
}
}
&-buttons {
width: 1%;
font-size: 0;
white-space: nowrap;
vertical-align: middle;
> a {
text-align: center;
display: inline-block;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
height: 34px;
line-height: 34px;
}
}
}
}
}
.jodit_dialog_footer {
padding: 10px 10px 0;
text-align: center;
height: 48px;
display: none;
.jodit_button {
width: auto;
margin-bottom: 10px;
height: 32px;
line-height: 100%;
padding: 0 15px;
background-color: #ccc;
border: 1px solid #ccc;
color: #000;
font-size: 0;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
svg {
display: inline-block;
width: 24px;
height: 24px;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
font-size: 14px;
margin-left: 5px;
}
&:focus {
border: 1px solid #8bade4;
outline: 1px solid #82b2e8;
}
}
.jodit_button:nth-child(n + 2) {
margin-left: 10px;
}
}
&.with_footer .jodit_dialog_content {
height: calc(~'100% - 96px');
}
&.with_footer .jodit_dialog_footer {
display: block;
}
.jodit_dialog_resizer {
position: absolute;
bottom: 0;
right: 0;
cursor: se-resize;
width: 7px;
height: 7px;
display: inline-block;
//border: 8px solid rgba(0, 0, 0, .2);
//border-left-color: rgba(0, 0, 0, 0) ;
//border-top-color: rgba(0, 0, 0, 0) ;
background-image: data-uri('../modules/resizer.png');
/*&:after {
content: "";
display: inline-block;
width: 0;
height: 0;
position: absolute;
border: 3px solid #fff;
border-top: 3px solid rgba(0, 0, 0, 0);
border-left: 3px solid rgba(0,0,0,0);
}*/
&:hover {
border-color: rgba(0, 0, 0, 0.6);
}
}
@media (max-width: @screen-xs) {
.jodit_dialog_resizer {
display: none;
}
}
}
&.jodit_fullsize .jodit_dialog {
top: 0 ;
bottom: 0 ;
left: 0 ;
right: 0 ;
width: 100% ;
height: 100% ;
.jodit_dialog_resizer {
display: none;
}
}
}
@media (max-width: @screen-sm) {
.jodit_dialog_header_title,
.jodit_dialog_header_fullsize,
.jodit_dialog_header .jodit_toolbar_btn-filter,
.jodit_dialog_header .jodit_toolbar_btn-sort,
.jodit_dialog_header .jodit_toolbar_btn-separator,
.jodit_dialog_header .jodit_input {
display: none ;
}
}