WrenchBoardDocker/assets/less/components/plugins/forms/editors/wysihtml5.less

/* ------------------------------------------------------------------------------
*
*  # WYSIHTML5 editor
*
*  An open source rich text editor based on HTML5 technology
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Core
// ----------------------------------------

// Base
.wysihtml5 {
    width: 100%;
    height: auto;
    min-height: 350px;
    max-height: 450px;
    resize: vertical;
    background-color: #fff;
    border: 1px solid @panel-default-border;
    padding: @content-padding-large;
    overflow: scroll;
    outline: 0;
    .border-bottom-radius(@border-radius-base);
}

// Container
.wysihtml5-sandbox {
    width: 100%!important;
    border-top-width: 0!important;
    padding-top: 0!important;
}

// Modals
.bootstrap-wysihtml5-insert-link-modal,
.bootstrap-wysihtml5-insert-image-modal {
    .modal-dialog {
        width: 566px;
    }
}


// Toolbar
// ----------------------------------------

.wysihtml5-toolbar {
    margin: 0;
    padding: @content-padding-large;
    padding-top: 0;
    display: block;
    background-color: @panel-bg;
    border: 1px solid @panel-default-border;
    border-bottom: 0;
    .border-top-radius(@border-radius-base);

    // List item
    > li {
        display: inline-block;
        list-style: none;
        margin: @content-padding-large @content-padding-large 0 0;
    }

    // Dropdown menu
    .dropdown-menu {
        max-height: 200px;
        overflow-y: auto;

        // Color select
        .color-select {
            > li > a {
                &:hover,
                &:focus {
                    background-color: @dropdown-link-hover-bg;
                    color: @text-color;
                }
            }
        }

        // Hide dropdown if disabled
        .wysihtml5-commands-disabled & {
            display: none !important;
        }
    }

    // Dropdown icon/caret
    .dropdown-toggle {
        > [class*=icon-] {
            margin-right: @element-horizontal-spacing;
        }

        // Caret
        .caret {
            margin-left: @element-horizontal-spacing;
        }
    }


    // Link styles
    a {
        &[data-wysihtml5-command=bold] {
            font-weight: bold;
        }
        &[data-wysihtml5-command=italic] {
            font-style: italic;
        }
        &[data-wysihtml5-command=underline] {
            text-decoration: underline;
        }
        &.btn.wysihtml5-command-active {
            .box-shadow(inset 0 1px 2px fade(#000, 10%));
        }
        &.wysihtml5-colors-title {
            padding-left: (@icon-font-size + (@padding-base-horizontal * 2));
        }
    }


    //
    // Colors
    //

    // Color indicator
    .wysihtml5-colors {
        display: block;
        width: @icon-font-size;
        height: @icon-font-size;
        position: absolute;
        pointer-events: none;
        left: @padding-base-horizontal;
        top: (((@padding-base-vertical + 1) * 2) + @line-height-computed - @icon-font-size) / 2;
        border-radius: 100px;
    }

    // Color commands
    div[data-wysihtml5-command-value="black"] { background: black !important }
    div[data-wysihtml5-command-value="silver"] { background: silver !important }
    div[data-wysihtml5-command-value="gray"] { background: gray !important }
    div[data-wysihtml5-command-value="maroon"] { background: maroon !important }
    div[data-wysihtml5-command-value="red"] { background: red !important }
    div[data-wysihtml5-command-value="purple"] { background: purple !important }
    div[data-wysihtml5-command-value="green"] { background: green !important }
    div[data-wysihtml5-command-value="olive"] { background: olive !important }
    div[data-wysihtml5-command-value="navy"] { background: navy !important }
    div[data-wysihtml5-command-value="blue"] { background: blue !important }
    div[data-wysihtml5-command-value="orange"] { background: orange !important }


    // Define colors
    .wysiwyg-color-black {
        color: black;
    }
    .wysiwyg-color-silver {
        color: silver;
    }
    .wysiwyg-color-gray {
        color: gray;
    }
    .wysiwyg-color-white {
        color: white;
    }
    .wysiwyg-color-maroon {
        color: maroon;
    }
    .wysiwyg-color-red {
        color: red;
    }
    .wysiwyg-color-purple {
        color: purple;
    }
    .wysiwyg-color-fuchsia {
        color: fuchsia;
    }
    .wysiwyg-color-green {
        color: green;
    }
    .wysiwyg-color-lime {
        color: lime;
    }
    .wysiwyg-color-olive {
        color: olive;
    }
    .wysiwyg-color-yellow {
        color: yellow;
    }
    .wysiwyg-color-navy {
        color: navy;
    }
    .wysiwyg-color-blue {
        color: blue;
    }
    .wysiwyg-color-teal {
        color: teal;
    }
    .wysiwyg-color-aqua {
        color: aqua;
    }
    .wysiwyg-color-orange {
        color: orange;
    }
}