form input class

src/app.less

@@ -105,7 +105,7 @@ input, textarea, select {
 }
 textarea {padding:10px; height:auto;}
 input:focus, textarea:focus, select:focus {background:#FFF; border-color: @cms_brand_primary;}
-label {font-weight:600; color: @text_color;}
+label {font-weight:600; color: @text_color; overflow: hidden; text-overflow: ellipsis;}
 
 .checkbox_holder {
   position: relative;
@@ -191,14 +191,14 @@ button{
 /*--------------------------------------------------------------
 # CMS CONTENT FORM
 --------------------------------------------------------------*/
-/*.cms_content_form {}
+.cms_content_form {}
 .cms_content_form_sidebar {background:#FFF; padding:25px; border:solid 1px #CCC;}
 .cms_fieldgroup {background:#f0f0f0; border:solid 1px #CCC; margin-bottom:20px;}
 .cms_fieldgroup_header {position:relative; color:#333; border-bottom:solid 1px #CCC; height:40px; line-height:40px; padding:0px 25px; font-weight:600;}
 .cms_fieldgroup_content {padding:25px; display:none;}
 .cms_fieldgroup_trigger {position:absolute; top:0px; width:100px; right:0px; padding-right:25px; cursor:pointer; height:40px; line-height:40px; text-align:right;}
 .cms_fieldgroup_trigger i {color:#333; font-size:18px;}
-.fieldgroup_open .cms_fieldgroup_content {display:block;}*/
+.fieldgroup_open .cms_fieldgroup_content {display:block;}
 
 
 /*--------------------------------------------------------------

src/components/my-form.vue

@@ -36,6 +36,10 @@ export default {
                 let n = el.name ? el.name : el.key;
                 switch (el.element) {
                 case "my-input":
+                    var inputClass = { };
+                    if (el.class) {
+                        inputClass = el.class;
+                    }
                     formEl.push(createElement(MyInput, {
                         props: {
                             name: n,
@@ -45,6 +49,7 @@ export default {
                             value: formData[n],
                             validate: el.validate
                         },
+                        class: inputClass,
                         on: {
                             input(val) {
                                 formData[n] = val;
@@ -56,15 +61,55 @@ export default {
                     }));
                     break;
                 case "section":
-                    formEl.push(createElement("h3", el.label));
+                    // formEl.push(createElement("h3", el.label));
                     if (!formData[n]) {
                         formData[n] = { };
                     }
-                    formEl.push(createElement("div", _cElCall(el.subElements, formData[n])));
+                    formEl.push(
+                        createElement("div", {
+                            class: {
+                                cms_fieldgroup: true,
+                                fieldgroup_open: true,
+                                clear: true
+                            }
+                        }, [
+                            createElement("header", {
+                                class: {
+                                    cms_fieldgroup_header: true
+                                }
+                            }, [
+                                el.label,
+                                createElement("div", {
+                                    class: {
+                                        cms_fieldgroup_trigger: true
+                                    }
+                                } [
+                                    createElement("i", {
+                                        class: {
+                                            "ion-chevron-down": true
+                                        }
+                                    })
+                                ])
+                            ]),
+                            createElement("div", {
+                                class: {
+                                    cms_fieldgroup_content: true,
+                                    clear: true
+                                }
+                            },
+                            _cElCall(el.subElements, formData[n])
+                            )
+                        ])
+                    ); //));
                     break;
                 }
             });
 
+            formEl.push(createElement("div", {
+                class: {
+                    clear: true
+                }
+            })); // clearer as last element in group
             return formEl;
         }
 

src/components/my-input.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="input_holder">
         <div class="input_header" v-if="label || description">
-            <label :for="name" v-if="label">{{ label }}</label>
+            <label :for="name" v-if="label && props.type != 'checkbox'">{{ label }}<span v-if="validate && validate.required">*</span></label>
             <div class="input_description" v-if="description">{{ description }}</div>
         </div>
 
@@ -43,6 +43,7 @@
                 @change="handleChange"
             >
             <div class="check_checkbox"></div>
+            <label :for="name" style="margin-left: 25px; width: 99%;" :title="label">{{ label }}<span v-if="validate && validate.required">*</span></label>
         </div>
 
         <div v-if="invalid && validatorMessage">{{ validatorMessage }}</div>