LimitLess-admin-panel/assets/less/components/plugins/forms/extensions/editable.less

/* ------------------------------------------------------------------------------
*
*  # X-editable
*
*  In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


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

// Base
.editable {
    background-color: transparent;

    .form-horizontal & {
        padding-top: (@padding-base-vertical + 1);
        display: inline-block;
    }
}

// Pre wrapped content
.editable-pre-wrapped {
    white-space: pre-wrap;
}


// Layout
// ------------------------------

// Form
.editableform {

    // Remove bottom spacing
    .form-group:last-child {
        margin-bottom: 0;
    }

    // Set min width to the input field
    .form-control {
        min-width: 200px;
    }

    // Checkbox, radio
    .checkbox,
    .radio {
        margin-top: 0;
        margin-bottom: 0;

        > div {
            margin-top: (@padding-base-vertical + 1);
            margin-bottom: (@padding-base-vertical + 1);
            position: relative;
        }
    }
}

// Buttons
.editable-buttons {
    display: inline-block;
    vertical-align: top;
    margin-left: @element-horizontal-spacing;

    &.editable-buttons-bottom {
        display: block;
        margin-top: @line-height-computed;
        margin-left: 0;
        text-align: center;
    }

    .editable-cancel {
        margin-left: @element-horizontal-spacing; 
    }
}

// Editable inputs
.editable-input {
    vertical-align: top; 
    display: inline-block;
    width: auto;
    white-space: normal;

    // Remove bottom margin from help block
    .help-block {
        margin-bottom: 0;
    }

    // Set fixed width to input group
    .input-group {
        width: 250px;
    }

    // Elastic textarea
    .elastic {
        height: 100px;
    }
}

// Loading icon
.editableform-loading {
    width: @icon-font-size;
    height: @icon-font-size;
    margin: auto;

    // Icon
    &:after {
        content: '\eb55';
        font-family: 'icomoon';
        font-size: @icon-font-size;
        display: block;
        line-height: 1;
        margin: auto;
        width: @icon-font-size;
        height: @icon-font-size;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        .animation(rotation 1s ease infinite);
    }
}

// Errors
.editable-error {
    color: @brand-danger;  
}
.editable-error-block {
    max-width: 300px;
    margin: @padding-base-vertical 0 0 0;
    width: auto;
    white-space: normal;
}

// Transition
.editable-bg-transition {
    color: inherit;
    background-color: transparent;
    .transition(background-color 0.2s ease-out);
}


// Clear buttons
// ------------------------------

// Date inputs clear button
.editable-clear {
    clear: both;
    text-decoration: none;
    text-align: right;
}

// Clear input button
.editable-clear-x {
    position: absolute;
    right: @padding-base-horizontal - 3;
    top: ((@input-height-base - @icon-font-size) / 2);
    line-height: 1;
    cursor: pointer;
    z-index: 100;
    .opacity(0.6);

    &:hover {
        .opacity(1);
    }

    &:after {
        content: '\ed6b';
        font-family: 'icomoon';
        display: block;
        font-size: @icon-font-size;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}


// Links
// ------------------------------

// Link
.editable-click {
    &,
    a& {
        &,
        &:hover {
            border-bottom: 1px dashed @link-color;
        }
    }

    &.editable-disabled {
        &,
        a& {
            &,
            &:hover {
                color: @text-muted;
                cursor: default;
                border-bottom: 0;
            }
        }
    }

    .label {
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

// Empty link
.editable-empty {
    &,
    &:hover,
    &:focus {
        font-style: italic; 
        color: @brand-danger;  
    }

    a& {
        &,
        &:hover,
        &:focus {
            border-bottom-color: @brand-danger;
        }
    }
}



// Input types
// ------------------------------

// Combodate
.combodate {
    white-space: nowrap;

    .day,
    .year,
    .hour,
    .minute {
        min-width: 80px;
    }

    .form-control {
        display: inline-block;
    }
}

// Daterange
.input-daterange {
    input {
        text-align: center;

        &:first-child {
            .border-left-radius(@border-radius-base);
        }

        &:last-child {
            .border-right-radius(@border-radius-base);
        }
    }
}

// Address
.editable-address {
    display: block;

    > label > span {
        width: 70px;  
        display: inline-block;
        margin-bottom: @padding-base-vertical;
    }
}

// Date
.editable-date {
    padding: 0; 
    margin: 0;
    float: left;
}

// Checklist
.editable-checklist label {
    white-space: nowrap;

    > input[type="checkbox"] {
        vertical-align: middle;
        margin: 0;
    }
}

// WYSIHTML5 editor
.editable-wysihtml5 {
    width: 566px; 
    height: 250px; 
}



// Editable modes
// ------------------------------

// Editable modes
.editable-container {
    &.editable-popup {
        max-width: none !important;
    }

    &.editable-inline {
        display: inline-block; 
        vertical-align: middle;
        width: auto;

        .editableform-loading {
            background-position: left 5px;      
        }

        .add-on .icon-th {
            margin-top: 3px;
            margin-left: 1px; 
        }
    }

    &.popover {
        width: auto;
        min-width: 200px;
    }
}