Skip to content

Commit 21c8876

Browse files
author
Lionel Bijaoui
committed
enhancement: extract styles to a vue-form-generator.css file.
1 parent 66d201d commit 21c8876

5 files changed

+1227
-1939
lines changed

‎dist/vue-form-generator.css

+344
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
/**
2+
* vue-form-generator v0.3.0
3+
* https://github.com/icebob/vue-form-generator
4+
* Released under the MIT License.
5+
*/
6+
7+
fieldset input, fieldset select, fieldset textarea {
8+
border-radius: 4px;
9+
border: 1px solid #BBB;
10+
padding: 2px 5px; }
11+
12+
fieldset span.help {
13+
margin-left: 0.3em;
14+
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+
}*/ }
29+
fieldset span.help .helpText {
30+
background-color: #444;
31+
bottom: 30px;
32+
color: #fff;
33+
display: block;
34+
left: 0px;
35+
opacity: 0;
36+
padding: 20px;
37+
pointer-events: none;
38+
position: absolute;
39+
text-align: justify;
40+
width: 300px;
41+
-webkit-transition: all .25s ease-out;
42+
transition: all .25s ease-out;
43+
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
44+
border-radius: 6px; }
45+
fieldset span.help .helpText a {
46+
font-weight: bold;
47+
text-decoration: underline; }
48+
fieldset span.help .helpText:before {
49+
bottom: -20px;
50+
content: " ";
51+
display: block;
52+
height: 20px;
53+
left: 0;
54+
position: absolute;
55+
width: 100%; }
56+
fieldset span.help:hover .helpText {
57+
opacity: 1;
58+
pointer-events: auto;
59+
-webkit-transform: translateY(0px);
60+
transform: translateY(0px); }
61+
62+
fieldset .field-wrap {
63+
display: -webkit-box;
64+
display: -ms-flexbox;
65+
display: flex; }
66+
fieldset .field-wrap .buttons {
67+
white-space: nowrap; }
68+
fieldset .field-wrap .buttons button {
69+
display: inline-block;
70+
margin: 0 2px; }
71+
72+
fieldset .hint {
73+
font-style: italic;
74+
font-size: 0.8em; }
75+
76+
fieldset .form-group {
77+
display: inline-block;
78+
vertical-align: top;
79+
width: 100%;
80+
margin-bottom: 1rem; }
81+
fieldset .form-group label {
82+
font-weight: 400; }
83+
fieldset .form-group.featured label {
84+
font-weight: bold; }
85+
fieldset .form-group.required label:after {
86+
content: "*";
87+
font-weight: normal;
88+
color: Red;
89+
position: absolute;
90+
padding-left: 0.2em;
91+
font-size: 1em; }
92+
fieldset .form-group.disabled label {
93+
color: #666;
94+
font-style: italic; }
95+
fieldset .form-group.error input:not([type="checkbox"]), fieldset .form-group.error textarea, fieldset .form-group.error select {
96+
border: 1px solid red;
97+
background-color: rgba(255, 0, 0, 0.15); }
98+
fieldset .form-group.error .errors {
99+
color: red;
100+
font-size: 0.80em; }
101+
fieldset .form-group.error .errors span {
102+
display: block;
103+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC");
104+
background-repeat: no-repeat;
105+
padding-left: 17px;
106+
padding-top: 0px;
107+
margin-top: 0.2em;
108+
font-weight: 600; }
109+
input[type=checkbox][_v-2fdafcb6] {
110+
margin-left: 12px; }
111+
.listbox[_v-3254e498], .dropList[_v-3254e498] {
112+
height: auto;
113+
max-height: 150px;
114+
overflow: auto; }
115+
.listbox .list-row label[_v-3254e498], .dropList .list-row label[_v-3254e498] {
116+
font-weight: initial; }
117+
.listbox .list-row input[_v-3254e498], .dropList .list-row input[_v-3254e498] {
118+
margin-right: 0.3em; }
119+
120+
.combobox[_v-3254e498] {
121+
height: initial;
122+
overflow: hidden; }
123+
.combobox .mainRow[_v-3254e498] {
124+
cursor: pointer;
125+
position: relative; }
126+
.combobox .mainRow .arrow[_v-3254e498] {
127+
position: absolute;
128+
right: -6px;
129+
top: 4px;
130+
width: 16px;
131+
height: 16px;
132+
-webkit-transform: rotate(0deg);
133+
transform: rotate(0deg);
134+
-webkit-transition: -webkit-transform 0.5s;
135+
transition: -webkit-transform 0.5s;
136+
transition: transform 0.5s;
137+
transition: transform 0.5s, -webkit-transform 0.5s;
138+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=");
139+
background-repeat: no-repeat; }
140+
.combobox .mainRow.expanded .arrow[_v-3254e498] {
141+
-webkit-transform: rotate(-180deg);
142+
transform: rotate(-180deg); }
143+
.combobox .dropList[_v-3254e498] {
144+
-webkit-transition: height 0.5s;
145+
transition: height 0.5s; }
146+
span[_v-da15201e] {
147+
margin-left: 0.3em; }
148+
input[_v-6ef4e97d] {
149+
width: 100%; }
150+
input[_v-c97470ac] {
151+
width: 100%; }
152+
.wrapper[_v-2ee9a42e], input[_v-2ee9a42e] {
153+
width: 100%; }
154+
155+
.preview[_v-2ee9a42e] {
156+
position: relative;
157+
margin-top: 5px;
158+
height: 100px;
159+
background-repeat: no-repeat;
160+
background-size: contain;
161+
background-position: center center;
162+
border: 1px solid #ccc;
163+
border-radius: 3px;
164+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
165+
.preview .remove[_v-2ee9a42e] {
166+
/*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42u2SwQoAIAhD88vVLy8KBlaS0i1oJwP3piGVg0Skmpq8HjqZrWl9uwCbGAmwKYGZs/6iqgMyAdJuM8W2QmYKpLt/0AG9ASCv/oAnANd3AEjmAlFT1BypAV+PnRH5YehvAAAAAElFTkSuQmCC');
167+
width: 16px;
168+
height: 16px;
169+
*/
170+
font-size: 1.2em;
171+
position: absolute;
172+
right: 0.2em;
173+
bottom: 0.2em;
174+
opacity: 0.7; }
175+
.preview .remove[_v-2ee9a42e]:hover {
176+
opacity: 1.0;
177+
cursor: pointer; }
178+
span[_v-0eace1fc] {
179+
display: block;
180+
width: 100%;
181+
margin-left: 12px; }
182+
input[_v-2b1174ed] {
183+
width: 100%; }
184+
input[_v-6a19b8ab] {
185+
width: 100%; }
186+
input[_v-6c65f47d] {
187+
width: 100%; }
188+
input[_v-1fd4066a] {
189+
width: 100%; }
190+
191+
.helpText[_v-1fd4066a] {
192+
margin: auto 0.5em; }
193+
select[_v-1ec600de] {
194+
width: 100%; }
195+
.bootstrap-select .dropdown-menu li.selected .text {
196+
font-weight: bold; }
197+
.irs {
198+
width: 100%; }
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+
214+
215+
216+
217+
218+
219+
220+
221+
222+
223+
224+
225+
226+
227+
228+
229+
230+
231+
232+
233+
234+
235+
236+
237+
238+
img[_v-5915e81c] {
239+
display: block;
240+
width: auto;
241+
max-width: 100%; }
242+
input[_v-05b01dfa] {
243+
width: 100%; }
244+
label[_v-6cc6a716] {
245+
position: relative;
246+
display: block;
247+
vertical-align: top;
248+
width: 120px;
249+
height: 30px;
250+
padding: 3px;
251+
margin: 0 10px 10px 0;
252+
background: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
253+
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
254+
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
255+
border-radius: 18px;
256+
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
257+
cursor: pointer; }
258+
259+
input[_v-6cc6a716] {
260+
position: absolute;
261+
top: 0;
262+
left: 0;
263+
opacity: 0; }
264+
265+
.label[_v-6cc6a716] {
266+
position: relative;
267+
display: block;
268+
height: inherit;
269+
font-size: 10px;
270+
text-transform: uppercase;
271+
background: #eceeef;
272+
border-radius: inherit;
273+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); }
274+
275+
.label[_v-6cc6a716]:before, .label[_v-6cc6a716]:after {
276+
position: absolute;
277+
top: 50%;
278+
margin-top: -.5em;
279+
line-height: 1;
280+
-webkit-transition: inherit;
281+
transition: inherit; }
282+
283+
.label[_v-6cc6a716]:before {
284+
content: attr(data-off);
285+
right: 11px;
286+
color: #aaaaaa;
287+
text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
288+
289+
.label[_v-6cc6a716]:after {
290+
content: attr(data-on);
291+
left: 11px;
292+
color: #FFFFFF;
293+
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
294+
opacity: 0; }
295+
296+
input:checked ~ .label[_v-6cc6a716] {
297+
background: #E1B42B;
298+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); }
299+
300+
input:checked ~ .label[_v-6cc6a716]:before {
301+
opacity: 0; }
302+
303+
input:checked ~ .label[_v-6cc6a716]:after {
304+
opacity: 1; }
305+
306+
.handle[_v-6cc6a716] {
307+
position: absolute;
308+
top: 4px;
309+
left: 4px;
310+
width: 28px;
311+
height: 28px;
312+
background: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
313+
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
314+
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
315+
border-radius: 100%;
316+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
317+
318+
.handle[_v-6cc6a716]:before {
319+
content: "";
320+
position: absolute;
321+
top: 50%;
322+
left: 50%;
323+
margin: -6px 0 0 -6px;
324+
width: 12px;
325+
height: 12px;
326+
background: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
327+
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
328+
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
329+
border-radius: 6px;
330+
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); }
331+
332+
input:checked ~ .handle[_v-6cc6a716] {
333+
left: 94px;
334+
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
335+
336+
/* Transition
337+
========================== */
338+
.label[_v-6cc6a716], .handle[_v-6cc6a716] {
339+
-webkit-transition: all 0.3s ease;
340+
transition: all 0.3s ease; }
341+
input[_v-59b0db0f] {
342+
width: 100%; }
343+
textarea[_v-51662488] {
344+
width: 100%; }

0 commit comments

Comments
 (0)