|
|
// 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;
|
|
|
|
|
|
& + .last-item {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.rcform-element {
|
|
|
|
|
|
label { display: inline; border:none; padding:0; }
|
|
|
.label { display: none; }
|
|
|
|
|
|
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"],
|
|
|
input[type="checkbox"] {
|
|
|
padding: 0;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
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 2px 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 0px 0 -2px;
|
|
|
padding: 3px;
|
|
|
border-style: double;
|
|
|
border-color: white;
|
|
|
border-width: thick;
|
|
|
background-color: @rcblue;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
fieldset {
|
|
|
.label:not(#ie) {
|
|
|
display: inline;
|
|
|
margin: 0 1em 0 .5em;
|
|
|
line-height: 1em;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.badged-field {
|
|
|
.user-badge {
|
|
|
line-height: 25px;
|
|
|
padding: .4em;
|
|
|
border-radius: @border-radius;
|
|
|
border-top: 1px solid @grey4;
|
|
|
border-left: 1px solid @grey4;
|
|
|
border-bottom: 1px solid @grey4;
|
|
|
font-size: 14px;
|
|
|
font-style: normal;
|
|
|
color: @text-light;
|
|
|
background: @grey7;
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
