blob: 040b1b73fb3817513bdcbb52c3a1be68af98264f [file] [log] [blame]
@formBlockBackground: #b6dcf7;
@formLabelColor: #0f649d;
// Color to surround a UI element that has focus
@color_focus: #5b9dd9;
#form {
.clearfix;
}
.block-form {
background: @color_grey url(@image_block_form_bg) 0 0 repeat-x;
border: 1px solid #b4b4b4;
padding: 13px 20px;
}
.block-form-title {
margin-bottom: 15px;
.title {
color: #c53926;
font-family: 'Oswald', sans-serif;
font-size: 38px;
line-height: 40px;
text-transform: uppercase;
}
.req {
color: #d5620e;
font-size: 10px;
font-style: italic;
font-weight: bold;
line-height: 13px;
padding-left: 15px;
vertical-align: top;
}
}
form {
fieldset {
margin-bottom: 15px;
position: relative;
padding: 0;
border: 0;
legend {
display: block;
float: left;
height: 36px;
position: relative;
width: 100%;
span {
color: @formLabelColor;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 25px;
font-weight: bold;
left: 2px;
line-height: 32px;
position: absolute;
top: 0;
}
}
}
}
.form-row {
/*Default form row styles*/
color: #666;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 13px;
line-height: 15px;
margin-bottom: 15px;
width: 100%;
&:last-child {
margin-bottom: 0;
}
.add-field-link {
clear: both;
display: block;
padding: 4px 0 0 4px;
a {
color: #238bd2;
}
}
label {
&.form-label {
/*Default form label*/
color: @formLabelColor;
display: block;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
font-size: 18px;
line-height: 22px;
padding: 0 0 0 2px;
em {
/*Required asterisk*/
color: #d5620e;
font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: bold;
vertical-align: top;
}
}
}
.note {
/*Default form note*/
color: #d5620e;
display: block;
font-size: 12px;
padding-left: 2px;
line-height: normal;
}
.text-input {
background: #f6f6f6;
border: 1px solid #d2d2d2;
.lh-box-shadow(2px 2px 5px rgba(0, 0, 0, .09) inset);
font-size: 13px;
}
input[type=text] {
.text-input;
height: 28px;
line-height: 28px;
padding: 0;
text-indent: 5px;
width: 100%;
}
input[type=text]:focus,
textarea:focus {
border-color: @color_focus;
box-shadow: 0 0 5px @color_focus;
outline: none !important;
}
textarea {
.text-input;
.lh-box-sizing(border-box);
line-height: 20px;
padding: 8px;
width: 100%;
}
.selector.focus {
box-shadow: 0 0 5px @color_focus;
outline: solid 1px @color_focus;
}
}
.form-checkbox {
.form-checkbox-item .checker {
margin-right: 0;
}
margin: 2px;
}
.form-radio .form-radio-item label {
vertical-align: middle;
}
.form-checkbox .form-checkbox-item,
.form-radio .form-radio-item {
display: block;
margin: 5px 0;
}
.form-checkbox label,
.form-radio label {
cursor: pointer;
}
.form-row.error {
/*Row with error*/
.form-row-error-msg {
color: #ff0000;
font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
font-size: 12px;
font-weight: bold;
padding-left: 10px;
}
input[type=text] {
background: #fce6e6;
border: 1px solid #ff0000;
.lh-box-shadow(2px 2px 5px rgba(255, 0, 0, .16) inset);
}
.text-core .text-wrap .text-tags .text-tag .text-button {
background: #c8c8c8;
}
}
.form-row-buttons {
clear: both;
margin-top: 10px;
input.button {
background-position: 90% 50%;
&:first-child {
margin-right: 20px;
}
}
}
div.tos {
border: 2px solid #D2D2D2;
height: 250px;
margin-bottom: 10px;
overflow: auto;
padding: 10px;
clear: both;
}
.inline-input-row {
> * {
display: inline-block;
}
}
/* @group Task creation */
.form-row-task-completion-time,
.form-row-task-difficulty,
.form-row-task-assigned-mentor {
float: left;
}
.form-row-task-completion-time {
margin-right: 20px;
width: 220px;
.form-row-task-completion-time-inner {
background: @formBlockBackground url(@image_block_stopwatch_sm) 5px 5px no-repeat;
font-size: 18px;
padding: 10px 0 10px 50px;
}
input[type=text] {
width: 30px;
}
}
.form-row-task-difficulty {
margin-right: 20px;
width: 165px;
}
.form-row-task-difficulty-inner {
background: @formBlockBackground url(@image_cog_grey_sm) 5px 5px no-repeat;
padding: 10px 0 10px 50px;
}
.form-row-task-assigned-mentor {
width: 215px;
}
.form-row-task-assigned-mentor-inner {
background: @formBlockBackground;
padding: 10px;
width: 215px;
}
/* @end */
/* @group Conversation creation */
.form-row-conversation-recipients {
background: @formBlockBackground;
padding: 5px;
.form-label {
font-size: 14px !important;
}
hr {
background: lighten(@formBlockBackground, 10%);
border: none;
margin: 5px auto;
}
}
.form-row-message_content {
&.error {
.mceLayout {
border: solid 1px #ff0000;
}
}
.form-row-error-msg {
margin-left: 0;
.errorlist {
margin-bottom: 2px;
padding-left: 0;
li {
list-style: none;
margin-left: 0;
}
}
}
}
/* @end */
/* @group TextExt */
.text-core {
position: relative;
.text-wrap {
.form-row.text-input;
.text-dropdown {
background: #ffffff;
border: 1px solid #9daccc;
.lh-box-sizing(border-box);
display: none;
max-height: 100px;
overflow-x: hidden;
overflow-y: auto;
padding: 1px;
position: absolute;
width: 100%;
z-index: 3;
.text-list {
.text-suggestion {
cursor: pointer;
padding: 3px 5px;
em {
font-style: normal;
text-decoration: underline;
}
&.text-selected {
background: #6d84b4;
color: #ffffff;
}
}
}
&.text-position-above {
margin-bottom: 1px;
}
&.text-position-below {
margin-top: 1px;
}
}
.text-tags {
.lh-box-sizing(border-box);
cursor: text;
height: 100%;
padding: 3px 35px 3px 3px;
position: absolute;
width: 100%;
.text-tag {
float: left;
.text-button {
background: #d8d8d8;
.lh-border-radius(2px);
.lh-box-sizing(border-box);
color: #000000;
cursor: pointer;
float: left;
font-family: Arial, "Helvetica Neue", "Liberation Sans", FreeSans, sans-serif;
height: 20px;
margin: 1px 3px 2px 1px;
padding: 2px 20px 0px 3px;
position: relative;
a.text-remove {
background: #bababa;
.lh-border-radius(100%);
.lh-box-shadow(0 0 2px #a0a0a0 inner);
bottom: 5px;
color: #5a5a5a;
display: block;
height: 11px;
position: absolute;
right: 4px;
width: 11px;
&:before {
bottom: 4px;
content: 'x';
font: 9px verdana, sans-serif;
left: 3px;
position: relative;
}
&:hover {
background: #a8a8a8;
}
}
}
}
&.text-tags-on-top {
z-index: 2;
}
}
textarea, input {
background: none;
border: none;
.lh-border-radius(0);
.lh-box-shadow(none);
.lh-box-sizing(border-box);
height: auto;
line-height: 21px !important;
margin: 0;
margin-left: -1px;
overflow: hidden;
padding: 3px 5px 3px 5px;
position: absolute;
width: 100%;
resize: none;
white-space: nowrap;
z-index: 0;
}
}
}
.form-below-header {
color: #666;
margin-bottom: 10px;
padding-left: 2px;
}
/* @end */