enhancement: add global class .vue-form-generator. Rewriting of most selector for a more encapsulated style.

Lionel Bijaoui · Lionel Bijaoui · commit e864d1066990 · 2016-08-09T11:16:49.000+02:00
diff --git a/src/fields/fieldCheckbox.vue b/src/fields/fieldCheckbox.vue
@@ -11,7 +11,7 @@
 </script>
 
 <style lang="sass">
-	input[type=checkbox] {
+	.vue-form-generator .field-checkbox {
 		margin-left: 12px;
 	}
 </style>
diff --git a/src/fields/fieldColor.vue b/src/fields/fieldColor.vue
@@ -12,7 +12,7 @@
 
 
 <style lang="sass">
-	span {
+	.vue-form-generator .field-color .helper {
 		margin-left: 0.3em;
 	}
 </style>
diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue
@@ -56,7 +56,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue
@@ -11,7 +11,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldImage.vue b/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>
diff --git a/src/fields/fieldLabel.vue b/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;
diff --git a/src/fields/fieldMasked.vue b/src/fields/fieldMasked.vue
@@ -18,7 +18,4 @@
 </script>
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
@@ -11,7 +11,4 @@
 
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldPassword.vue b/src/fields/fieldPassword.vue
@@ -11,7 +11,4 @@
 </script>
 
 <style lang="sass">
-	input {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldRange.vue b/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>
diff --git a/src/fields/fieldSelect.vue b/src/fields/fieldSelect.vue
@@ -41,7 +41,4 @@
 
 
 <style lang="sass">
-	select {
-		width: 100%;
-	}
 </style>
diff --git a/src/fields/fieldSelectEx.vue b/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;
 		}
diff --git a/src/fields/fieldSlider.vue b/src/fields/fieldSlider.vue
@@ -57,7 +57,7 @@
 
 
 <style lang="sass">
-	.irs {
+	.vue-form-generator .field-slider .irs {
 		width: 100%;
 	}
 </style>
diff --git a/src/fields/fieldStaticMap.vue b/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%;
diff --git a/src/fields/fieldSubmit.vue b/src/fields/fieldSubmit.vue
@@ -28,7 +28,7 @@
 </script>
 
 <style lang="sass">
-	input {
+	.vue-form-generator .field-submit input {
 		width: 100%;
 	}
 </style>
diff --git a/src/fields/fieldSwitch.vue b/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>
diff --git a/src/fields/fieldText.vue b/src/fields/fieldText.vue
@@ -12,7 +12,7 @@
 </script>
 
 <style lang="sass">
-	input {
+	.vue-form-generator .field-text input {
 		width: 100%;
 	}
 </style>
diff --git a/src/fields/fieldTextArea.vue b/src/fields/fieldTextArea.vue
@@ -13,7 +13,4 @@
 
 
 <style lang="sass">
-	textarea {
-		width: 100%;
-	}
 </style>
diff --git a/src/formGenerator.vue b/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")

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`</script>`
`12`	`12`
`13`	`13`	`<style lang="sass">`
`14`		`- input[type=checkbox] {`
	`14`	`+ .vue-form-generator .field-checkbox {`
`15`	`15`	`margin-left: 12px;`
`16`	`16`	`}`
`17`	`17`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`
`13`	`13`
`14`	`14`	`<style lang="sass">`
`15`		`- span {`
	`15`	`+ .vue-form-generator .field-color .helper {`
`16`	`16`	`margin-left: 0.3em;`
`17`	`17`	`}`
`18`	`18`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -67,10 +67,10 @@`
`67`	`67`	`</script>`
`68`	`68`
`69`	`69`	`<style lang="sass">`
`70`		`- .wrapper, input {`
	`70`	`+.vue-form-generator .field-image {`
	`71`	`+ &.wrapper {`
`71`	`72`	`width: 100%;`
`72`	`73`	`}`
`73`		`-`
`74`	`74`	`.preview {`
`75`	`75`	`position: relative;`
`76`	`76`	`margin-top: 5px;`
`@@ -100,4 +100,5 @@`
`100`	`100`	`}`
`101`	`101`	`}`
`102`	`102`	`}`
	`103`	`+}`
`103`	`104`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -12,11 +12,13 @@`
`12`	`12`
`13`	`13`
`14`	`14`	`<style lang="sass">`
	`15`	`+.vue-form-generator .field-range {`
`15`	`16`	`input {`
`16`	`17`	`width: 100%;`
`17`	`18`	`}`
`18`	`19`
`19`	`20`	`.helpText {`
`20`	`21`	`margin: auto 0.5em;`
`21`	`22`	`}`
	`23`	`+}`
`22`	`24`	`</style>`