// Contains the style definitions used for .main-content
// elements which are mainly around the admin settings.


// TODO: johbo: Integrate in a better way, this is for "main content" which
// should not have a limit on the width.
.main-content-full {
    clear: both;
}


.main-content {
    max-width: @maincontent-maxwidth;

    h3,
    // TODO: johbo: Change templates to use h3 instead of h4 here
    h4 {
        line-height: 1em;
    }

    // TODO: johbo: Check if we can do that on a global level
    table {
        th {
            padding: 0;
        }
        td.field{
                .help-block{
                    margin-left: 0;
                }
        }
    }

    // TODO: johbo: Tweak this into the general styling, for a full width
    // textarea
    .textarea-full {
        // 2x 10px padding and 2x 1px border
        margin-right: 22px;
    }

}


// TODO: johbo: duplicated, think about a mixins.less
.block-left{
    float: left;
}

.form {
    .checkboxes {
        // TODO: johbo: Should be changed in .checkboxes already
        width: auto;
    }

    // TODO: johbo: some settings pages are broken and don't have the .buttons
    // inside the .fields, tweak those templates and remove this.
    .buttons {
        margin-top: @textmargin;
    }

    .help-block {
        display: block;
        margin-left: @label-width;
        &.pre-formatting {
            white-space: pre;
        }
    }

    .action_button {
        color: @grey4;
    }
}

.main-content-full-width {
    .main-content;
    width: 100%;
    min-width: 100%;
}

.main-content-auto-width {
    .main-content;
    width: auto;
    min-width: 100%;
    max-width: inherit;
}

.field {
    clear: left;
    margin-bottom: @padding;

}

.input-monospace {
    font-family: @text-monospace;
}

.fields {
	label {
		color: @grey2;
	}

    .field {
        clear: right;
        margin-bottom: @textmargin;
        width: 100%;

        .label {
            float: left;
            margin-right: @form-vertical-margin;
            margin-top: 0;
            padding-top: @input-padding-px + @border-thickness-inputs;
            width: @label-width - @form-vertical-margin;
        }
        // used in forms for fields that show just text
        .label-text {
            .label;
            padding-top: 5px;
        }
        .label-branch-perm {
            .label;
            width: 115px;
        }

        // Used to position content on the right side of a .label
        .content,
        .side-by-side-selector {
            padding-top: @input-padding-px + @input-border-thickness;
        }

        .checkboxes,
        .input,
        .select,
        .textarea,
        .content {
            float: none;
            margin-left: @label-width;

            .help-block {
                margin-left: 0;
            }
        }

        .input-branch-perm {
            .input;
            margin-left: 140px;
        }

        .input-branch-perm-order {
            width: 40px;
        }

        .checkboxes,
        .input,
        .select {
            .help-block {
                display: block;
            }
        }

        .checkboxes,
        .radios {
            // TODO: johbo: We get a 4px margin from the from-bootstrap,
            // compensating here to align well with labels on the left.
            padding-top: @input-padding-px + @input-border-thickness - 3px;
        }

        .checkbox,
        .radio {
            display: block;
            width: auto;
        }

        .checkbox + .checkbox {
            display: block;
        }

        .input,
        .select {
            .help-block,
            .info-block {
                margin-top: @form-vertical-margin / 2;
            }
        }

        .input {
            .branch-perm {
                width: 80px;
            }
            .medium {
                width: @fields-input-m;
            }
            .large {
                width: @fields-input-l;
            }

            .text-as-placeholder {
                padding-top: @input-padding-px + @border-thickness-inputs;
            }

            .no-border {
                border: 1px;
            }

            .no-horizontal-padding {
                padding-left: 0;
                padding-right: 0;
            }

        }

        // TODO: johbo: Try to find a better integration of this bit.
        // When using a select2 inside of a field, it should not have the
        // top margin.
        .select .drop-menu {
            margin-top: 0;
        }

        .textarea {
            float: none;

            textarea {
                // TODO: johbo: From somewhere we get a clear which does
                // more harm than good here.
                clear: none;
            }

            .CodeMirror {
               // TODO: johbo: Tweak to position the .help-block nicer,
               // figure out how to apply for .text-block instead.
                margin-bottom: 10px;
            }

            // TODO: johbo: Check if we can remove the grey background on
            // the global level and remove this if possible.
            .help-block {
                background: transparent;
                padding: 0;
            }
        }

        &.tag_patterns,
        &.branch_patterns {

            input {
                max-width: 430px;
            }
        }
    }

    .field-sm {
        .label {
            padding-top: @input-padding-px / 2 + @input-border-thickness;
        }
        .checkboxes,
        .radios {
            // TODO: johbo: We get a 4px margin from the from-bootstrap,
            // compensating here to align well with labels on the left.
            padding-top: @input-padding-px / 2 + @input-border-thickness - 3px;
        }
    }

    .field.customhooks {
        .label {
            padding-top: 0;
        }
        .input-wrapper {
            padding-right: 25px;

            input {
                width: 100%;
            }
        }
        .input {
            padding-right: 25px;
        }
    }

    .buttons {
        // TODO: johbo: define variable for this value.
        // Note that this should be 40px but since most elements add some
        // space in the bottom, we are with 20 closer to 40.
        margin-top: 20px;
		clear: both;
        margin-bottom: @padding;
    }

    .desc{
        margin-right: @textmargin;
    }

    input,
    .drop-menu {
        margin-right: @padding/3;
    }

}

.form-vertical .fields .field {

    .label {
        float: none;
        width: auto;
    }

    .checkboxes,
    .input,
    .select,
    .textarea {
        margin-left: 0;
    }

    // TODO: johbo: had to tweak the width here to make it big enough for
    // the license.
    .textarea.editor {
        max-width: none;
    }

    .textarea.large textarea {
        min-height: 200px;
    }

    .help-block {
        margin-left: 0;
    }
}




.main-content {
    .block-left;

    .section {
        margin-bottom: @space;
    }


    // Table aligning same way as forms in admin section, e.g.
    // python packages table
    table.formalign {
        float: left;
        width: auto;

        .label {
            width: @label-width;
        }

    }


    table.issuetracker {

        color: @text-color;

        .issue-tracker-example {
            color: @grey4;
        }
    }

    .side-by-side-selector{
        .left-group,
        .middle-group,
        .right-group{
            float: left;
        }

        .left-group,
        .right-group{
            width: 45%;
            text-align: center;

            label{
                width: 100%;
                text-align: left;
            }

            select{
                width: 100%;
                background: none;
                border-color: @border-highlight-color;
                color: @text-color;
                font-family: @text-light;
                font-size: @basefontsize;
                color: @grey1;
                padding: @textmargin/2;
            }

            select:after{
                content: "";
            }

        }

        .middle-group{
            width: 10%;
            text-align: center;
            padding-top: 4em;
            i {
                font-size: 18px;
                cursor: pointer;
                line-height: 2em;
            }
        }

    }

    .permissions_boxes{
        label, .label{
            margin-right: @textmargin/2;
        }
    }

    .radios{
        label{
            margin-right: @textmargin;
        }
    }
}