rhodecode/public/css/forms.less

// forms.less
// For use in RhodeCode applications;
// see style guide documentation for guidelines.

form.rcform {

    // reset for ie
    // using :not(#ie) prevents older browsers from applying these rules
    input[type="radio"],
    input[type="checkbox"] {
        padding: 0;
        border: none;
    }
    label { display: inline; border:none; padding:none; }
    .label { display: none; }

    max-width: 940px;
    line-height: normal;
    white-space: normal;
    font-size: @basefontsize;
    font-family: @text-light;
    color: @form-textcolor;

    fieldset,
    .buttons {
        clear: both;
        position: relative;
        display:block;
        width: 100%;
        min-height: 3em;
        margin-bottom: @form-vertical-margin;
        line-height: 1.2em;

        &:after { //clearfix
            content: "";
            clear: both;
            width: 100%;
            height: 1em;
        }

        .label:not(#ie) {
            display: inline;
            margin: 0 1em 0 .5em;
            line-height: 1em;
        }
    }

    legend {
        float: left;
        display: block;
        width: @legend-width;
        margin: 0;
        padding: 0 @padding 0 0;
    }

    .fields {
        float: left;
        display: block;
        width: 100%;
        max-width: 500px;
        margin: 0 0 @padding -@legend-width;
        padding: 0 0 0 @legend-width;
        
        .btn {
            display: inline-block;
            margin: 0 1em @padding 0;
        }
    }
    
    input,
    textarea {
        float: left;
        .box-sizing(content-box);
        padding: @input-padding;
        border: @border-thickness-inputs solid @grey4;
    }

    input {
        float: left;
        margin: 0 @input-padding 0 0;
        line-height: 1em;
    }

    input[type="text"],
    input[type="password"],
    textarea {
        float: left;
        min-width: 200px;
        margin: 0 1em @padding 0;
        color: @form-textcolor;
    }

    input[type="text"],
    input[type="password"] {
        height: 1em;
    }

    textarea {
        width: 100%;
        margin-top: -1em; //so it lines up with legend
        overflow: auto;
    }

    label:not(#ie) {
      cursor: pointer;
      display: inline-block;
      position: relative;
      background: white;
      border-radius: 4px;
      box-shadow: none;

      &:hover::after {
        opacity: 0.5;
      }
    }
 
    input[type="radio"]:not(#ie),
    input[type="checkbox"]:not(#ie) {
        // Hide the input, but have it still be clickable
        opacity: 0;
        float: left;
        height: 0;
        width: 0;
        margin: 0;
        padding: 0;
    }
    input[type='radio'] + label:not(#ie),
    input[type='checkbox'] + label:not(#ie) {
        margin: 0;
        clear: none;
    }

    input[type='radio'] + label:not(#ie) {
        .circle (@form-radio-width,white);
        float: left;
        display: inline-block;
        height: @form-radio-width;
        width: @form-radio-width;
        margin: 2px 6px 2px 0;
        border: 1px solid @grey4;
        background-color: white;
        box-shadow: none;
        text-indent: -9999px;
        transition: none;

        & + .label {
          float: left;
          margin-top: 7px
        }
    }

    input[type='radio']:checked + label:not(#ie) {
        margin: 0 4px 0 -2px;
        padding: 3px;
        border-style: double;
        border-color: white;
        border-width: thick;
        background-color: @rcblue;
        box-shadow: none;
    }

    input[type='checkbox'] + label:not(#ie) {
        float: left;
        width: @form-check-width;
        height: @form-check-width;
        margin: 0 5px 1em 0;
        border: 1px solid @grey3;
        .border-radius(@border-radius);
        background-color: white;
        box-shadow: none;
        text-indent: -9999px;
        transition: none;

        &:after {
            content: '';
            width: 9px;
            height: 5px;
            position: absolute;
            top: 4px;
            left: 4px;
            border: 3px solid @grey3;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            transform: rotate(-45deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */        }
    
        & + .label {
          float: left;
          margin-top: 5px
        }
    }
    
    input[type=checkbox]:not(#ie) {
      visibility: hidden;
      &:checked + label:after {
        opacity: 1;
      }
    }

    // center checkbox and label on a drop-down
    .drop-menu + select + input[type='checkbox'] + label:not(#ie) {
      margin-top:10px;

      & + .label {
        margin-top: 15px;
      }
    }

    .formlist {
        position: relative;
        float: left;
        margin:  0;
        padding: 0;

        li {
            list-style-type: none;

            &:before { content:none; }
            &:after {
                content: "";
                float: left;
                display: block;
                height: @padding;
                width: 100%;
            }
        }
    }

    .drop-menu {
        float: left;
        margin: 0 @input-padding 0 0;
    }

    .help-block,
    .error-message {
        display: block;
        clear: both;
        margin: @textmargin 0;
    }

    .error-message {
        margin-top: 5px;
    }
  
    input[type=submit] {
        &:extend(.btn-primary);

        &:hover {
            &:extend(.btn-primary:hover);
        }
    }

    input[type=reset] {
        &:extend(.btn-default);

        &:hover {
            &:extend(.btn-default:hover);
        }
    }

    select,
    option:checked {
        background-color: @rclightblue;
    }

}


// for situations where we wish to display the form value but not the form input
input.input-valuedisplay {
    border: none;
}

// for forms which only display information
.infoform {
    .fields {
        .field {
            label,
            .label,
            input,
            .input {
                margin-top: 0;
                margin-bottom: 0;
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}