| @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 */ |