@progress/kendo-ui/css/web/common/editor.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
// Editor

table.k-editor
{
    width: 100%;
    height: 250px;
    table-layout: fixed;
    border-style: solid;
    border-width: 1px;
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 100%;
    vertical-align: top;
    position: relative;
}

.k-editor-inline
{
    padding: .3em .5em;
    word-wrap: break-word;
    overflow: auto;
    position: relative;
    transition: border-color 0.5s;

    &.k-editor {
        border: 1px solid transparent;
    }
}

.k-editortoolbar-dragHandle
{
    cursor: move;
    padding-left: 0;
    padding-right: 3px;
    box-shadow: none !important;
}

.k-editor-widget > .k-window-content
{
    overflow: hidden;
}

.k-editor .k-editor-toolbar-wrap
{
    border: 0;
    padding: 0;
}

.k-editor-toolbar
{
    margin: 0;
    padding: .1em 0;
    list-style-type: none;
    line-height: 1.3em;
    cursor: default;
    word-wrap: break-word; // allow tools to wrap properly in IE
}

.k-editor-toolbar li
{
    display: inline-block;
    vertical-align: middle;
}

.k-webkit .k-editor-toolbar,
.k-ff .k-editor-toolbar,
.k-ie9 .k-editor-toolbar,
.k-edge .k-editor-toolbar
{
    padding: 0;
}

.k-editor-toolbar li
{
    display: inline-block;
    padding: .1em 0;
}

.k-editor-toolbar .k-editor-widget,
.k-editor-toolbar > li
{
    margin-right: 6px;
}

.k-group-start.k-group-end .k-editor-widget
{
    margin-right: 0;
}

.k-editor-toolbar .k-editor-dropdown
{
    position: relative;
}

.k-select-overlay
{
    -webkit-appearance: none;
    opacity: 0;
    z-index: 11000;
    top: 0;
    left: 0;
    position: absolute;
    height: 26px;
    width: 100%;
    margin: -4px 0 0;
}

.k-editor-toolbar .k-separator
{
    position: relative;
    top: 1px;
    border-style: solid;
    border-width: 0 1px 0 0;
    margin: 0 .3em 0 .1em;
    padding: 0 0 0 1px;
    font-size: 1.3em;
}

