##// END OF EJS Templates
release: Finish preparation for 4.14.0
release: Finish preparation for 4.14.0

File last commit:

r1406:1948964e default
r3195:9151328c v4.14.0 stable
Show More
forms.less
320 lines | 7.1 KiB | text/x-less | LessCssLexer
// 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;
&: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;
}
}
.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;
}
}
}
}