enhancement: add global class .vue-form-generator. Rewriting of mos…

…t selector for a more encapsulated style.

src/fields/fieldCheckbox.vue

@@ -11,7 +11,7 @@
 </script>
 
 <style lang="sass">
-	input[type=checkbox] {
+	.vue-form-generator .field-checkbox {
 		margin-left: 12px;
 	}
 </style>

src/fields/fieldColor.vue

@@ -12,7 +12,7 @@
 
 
 <style lang="sass">
-	span {
+	.vue-form-generator .field-color .helper {
 		margin-left: 0.3em;
 	}
 </style>

src/fields/fieldDateTime.vue

@@ -56,7 +56,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>

src/fields/fieldEmail.vue

@@ -11,7 +11,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>

src/fields/fieldImage.vue

@@ -67,10 +67,10 @@
 </script>
 
 <style lang="sass">
-	.wrapper, input {
+.vue-form-generator .field-image {
+	&.wrapper {
 		width: 100%;
 	}
-
 	.preview {
 		position: relative;
 		margin-top: 5px;
@@ -100,4 +100,5 @@
 			}
 		}
 	}
+}
 </style>

src/fields/fieldLabel.vue

@@ -11,7 +11,7 @@
 </script>
 
 <style lang="sass">
-	span {
+	.vue-form-generator .field-label {
 		display: block;
 		width: 100%;
 		margin-left: 12px;

src/fields/fieldMasked.vue

@@ -18,7 +18,4 @@
 </script>
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>

src/fields/fieldNumber.vue

@@ -11,7 +11,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>

src/fields/fieldPassword.vue

@@ -11,7 +11,4 @@
 </script>
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>

src/fields/fieldRange.vue

@@ -12,11 +12,13 @@
 
 
 <style lang="sass">
+.vue-form-generator .field-range {
 	input {
 		width: 100%;
 	}
 
 	.helpText {
 		margin: auto 0.5em;
 	}
+}
 </style>

src/fields/fieldSelect.vue

@@ -41,7 +41,4 @@
 
 
 <style lang="sass">
-	select {
-		width: 100%;
-	}
 </style>

src/fields/fieldSelectEx.vue

@@ -56,7 +56,7 @@
 
 
 <style lang="sass">
-	.bootstrap-select {
+	.vue-form-generator .field-selectEx .bootstrap-select {
 		.dropdown-menu li.selected .text{
 			font-weight: bold;
 		}

src/fields/fieldSlider.vue

@@ -57,7 +57,7 @@
 
 
 <style lang="sass">
-	.irs {
+	.vue-form-generator .field-slider .irs {
 		width: 100%;
 	}
 </style>

src/fields/fieldStaticMap.vue

@@ -18,7 +18,7 @@
 </script>
 
 <style lang="sass">
-	img {
+	.vue-form-generator .field-staticMap img {
 		display: block;
 		width: auto;
 		max-width: 100%;

src/fields/fieldSubmit.vue

@@ -28,7 +28,7 @@
 </script>
 
 <style lang="sass">
-	input {
+	.vue-form-generator .field-submit input {
 		width: 100%;
 	}
 </style>

src/fields/fieldSwitch.vue

@@ -36,13 +36,14 @@
 
 <style lang="sass">
 
-	$width: 120px;
+$field-switch-width: 120px;
 
-	label {
+.vue-form-generator .field-switch { 
+	.field-wrap label {
 		position: relative;
 		display: block;
 		vertical-align: top;
-		width: $width;
+		width: $field-switch-width;
 		height: 30px;
 		padding: 3px;
 		margin: 0 10px 10px 0;
@@ -136,5 +137,5 @@
 	.label, .handle {
 		transition: all 0.3s ease;
 	}
-
+}
 </style>

src/fields/fieldText.vue

@@ -12,7 +12,7 @@
 </script>
 
 <style lang="sass">
-	input {
+	.vue-form-generator .field-text input {
 		width: 100%;
 	}
 </style>

src/fields/fieldTextArea.vue

@@ -13,7 +13,4 @@
 
 
 <style lang="sass">
-	textarea {
-		width: 100%;
-	}
 </style>

src/formGenerator.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	fieldset(v-if="schema != null")
+	fieldset.vue-form-generator(v-if="schema != null")
 		.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
 			label {{ field.label }}
 				span.help(v-if="field.help")