.k-editor-toolbar .k-break
{
    display: block;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

.k-editor-toolbar .k-dropdown,
.k-editor-toolbar .k-combobox,
.k-editor-toolbar .k-selectbox,
.k-editor-toolbar .k-colorpicker
{
    vertical-align: middle;
}

.k-button-group .k-tool {
    display: inline-block;
    vertical-align: middle;
    margin: 1px 0;
    width: @editor-icon-size;
    height: @editor-icon-size;
    line-height: @editor-icon-size;
}

.k-button-group .k-tool-icon
{
    width: 24px;
    height: 24px;
    vertical-align: middle;
    .disable-high-contrast();
}

.k-editor-toolbar .k-tool-icon.k-icon
{
    top: auto;
    font-size: 16px;
}

// default tool widths
.k-fontName { width: 110px; }
.k-fontSize { width: 124px; }
.k-formatBlock { width: 147px; }

.k-editortoolbar-dragHandle
{
    float:left;
    margin: 1px 0 0;
}

.k-editor-toolbar .k-button-group
{
    padding: 1px;
}

.k-editor .k-editor-toolbar .k-row-break
{
    display: block;
    height: 0;
    font-size: 0;
    line-height: 0;
}

.k-editor-toolbar .k-i-login {
    transform: scaleX(-1);
}

.k-button-group .k-tool
{
    border-style: solid;
    border-width: 1px;
    margin-right: -1px;
}

.k-button-group .k-tool.k-state-hover,
.k-button-group .k-tool:focus
{
    position: relative;
    z-index: 1;
}

.k-rtl .k-button-group .k-tool
{
    border-style: solid;
    border-width: 1px;
}

.k-button-group .k-tool.k-group-end
{
    border-right-width: 1px;
}

.k-rtl .k-button-group .k-tool.k-group-end
{
    border-left-width: 1px;
}

.k-editor-toolbar {

    .k-button-group .k-state-disabled,
    .k-button-group.k-state-disabled
    {
        display: none !important;
    }

    .k-button-group .k-state-hover,
    .k-button-group .k-state-active
    {
        vertical-align: middle;
    }

    .k-button-group .k-state-disabled
    {
        filter: alpha(opacity=30);
        opacity: .3;
    }

}

.k-editor .k-editable-area
{
    width: 100%;
    height: 100%;
    outline: 0;
}

.k-editor.k-resizable .k-editable-area
{
    padding-bottom: 16px;
}

.k-editor .k-content
{
    display: block;
    width: 100%;
    height: 100%;
    border-width: 0;
    margin: 0;
    padding: 0;
    background: #fff;
}

.k-editor .k-editable-area .k-content {
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
}

a.k-tool {
    color: inherit;
    outline: 0;
}

.k-editor iframe.k-content
{
    display: inline;
    vertical-align: top; // fixes missing top border caused by the inline display
}

.k-editor .k-raw-content
{
    border: 0;
    margin: 0;
    padding: 0;
}

.k-editor .k-raw-content,
.k-editor-dialog .k-editor-textarea
{
    font-size: inherit;
    font-family: consolas, "courier new", monospace;
}

.k-editor-dialog
{
    padding: 1em;
    width: 400px;

    .k-edit-label
    {
        width: 25%;
    }

    .k-edit-field
    {
        width: 66%;

        .k-textbox
        {
            width: 96%;
        }
    }
}

.k-viewhtml-dialog
{
    width: auto;
}

.k-filebrowser-dialog
{
    width: auto;
    min-width: 350px;

    .k-filebrowser
    {
        margin: 0 1em 0;
    }

    .k-edit-label
    {
        width: 18%;
    }

    .k-edit-field
    {
        width: 75%;

        .k-textbox
        {
            width: 70%;
        }
    }
}

#k-editor-image-width,
#k-editor-image-height
{
    width: 5em;
}

.k-editor-dialog .k-button
{
    display: inline-block;
}

.k-editor-dialog .k-editor-textarea
{
    width: 600px;
    height: 350px;
    padding: .2em .2em .2em .4em;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
}

.k-button-wrapper .k-link:hover {
    text-decoration: underline;
}

@editor-createTable-cellSize: 18px;

.k-ct-popup {
    width: (8.2 * (@editor-createTable-cellSize + 4));
    padding: .65em .5em .5em;
}

.k-ct-popup .k-status {
    margin: .3em 0;
}

.k-ct-cell {
    border-width: 1px;
    border-style: solid;
    width: @editor-createTable-cellSize;
    height: @editor-createTable-cellSize;
    margin: 1px;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
    .disable-high-contrast();
}

.k-editor .k-resize-handle {
    position: absolute;
    padding: 2px 0;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}

.k-editor .k-overlay {
    position: absolute;
    background-color: #fff;
    opacity: 0;
}

.k-editor .k-toolbar-resizable {
    min-height: 2.4375em;
    position: relative
}

.k-overflow-tools {
    position: absolute;
    right: 0;
    top: 0;
}

.k-editor-overflow-popup .k-tool {
    width: auto;
    height: auto;
    display: block;
    text-align: left;
    text-decoration: initial;
    border: 0;
    padding-right: 0.5em;
    margin: 0;
    padding: 0 6px;
}

.k-editor-overflow-popup .k-tool.k-state-disabled {
    display: none;
}

.k-editor-toolbar .k-tool-text {
    display: none;
}

.k-editor-inline .k-table-resize-handle-wrapper {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #000;
    z-index: 100;

    .k-table-resize-handle {
        width: 100%;
        height: 100%;

        &.k-resize-east {
            cursor: e-resize;
        }

        &.k-resize-north {
            cursor: n-resize;
        }

        &.k-resize-northeast {
            cursor: ne-resize;
        }

        &.k-resize-northwest {
            cursor: nw-resize;
        }

        &.k-resize-south {
            cursor: s-resize;
        }

        &.k-resize-southeast {
            cursor: se-resize;
        }

        &.k-resize-southwest {
            cursor: sw-resize;
        }

        &.k-resize-west {
            cursor: w-resize;
        }
    }
}

.k-editor-inline .k-column-resize-handle-wrapper {
    position: absolute;
    height: 10px;
    width: 10px;
    cursor: col-resize;
    z-index: 2;

    .k-column-resize-handle {
        width: 100%;
        height: 100%;

        .k-column-resize-marker {
            width: 2px;
            height: 100%;
            margin: 0 auto;
            background-color: #00b0ff;
            display: none;
            opacity: 0.8;
        }
    }
}

.k-editor-inline .k-table {
    width: 100%;
    border-spacing: 0;
    margin: 0 0 1em;

    &,
    & td {
        outline: 0;
        border: 1px dotted #ccc;
    }

    td {
        min-width: 1px;
        padding: .2em .3em;
    }
}

.k-table.k-table-resizing {
    opacity: 0.6;
}

.k-editor-inline .k-row-resize-handle-wrapper {
    position: absolute;
    z-index: 2;
    cursor: row-resize;
    width: 10px;
    height: 10px;

    .k-row-resize-handle {
        display: table;
        width: 100%;
        height: 100%;
    }

    .k-row-resize-marker-wrapper {
        display: table-cell;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        vertical-align: middle;
    }

    .k-row-resize-marker {
        display: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 2px;
        background-color: #00b0ff;
        opacity: 0.8;
    }
}

.k-editor-dialog.k-viewhtml-dialog .k-edit-buttons {
    clear: both;
    text-align: right;
    border-width: 1px 0 0;
    border-style: solid;
    position: relative;
    bottom: -1em;
    padding: .6em;
    .k-button {
        margin-right: 0.5em;
    }
}

//TableWizard dialog styles
.k-editor-dialog.k-editor-table-wizard-dialog.k-window-content {
    overflow: hidden;
    min-width: 325px;
    width: 24em;
    padding: 1em 0;
}

.k-editor-dialog .k-edit-form-container {
    width: auto;
}

.k-editor-dialog .k-tabstrip {
    margin: -1.333em 0 0;
}

.k-editor-dialog .k-root-tabs {
    margin: -1em -1em -1.5em;
    padding: 0.5em 1em 0;
    border-width: 0;
}

.k-editor-dialog ul.k-tabstrip-items {
    padding: 0.5em 1em 0;
    border-width: 0 0 1px;
    border-style: solid;
}

.k-editor-dialog ul.k-tabstrip-items .k-loading {
    border-top-width: 0;
}

.k-editor-dialog .k-tabstrip:focus {
    box-shadow: none;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-tabstrip-wrapper .k-content {
    overflow: hidden;
    min-height: 440px;
    height: 35em;
    margin: 0;
    padding: 1em 0.5em 0;
    border-width: 0;
}

.k-editor-dialog .k-edit-field .k-numerictextbox {
    width: 10.6em;
    margin: 0 .35714285em 0 0;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-numerictextbox + .k-dropdown {
    width: 4em;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-textbox,
.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-field .k-dropdown {
    width: 15em;
}

.k-editor-table-wizard-dialog .k-numerictextbox + .k-dropdown {
    width: 5.35714285em;
}

.k-editor-dialog textarea.k-textbox {
    height: 14.28571428em;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-dropdown.k-align {
    width: 4em;
}

.k-popup.k-list-container.k-align {
    padding: 0;
    text-align: center;
}

.k-align-group {
    vertical-align: text-top;
}

.k-popup.k-align .k-list .k-item {
    display: inline-block;
    width: 2.57142857em;
    height: 2.57142857em;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.k-popup.k-align .k-list .k-icon {
    vertical-align: bottom;
    vertical-align: -webkit-baseline-middle;
}

.k-popup.k-align .k-list .k-item:last-child {
    width: auto;
    display: block;
    border-width: 1px 0 0;
    border-style: solid;
}

.k-popup.k-align .k-list .k-item:before {
    width: 2.57142857em;
    height: 2.57142857em;
    line-height: 2.57142857em;
}

.k-animation-container .k-editor-toolbar {
    text-align: center;
    line-height: 1.3em;
}

.k-animation-container .k-editor-toolbar .k-tool {
    display: inline-block;
    height: 24px;
    padding: 0 0.5em;
    text-decoration: none;
    font-size: 0.85em;
    color: inherit;
}

.k-animation-container .k-editor-toolbar .k-i-table-wizard-insert {
    width: 24px;
    height: 24px;
}

.k-animation-container .k-editor-toolbar .k-tool-text {
    display: inline;
    vertical-align: sub;
    padding: 0 0 0 .5em;
}

.k-editor-dialog.k-editor-table-wizard-dialog .k-edit-buttons {
    padding: 1em 0.8em;
    margin: 0.5em 0 0;
}

// End - TableWizard dialog styles