Show More
forms.less
320 lines
| 7.1 KiB
| text/x-less
|
LessCssLexer
r1 | // 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; | ||||
} | ||||
} | ||||
r225 | .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; | ||||
} | ||||
} | ||||
r1 | ||||
// 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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||