Skip to content

Commit 92cea99

Browse files
icebobicebob
committed
style: image remove button change to inline img
With this we remove the font-awesome dependency.
1 parent 03fd9d2 commit 92cea99

File tree

4 files changed

+130
-84
lines changed

4 files changed

+130
-84
lines changed

‎dist/vue-form-generator.css

+86-44
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,25 @@
44
* Released under the MIT License.
55
*/
66

7-
fieldset.vue-form-generator input, fieldset.vue-form-generator select, fieldset.vue-form-generator textarea {
7+
fieldset.vue-form-generator .form-control {
8+
display: block;
9+
width: 100%;
10+
padding: 6px 12px;
11+
font-size: 14px;
12+
line-height: 1.42857143;
13+
color: #555;
14+
background-color: #fff;
15+
background-image: none;
16+
border: 1px solid #ccc;
817
border-radius: 4px;
9-
border: 1px solid #BBB;
10-
padding: 2px 5px; }
18+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
19+
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
20+
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
1121

1222
fieldset.vue-form-generator span.help {
1323
margin-left: 0.3em;
1424
position: relative;
15-
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
16-
/* CSS Triangles - see Trevor's post */
17-
/*.helpText:after {
18-
border-left: solid transparent 10px;
19-
border-right: solid transparent 10px;
20-
border-top: solid #1496bb 10px;
21-
bottom: -10px;
22-
content: " ";
23-
height: 0;
24-
left: 50%;
25-
margin-left: -13px;
26-
position: absolute;
27-
width: 0;
28-
}*/ }
25+
/* This bridges the gap so you can mouse into the tooltip without it disappearing */ }
2926
fieldset.vue-form-generator span.help .helpText {
3027
background-color: #444;
3128
bottom: 30px;
@@ -64,10 +61,41 @@ fieldset.vue-form-generator .field-wrap {
6461
display: -ms-flexbox;
6562
display: flex; }
6663
fieldset.vue-form-generator .field-wrap .buttons {
67-
white-space: nowrap; }
68-
fieldset.vue-form-generator .field-wrap .buttons button {
69-
display: inline-block;
70-
margin: 0 2px; }
64+
white-space: nowrap;
65+
margin-left: 4px; }
66+
fieldset.vue-form-generator .field-wrap button, fieldset.vue-form-generator .field-wrap input[type=submit] {
67+
display: inline-block;
68+
padding: 6px 12px;
69+
margin: 0px;
70+
font-size: 14px;
71+
font-weight: normal;
72+
line-height: 1.42857143;
73+
text-align: center;
74+
white-space: nowrap;
75+
vertical-align: middle;
76+
-ms-touch-action: manipulation;
77+
touch-action: manipulation;
78+
cursor: pointer;
79+
-webkit-user-select: none;
80+
-moz-user-select: none;
81+
-ms-user-select: none;
82+
user-select: none;
83+
color: #333;
84+
background-color: #fff;
85+
border: 1px solid #ccc;
86+
border-radius: 4px; }
87+
fieldset.vue-form-generator .field-wrap button:not(:last-child), fieldset.vue-form-generator .field-wrap input[type=submit]:not(:last-child) {
88+
margin-right: 4px; }
89+
fieldset.vue-form-generator .field-wrap button:hover, fieldset.vue-form-generator .field-wrap input[type=submit]:hover {
90+
color: #333;
91+
background-color: #e6e6e6;
92+
border-color: #adadad; }
93+
fieldset.vue-form-generator .field-wrap button:active, fieldset.vue-form-generator .field-wrap input[type=submit]:active {
94+
color: #333;
95+
background-color: #d4d4d4;
96+
border-color: #8c8c8c;
97+
outline: 0;
98+
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
7199

72100
fieldset.vue-form-generator .hint {
73101
font-style: italic;
@@ -106,24 +134,24 @@ fieldset.vue-form-generator .form-group {
106134
padding-top: 0px;
107135
margin-top: 0.2em;
108136
font-weight: 600; }
109-
.vue-form-generator .field-checkbox {
137+
.vue-form-generator .field-checkbox input {
110138
margin-left: 12px; }
111-
.listbox, .dropList {
139+
.vue-form-generator .field-checklist .listbox, .vue-form-generator .field-checklist .dropList {
112140
height: auto;
113141
max-height: 150px;
114142
overflow: auto; }
115-
.listbox .list-row label, .dropList .list-row label {
143+
.vue-form-generator .field-checklist .listbox .list-row label, .vue-form-generator .field-checklist .dropList .list-row label {
116144
font-weight: initial; }
117-
.listbox .list-row input, .dropList .list-row input {
145+
.vue-form-generator .field-checklist .listbox .list-row input, .vue-form-generator .field-checklist .dropList .list-row input {
118146
margin-right: 0.3em; }
119147

120-
.combobox {
148+
.vue-form-generator .field-checklist .combobox {
121149
height: initial;
122150
overflow: hidden; }
123-
.combobox .mainRow {
151+
.vue-form-generator .field-checklist .combobox .mainRow {
124152
cursor: pointer;
125153
position: relative; }
126-
.combobox .mainRow .arrow {
154+
.vue-form-generator .field-checklist .combobox .mainRow .arrow {
127155
position: absolute;
128156
right: -6px;
129157
top: 4px;
@@ -137,12 +165,15 @@ fieldset.vue-form-generator .form-group {
137165
transition: transform 0.5s, -webkit-transform 0.5s;
138166
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=");
139167
background-repeat: no-repeat; }
140-
.combobox .mainRow.expanded .arrow {
168+
.vue-form-generator .field-checklist .combobox .mainRow.expanded .arrow {
141169
-webkit-transform: rotate(-180deg);
142170
transform: rotate(-180deg); }
143-
.combobox .dropList {
171+
.vue-form-generator .field-checklist .combobox .dropList {
144172
-webkit-transition: height 0.5s;
145173
transition: height 0.5s; }
174+
.vue-form-generator .field-color input {
175+
width: 60px; }
176+
146177
.vue-form-generator .field-color .helper {
147178
margin-left: 0.3em; }
148179

@@ -216,7 +247,7 @@ fieldset.vue-form-generator .form-group {
216247

217248

218249

219-
.vue-form-generator .field-image.wrapper {
250+
.vue-form-generator .field-image .wrapper {
220251
width: 100%; }
221252

222253
.vue-form-generator .field-image .preview {
@@ -242,7 +273,7 @@ fieldset.vue-form-generator .form-group {
242273
.vue-form-generator .field-image .preview .remove:hover {
243274
opacity: 1.0;
244275
cursor: pointer; }
245-
.vue-form-generator .field-label {
276+
.vue-form-generator .field-label span {
246277
display: block;
247278
width: 100%;
248279
margin-left: 12px; }
@@ -388,7 +419,9 @@ fieldset.vue-form-generator .form-group {
388419
width: auto;
389420
max-width: 100%; }
390421
.vue-form-generator .field-submit input {
391-
width: 100%; }
422+
color: #fff !important;
423+
background-color: #337ab7 !important;
424+
border-color: #2e6da4 !important; }
392425
.vue-form-generator .field-switch {
393426
/* Transition
394427
========================== */ }
@@ -398,12 +431,9 @@ fieldset.vue-form-generator .form-group {
398431
vertical-align: top;
399432
width: 120px;
400433
height: 30px;
401-
padding: 3px;
434+
padding: 0;
402435
margin: 0 10px 10px 0;
403-
background: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
404-
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
405-
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
406-
border-radius: 18px;
436+
border-radius: 15px;
407437
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
408438
cursor: pointer; }
409439
.vue-form-generator .field-switch input {
@@ -447,8 +477,8 @@ fieldset.vue-form-generator .form-group {
447477
opacity: 1; }
448478
.vue-form-generator .field-switch .handle {
449479
position: absolute;
450-
top: 4px;
451-
left: 4px;
480+
top: 1px;
481+
left: 1px;
452482
width: 28px;
453483
height: 28px;
454484
background: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
@@ -470,14 +500,26 @@ fieldset.vue-form-generator .form-group {
470500
border-radius: 6px;
471501
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); }
472502
.vue-form-generator .field-switch input:checked ~ .handle {
473-
left: 88px;
474-
left: calc(100% - 32px);
503+
left: 91px;
504+
left: calc(100% - ($field-switch-height - 1px));
475505
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
476506
.vue-form-generator .field-switch .label, .vue-form-generator .field-switch .handle {
477507
-webkit-transition: all 0.3s ease;
478508
transition: all 0.3s ease; }
479-
.vue-form-generator .field-text input {
480-
width: 100%; }
509+
510+
511+
512+
513+
514+
515+
516+
517+
518+
519+
520+
521+
522+
481523

482524

483525

0 commit comments

Comments
 (0)