Skip to content

Commit 03fd9d2

Browse files
icebobicebob
committed
styles: fix styles of field
1 parent 8204f59 commit 03fd9d2

File tree

6 files changed

+131
-125
lines changed

6 files changed

+131
-125
lines changed

‎src/fields/fieldChecklist.vue

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -85,56 +85,58 @@
8585

8686

8787
<style lang="sass">
88+
.vue-form-generator .field-checklist {
8889
89-
.listbox, .dropList {
90-
height: auto;
91-
max-height: 150px;
92-
overflow: auto;
90+
.listbox, .dropList {
91+
height: auto;
92+
max-height: 150px;
93+
overflow: auto;
9394
94-
.list-row {
95-
label {
96-
font-weight: initial;
97-
}
95+
.list-row {
96+
label {
97+
font-weight: initial;
98+
}
9899
99-
input {
100-
margin-right: 0.3em;
100+
input {
101+
margin-right: 0.3em;
102+
}
101103
}
102104
}
103-
}
104105
105-
.combobox {
106-
height: initial;
107-
overflow: hidden;
106+
.combobox {
107+
height: initial;
108+
overflow: hidden;
108109
109-
.mainRow {
110-
cursor: pointer;
111-
position: relative;
112-
113-
.arrow {
114-
position: absolute;
115-
right: -6px;
116-
top: 4px;
117-
width: 16px;
118-
height: 16px;
110+
.mainRow {
111+
cursor: pointer;
112+
position: relative;
113+
114+
.arrow {
115+
position: absolute;
116+
right: -6px;
117+
top: 4px;
118+
width: 16px;
119+
height: 16px;
119120
120-
transform: rotate(0deg);
121-
transition: transform 0.5s;
121+
transform: rotate(0deg);
122+
transition: transform 0.5s;
122123
123-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=');
124-
background-repeat: no-repeat;
124+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=');
125+
background-repeat: no-repeat;
125126
126-
}
127+
}
127128
128-
&.expanded {
129-
.arrow {
130-
transform: rotate(-180deg);
129+
&.expanded {
130+
.arrow {
131+
transform: rotate(-180deg);
132+
}
131133
}
132134
}
133-
}
134135
135-
.dropList {
136-
transition: height 0.5s;
137-
//margin-top: 0.5em;
136+
.dropList {
137+
transition: height 0.5s;
138+
//margin-top: 0.5em;
139+
}
138140
}
139141
}
140142
</style>

‎src/fields/fieldRange.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212

1313

1414
<style lang="sass">
15-
.vue-form-generator .field-range {
16-
input {
17-
width: 100%;
18-
}
15+
.vue-form-generator .field-range {
16+
input {
17+
width: 100%;
18+
}
1919
20-
.helpText {
21-
margin: auto 0.5em;
20+
.helpText {
21+
margin: auto 0.5em;
22+
}
2223
}
23-
}
2424
</style>

‎src/fields/fieldSubmit.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929

3030
<style lang="sass">
3131
.vue-form-generator .field-submit input {
32-
width: 100%;
32+
// Default bootstrap primary button style
33+
color: #fff !important;
34+
background-color: #337ab7 !important;
35+
border-color: #2e6da4 !important;
3336
}
3437
</style>

‎src/fields/fieldText.vue

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,4 @@
1212
</script>
1313

1414
<style lang="sass">
15-
.vue-form-generator .field-text input {
16-
width: 100%;
17-
}
1815
</style>

‎src/fields/fieldVueMultiSelect.vue

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -37,58 +37,58 @@
3737
)
3838
</template>
3939
<script>
40-
/*global Vue:true*/
41-
import abstractField from "./abstractField";
40+
import Vue from "vue";
41+
import abstractField from "./abstractField";
4242
43-
export default {
44-
mixins: [abstractField],
45-
computed: {
46-
options() {
47-
let values = this.schema.values;
48-
if (typeof(values) == "function") {
49-
return values.apply(this, [this.model, this.schema]);
50-
} else {
51-
return values;
43+
export default {
44+
mixins: [abstractField],
45+
computed: {
46+
options() {
47+
let values = this.schema.values;
48+
if (typeof(values) == "function") {
49+
return values.apply(this, [this.model, this.schema]);
50+
} else {
51+
return values;
52+
}
5253
}
53-
}
54-
},
55-
methods: {
56-
updateSelected(value/*, id*/) {
57-
this.value = value;
5854
},
59-
addTag(newTag, id) {
60-
let onNewTag = this.schema.selectOptions.onNewTag;
61-
if (typeof(onNewTag) == "function") {
62-
onNewTag(newTag, id, this.options, this.value);
55+
methods: {
56+
updateSelected(value/*, id*/) {
57+
this.value = value;
58+
},
59+
addTag(newTag, id) {
60+
let onNewTag = this.schema.selectOptions.onNewTag;
61+
if (typeof(onNewTag) == "function") {
62+
onNewTag(newTag, id, this.options, this.value);
63+
}
64+
},
65+
onSearchChange(searchQuery, id) {
66+
let onSearch = this.schema.selectOptions.onSearch;
67+
if (typeof(onSearch) == "function") {
68+
onSearch(searchQuery, id, this.options);
69+
}
70+
},
71+
onSelect(/*selectedOption, id*/) {
72+
// console.log("onSelect", selectedOption, id);
73+
},
74+
onRemove(/*removedOption, id*/) {
75+
// console.log("onRemove", removedOption, id);
76+
},
77+
onOpen(/*id*/) {
78+
// console.log("onOpen", id);
79+
},
80+
onClose(/*value, id*/) {
81+
// console.log("onClose", value, id);
6382
}
6483
},
65-
onSearchChange(searchQuery, id) {
66-
let onSearch = this.schema.selectOptions.onSearch;
67-
if (typeof(onSearch) == "function") {
68-
onSearch(searchQuery, id, this.options);
84+
created() {
85+
// Check if the component is loaded
86+
if (window.VueMultiselect) {
87+
Vue.component("multiselect", window.VueMultiselect.default);
88+
} else {
89+
console.error("'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!");
6990
}
70-
},
71-
onSelect(/*selectedOption, id*/) {
72-
// console.log("onSelect", selectedOption, id);
73-
},
74-
onRemove(/*removedOption, id*/) {
75-
// console.log("onRemove", removedOption, id);
76-
},
77-
onOpen(/*id*/) {
78-
// console.log("onOpen", id);
79-
},
80-
onClose(/*value, id*/) {
81-
// console.log("onClose", value, id);
82-
}
83-
},
84-
created() {
85-
// Check if the component is loaded
86-
if (window.VueMultiselect) {
87-
Vue.component("multiselect", window.VueMultiselect.default);
88-
} else {
89-
console.error("'vue-multiselect' is missing. Please download from https://github.com/monterail/vue-multiselect and load the script in the HTML head section!");
9091
}
91-
}
92-
};
92+
};
9393
</script>
9494

‎src/formGenerator.vue

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
.field-wrap
99
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")
1010
.buttons(v-if="field.buttons && field.buttons.length > 0")
11-
button.btn.btn-default(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
11+
button(v-for="btn in field.buttons", @click="btn.onclick(model, field)", :class="btn.classes") {{ btn.label }}
1212
.hint(v-if="field.hint") {{ field.hint }}
1313
.errors(v-if="field.errors && field.errors.length > 0")
1414
span(v-for="error in field.errors", track-by="$index") {{ error }}
@@ -231,40 +231,44 @@
231231
232232
.buttons {
233233
white-space: nowrap;
234+
margin-left: 4px;
235+
}
234236
235-
button {
236-
// Default Bootstrap button style
237-
display: inline-block;
238-
padding: 6px 12px;
239-
margin: 0px;
240-
margin-left: 4px;
241-
font-size: 14px;
242-
font-weight: normal;
243-
line-height: 1.42857143;
244-
text-align: center;
245-
white-space: nowrap;
246-
vertical-align: middle;
247-
touch-action: manipulation;
248-
cursor: pointer;
249-
user-select: none;
237+
button, input[type=submit] {
238+
// Default Bootstrap button style
239+
display: inline-block;
240+
padding: 6px 12px;
241+
margin: 0px;
242+
font-size: 14px;
243+
font-weight: normal;
244+
line-height: 1.42857143;
245+
text-align: center;
246+
white-space: nowrap;
247+
vertical-align: middle;
248+
touch-action: manipulation;
249+
cursor: pointer;
250+
user-select: none;
251+
color: #333;
252+
background-color: #fff;
253+
border: 1px solid #ccc;
254+
border-radius: 4px;
255+
256+
&:not(:last-child) {
257+
margin-right: 4px;
258+
}
259+
260+
&:hover {
250261
color: #333;
251-
background-color: #fff;
252-
border: 1px solid #ccc;
253-
border-radius: 4px;
254-
255-
&:hover {
256-
color: #333;
257-
background-color: #e6e6e6;
258-
border-color: #adadad;
259-
}
262+
background-color: #e6e6e6;
263+
border-color: #adadad;
264+
}
260265
261-
&:active {
262-
color: #333;
263-
background-color: #d4d4d4;
264-
border-color: #8c8c8c;
265-
outline: 0;
266-
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
267-
}
266+
&:active {
267+
color: #333;
268+
background-color: #d4d4d4;
269+
border-color: #8c8c8c;
270+
outline: 0;
271+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
268272
}
269273
}
270274
}

0 commit comments

Comments
 (0)