// 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:0; } .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; &: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; } } .badged-field { .user-badge { line-height: 25px; padding: 10px 5px; border-radius: @border-radius; border-top: 1px solid @rclightblue; border-left: 1px solid @rclightblue; border-bottom: 1px solid @rclightblue; font-size: 14px; font-style: normal; color: @text-light; display: inline-block; vertical-align: top; cursor: default; margin-right: -2px; } .badge-input-container { display: flex; position: relative; } .user-disabled { text-decoration: line-through; } .badge-input-wrap { display: inline-block; } } // 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; } } } }