| @import "common.less"; |
| /*//////////////// |
| |
| LessCSS |
| |
| ////////////////*/ |
| |
| // Images locations |
| @image_survey_background: "@{images_location}/ui-icons_ef8c08_256x240.png"; |
| @image_grippie: "@{images_gsoc_location}/grippie.png"; |
| |
| /* @group Global */ |
| button, input, textarea { |
| font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; |
| font-size: 13px; |
| } |
| a, a:active, a:visited { |
| color: #f28c00; |
| text-decoration: none; |
| } |
| input::-moz-focus-inner {/*Remove FF button padding*/ |
| border: 0; |
| padding: 0; |
| } |
| .clearfix { |
| zoom: 1; /* IE < 8 */ |
| &:before, &:after { |
| content: "."; |
| display: block; |
| height: 0; |
| visibility: hidden; |
| } |
| &:after { |
| clear: both; |
| } |
| } |
| /* @end */ |
| |
| /* @group Wrappers */ |
| #form-wrap {/*Form wrap DIV*/ |
| margin: 0 auto; |
| width: 550px; |
| } |
| #form-builder {/*Parent UL*/ |
| margin: 10px 0; |
| padding: 0; |
| |
| ul, ul li { |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| } |
| .frmb {/*Each form item*/ |
| li { |
| margin: 10px 0; |
| } |
| } |
| .legend {/*Form item title*/ |
| background: #6EB5E5; |
| color: #fff; |
| cursor: move; |
| font-size: 14px; |
| padding: 5px; |
| } |
| .legend .toggle-form { |
| background: #f6f6f6 url(@image_survey_background) 0 0 no-repeat; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| -moz-border-radius: 4px; |
| -webkit-border-radius: 4px; |
| height: 16px; |
| width: 16px; |
| display: block; |
| text-indent: -9999em; |
| font-size: 1px; |
| overflow: hidden; |
| line-height: 0; |
| background-position: -16px -192px; |
| float: right; |
| |
| &.closed {/*Show*/ |
| background-position: 0 -192px; |
| } |
| } |
| .del-button {/*Delete*/ |
| background: #f6f6f6; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| -moz-border-radius: 4px; |
| -webkit-border-radius: 4px; |
| clear: both; |
| color: #b6b6b6; |
| display: block; |
| float: right; |
| font-size: 11px; |
| font-weight: bold; |
| height: 16px; |
| line-height: 16px; |
| margin: 0 5px 0 0; |
| padding: 0 4px; |
| text-decoration: none; |
| text-transform: uppercase; |
| } |
| a { |
| |
| &.remove, &.add {/*Checkbox Add & Remove*/ |
| background: #f6f6f6; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| -moz-border-radius: 4px; |
| -webkit-border-radius: 4px; |
| display: block; |
| float: left; |
| font-size: 11px; |
| font-weight: bold; |
| height: 16px; |
| line-height: 16px; |
| margin: 3px 0 0 5px; |
| padding: 0 4px; |
| text-transform: uppercase; |
| color: #f28c00; |
| text-decoration: none; |
| } |
| &.add { |
| margin: 0; |
| |
| &:hover {/*Hover states*/ |
| border: 1px solid #fbcb09; |
| background-color: #fdf5ce; |
| } |
| } |
| } |
| .legend .toggle-form:hover, |
| .del-button:hover, |
| a.remove:hover {/*Hover states*/ |
| border: 1px solid #fbcb09; |
| background-color: #fdf5ce; |
| } |
| .del-button:hover { |
| color: #f28c00; |
| } |
| } |
| /* @end */ |
| |
| /* @group Buttons/Triggers */ |
| #form-wrap { |
| .frmb-submit {/*Style all button elements*/ |
| background: #E57E30; |
| border: 0; |
| color: #fff; |
| display: block; |
| float: left; |
| font-size: 14px; |
| font-weight: bold; |
| margin-top: 10px; |
| padding: 3px 7px; |
| } |
| |
| #preview-form { |
| margin-left: 10px; |
| } |
| } |
| /* @end */ |
| |
| /* @group Form Items */ |
| .frm-holder {/*Container for .frm-elements*/ |
| background: #fff; |
| border-left: 1px solid #DEDEDE; |
| border-right: 1px solid #DEDEDE; |
| border-bottom: 1px solid #DEDEDE; |
| display: block; |
| overflow: hidden; |
| padding: 8px 0; |
| } |
| .frm-elements {/*Inner form item contrainer*/ |
| label { |
| width: 120px; |
| float: left; |
| margin: 0 15px; |
| line-height: 24px; |
| } |
| .false-label { |
| width: 120px; |
| float: left; |
| margin: 0 15px; |
| line-height: 24px; |
| } |
| input[type=text] { |
| float: left; |
| width: 280px; |
| } |
| .fields { |
| float: left; |
| |
| input[type=checkbox], input[type=radio] { |
| float: left; |
| margin: 5px 10px 0 0; |
| } |
| input[type=text] { |
| width: 220px; |
| margin-top: 0; |
| } |
| div { |
| background:url(@image_grippie) 0 0 repeat-y; |
| clear: both; |
| float: left; |
| width: 350px; |
| padding-left: 10px; |
| margin-bottom: 5px; |
| &.add-area { |
| background: none; |
| } |
| &:hover { |
| cursor: move; |
| } |
| } |
| label.auto { |
| width: auto; |
| margin: 0 0 5px 0; |
| } |
| .remove { |
| float: right; |
| } |
| .add-area { |
| display: block; |
| margin-top: 5px; |
| overflow: hidden; |
| width: 295px; |
| } |
| } |
| .false-label, .fields { |
| margin-top: 10px; |
| } |
| } |
| .frm-fld-req { |
| clear: both; |
| display: block; |
| padding-top: 10px; |
| input { |
| margin: 4px 0 0 0; |
| } |
| } |
| .frm-fld-other { |
| clear: both; |
| display: block; |
| padding-top: 10px; |
| input { |
| margin: 4px 0 0 0; |
| } |
| } |
| .frm-elements:after, .frm-fld:after { |
| content:"."; |
| display:block; |
| height:0; |
| clear:both; |
| visibility:hidden; |
| } |
| .frm-elements, .frm-fld { |
| display:inline-block; |
| } |
| .frm-elements, .frm-fld { |
| display:block; |
| } |
| /* @end */ |