picasso 0.3.3 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +2 -1
- data/README.md +33 -29
- data/docs/_picasso.html +12 -9
- data/docs/all.html +57 -43
- data/docs/config.rb +1 -2
- data/docs/css/picasso-demos.css +1 -0
- data/docs/css/picasso-docs.css +1 -2502
- data/docs/docs.css +476 -0
- data/docs/docs.js +4 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +44 -43
- data/docs/js/html5shiv.js +5 -0
- data/docs/picasso-_components.html +14 -11
- data/docs/picasso-_despegar.html +11 -8
- data/docs/picasso-_utils.html +12 -9
- data/docs/picasso-components-_accordions.html +13 -38
- data/docs/picasso-components-_arrows.html +13 -10
- data/docs/picasso-components-_bubbles.html +14 -11
- data/docs/picasso-components-_buttons.html +12 -9
- data/docs/picasso-components-_inputs.html +13 -10
- data/docs/picasso-components-_list-grids.html +14 -11
- data/docs/picasso-components-_navs.html +14 -11
- data/docs/picasso-components-_pagination.html +13 -10
- data/docs/picasso-components-_popups.html +17 -14
- data/docs/picasso-components-_tooltips.html +14 -11
- data/docs/picasso-components-buttons-_3d.html +17 -14
- data/docs/picasso-components-buttons-_glossy.html +14 -11
- data/docs/picasso-components-buttons-_mini.html +14 -11
- data/docs/picasso-despegar-_variables.html +15 -12
- data/docs/picasso-utils-_clearfix.html +13 -10
- data/docs/picasso-utils-_grid.html +17 -14
- data/docs/picasso-utils-_ie.html +12 -9
- data/docs/picasso-utils-_sprite.html +12 -9
- data/docs/previews.js +33 -0
- data/docs/resources/docs.jade +52 -26
- data/docs/sass/picasso-demos.scss +330 -0
- data/docs/sass/picasso-docs.scss +75 -300
- data/lib/picasso/version.rb +1 -1
- data/package.json +7 -0
- data/stylesheets/picasso/_components.scss +1 -1
- data/stylesheets/picasso/components/_accordions.scss +0 -28
- data/stylesheets/picasso/components/_arrows.scss +1 -1
- data/stylesheets/picasso/components/_bubbles.scss +1 -1
- data/stylesheets/picasso/components/_list-grids.scss +1 -1
- data/stylesheets/picasso/components/_navs.scss +1 -1
- data/stylesheets/picasso/components/_popups.scss +3 -3
- data/stylesheets/picasso/components/buttons/_3d.scss +1 -1
- data/stylesheets/picasso/components/buttons/_glossy.scss +1 -1
- data/stylesheets/picasso/components/buttons/_mini.scss +1 -1
- data/stylesheets/picasso/utils/_grid.scss +1 -1
- metadata +11 -5
- data/docs/resources/docs.js +0 -52
data/docs/sass/picasso-docs.scss
CHANGED
|
@@ -1,350 +1,125 @@
|
|
|
1
|
-
@import "compass";
|
|
2
|
-
@import "picasso";
|
|
3
|
-
|
|
4
|
-
.styledocco-docs{
|
|
5
|
-
|
|
6
|
-
img{
|
|
7
|
-
width: 100%;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.styledocco-example{
|
|
11
|
-
font-family: sans-serif;
|
|
12
|
-
font-size: 16px;
|
|
13
|
-
}
|
|
1
|
+
@import "compass/css3";
|
|
14
2
|
|
|
3
|
+
body{
|
|
4
|
+
padding: 20px;
|
|
15
5
|
}
|
|
16
6
|
|
|
17
|
-
|
|
7
|
+
[class^="picasso-"] {
|
|
18
8
|
|
|
19
|
-
.
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
margin: 10px;
|
|
9
|
+
.content{
|
|
10
|
+
width: 80%;
|
|
11
|
+
float: right;
|
|
23
12
|
}
|
|
24
13
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
.
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.tooltip-demo-3{
|
|
37
|
-
@include tooltip(#0074CC, white, 1.2em, "left");
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.tooltip-demo-4{
|
|
41
|
-
@include tooltip(#FAA732, white, 1.2em, "right");
|
|
42
|
-
left: 300px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
//Glossy Buttons
|
|
46
|
-
.button-glossy-demo-1{
|
|
47
|
-
@include button-glossy();
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.button-glossy-demo-2{
|
|
51
|
-
@include button-glossy(70px, 30px, #0088CC, white);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.button-glossy-demo-3{
|
|
55
|
-
@include button-glossy(80px, 30px, #FBB450, white);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
//3D Buttons
|
|
59
|
-
.button-3d-demo-1{
|
|
60
|
-
@include button-3d();
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.button-3d-demo-2{
|
|
64
|
-
@include button-3d(#0088CC, white);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.button-3d-demo-3{
|
|
68
|
-
@include button-3d(#FBB450, white);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.button-3d-demo-4 {
|
|
72
|
-
@include button-3d(#013d93, #FFF, 24px, true, false);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.button-3d-demo-5 {
|
|
76
|
-
@include button-3d(#EEE, #013d93, 11px, false, true);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
//Mini-Buttons
|
|
80
|
-
.button-mini-demo-1{
|
|
81
|
-
@include button-mini();
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.button-mini-demo-2{
|
|
85
|
-
@include button-mini(#0088CC, white);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
.button-mini-demo-3{
|
|
89
|
-
@include button-mini(#DA4F49, white);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.button-mini-demo-4{
|
|
93
|
-
@include button-mini(#414141, white);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
//List grid
|
|
97
|
-
.list-grid-demo-1 {
|
|
98
|
-
@include list-grid();
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
//Nav
|
|
102
|
-
.nav-demo-1{
|
|
103
|
-
@include nav();
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// Popups
|
|
107
|
-
|
|
108
|
-
.picasso-_popups{
|
|
109
|
-
|
|
110
|
-
.styledocco-example{
|
|
14
|
+
aside{
|
|
15
|
+
width: 18%;
|
|
16
|
+
margin-right: 2%;
|
|
17
|
+
float: left;
|
|
18
|
+
background-clip: padding-box;
|
|
19
|
+
background-color: #FFFFFF;
|
|
20
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
21
|
+
@include border-radius (5px 5px 5px 5px);
|
|
22
|
+
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.1));
|
|
111
23
|
position: relative;
|
|
112
|
-
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.popup-demo-1{
|
|
118
|
-
@include popup();
|
|
119
|
-
}
|
|
24
|
+
z-index: 2;
|
|
120
25
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
26
|
+
ul{
|
|
27
|
+
list-style: none;
|
|
28
|
+
padding: 0;
|
|
124
29
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
30
|
+
ul, ul:last-child{
|
|
31
|
+
margin: 0 10px;
|
|
32
|
+
}
|
|
129
33
|
|
|
130
|
-
|
|
131
|
-
.accordion-demo-1{
|
|
132
|
-
@include accordion();
|
|
133
|
-
}
|
|
34
|
+
}
|
|
134
35
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
// inputs
|
|
141
|
-
.text-input-demo-1 {
|
|
142
|
-
@include input();
|
|
143
|
-
}
|
|
36
|
+
p{
|
|
37
|
+
margin: 10px 0 0 0;
|
|
38
|
+
font-weight: bold;
|
|
39
|
+
color: #535E68;
|
|
144
40
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
41
|
+
&:first-letter{
|
|
42
|
+
text-transform: uppercase;
|
|
43
|
+
}
|
|
148
44
|
|
|
149
|
-
|
|
150
|
-
.picasso-_tooltips{
|
|
45
|
+
}
|
|
151
46
|
|
|
152
|
-
.styledocco-example{
|
|
153
|
-
height: 50px;
|
|
154
47
|
}
|
|
155
48
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.arrow-demo-1{
|
|
163
|
-
@include arrow();
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
.arrow-demo-2{
|
|
167
|
-
@include arrow(#B94A48, white);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
.arrow-demo-3{
|
|
171
|
-
@include arrow(#F89406, white);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.arrow-demo-4{
|
|
175
|
-
@include arrow(#468847, white);
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
//Grillas
|
|
179
|
-
@include grid();
|
|
180
|
-
|
|
181
|
-
.row-col {
|
|
182
|
-
margin: 10px 0;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
[class^="col"] {
|
|
186
|
-
@include border-radius(5px);
|
|
187
|
-
background: #CCC;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
[class^="col"] [class^="col"] {
|
|
191
|
-
background: #AAA;
|
|
192
|
-
}
|
|
49
|
+
blockquote{
|
|
50
|
+
background: #F8F9FB;
|
|
51
|
+
padding: 5px;
|
|
52
|
+
@include border-radius(5px);
|
|
193
53
|
|
|
194
|
-
|
|
195
|
-
background: #696969;
|
|
196
|
-
color: #C0C0C0;
|
|
197
|
-
}
|
|
54
|
+
p{
|
|
198
55
|
|
|
199
|
-
|
|
56
|
+
&:last-child{
|
|
57
|
+
margin: 0;
|
|
58
|
+
}
|
|
200
59
|
|
|
201
|
-
|
|
202
|
-
background: #58608D;
|
|
203
|
-
width: 100%;
|
|
204
|
-
padding: 10px;
|
|
205
|
-
@include clearfix();
|
|
60
|
+
}
|
|
206
61
|
|
|
207
|
-
div{
|
|
208
|
-
background: white;
|
|
209
62
|
}
|
|
210
63
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
.despegar-size-1-demo{
|
|
216
|
-
font-size: $despegar-size-1;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.despegar-size-2-demo{
|
|
220
|
-
font-size: $despegar-size-2;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.despegar-size-3-demo{
|
|
224
|
-
font-size: $despegar-size-3;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
.despegar-size-4-demo{
|
|
228
|
-
font-size: $despegar-size-4;
|
|
229
|
-
}
|
|
64
|
+
.bar.bottom{
|
|
65
|
+
display: none;
|
|
66
|
+
}
|
|
230
67
|
|
|
231
|
-
.despegar-size-5-demo{
|
|
232
|
-
font-size: $despegar-size-5;
|
|
233
68
|
}
|
|
234
69
|
|
|
235
|
-
.
|
|
236
|
-
font-size: $despegar-size-6;
|
|
237
|
-
}
|
|
70
|
+
.picasso-{
|
|
238
71
|
|
|
239
|
-
.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
color: white;
|
|
243
|
-
}
|
|
72
|
+
.container{
|
|
73
|
+
max-width: 960px;
|
|
74
|
+
}
|
|
244
75
|
|
|
245
|
-
.
|
|
246
|
-
padding: 10px;
|
|
247
|
-
background: $despegar-white;
|
|
248
|
-
}
|
|
76
|
+
.section{
|
|
249
77
|
|
|
250
|
-
|
|
251
|
-
padding: 10px;
|
|
252
|
-
background: $despegar-yellow;
|
|
253
|
-
}
|
|
78
|
+
&:first-child{
|
|
254
79
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
}
|
|
80
|
+
img{
|
|
81
|
+
display: block;
|
|
82
|
+
margin: 0 auto;
|
|
83
|
+
}
|
|
259
84
|
|
|
260
|
-
|
|
261
|
-
padding: 10px;
|
|
262
|
-
background: $despegar-blue;
|
|
263
|
-
color: white;
|
|
264
|
-
}
|
|
85
|
+
}
|
|
265
86
|
|
|
266
|
-
|
|
267
|
-
padding: 10px;
|
|
268
|
-
background: $despegar-gray-1;
|
|
269
|
-
color: white;
|
|
270
|
-
}
|
|
87
|
+
}
|
|
271
88
|
|
|
272
|
-
.
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
color: white;
|
|
276
|
-
}
|
|
89
|
+
.docs{
|
|
90
|
+
width: 100%;
|
|
91
|
+
}
|
|
277
92
|
|
|
278
|
-
.despegar-gray-3-demo{
|
|
279
|
-
padding: 10px;
|
|
280
|
-
background: $despegar-gray-3;
|
|
281
|
-
color: white;
|
|
282
93
|
}
|
|
283
94
|
|
|
284
|
-
.
|
|
285
|
-
padding: 10px;
|
|
286
|
-
background: $despegar-gray-4;
|
|
287
|
-
color: white;
|
|
288
|
-
}
|
|
95
|
+
.picasso-_grid{
|
|
289
96
|
|
|
290
|
-
.
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
color: white;
|
|
294
|
-
}
|
|
97
|
+
.bar.bottom{
|
|
98
|
+
display: block;
|
|
99
|
+
}
|
|
295
100
|
|
|
296
|
-
.despegar-gray-6-demo{
|
|
297
|
-
padding: 10px;
|
|
298
|
-
background: $despegar-gray-6;
|
|
299
101
|
}
|
|
300
102
|
|
|
301
|
-
.
|
|
302
|
-
padding: 10px;
|
|
303
|
-
background: $despegar-gray-7;
|
|
304
|
-
}
|
|
103
|
+
.picasso-_components{
|
|
305
104
|
|
|
306
|
-
.
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
}
|
|
105
|
+
.preview{
|
|
106
|
+
display: none;
|
|
107
|
+
}
|
|
310
108
|
|
|
311
|
-
.despegar-title-color-demo{
|
|
312
|
-
padding: 10px;
|
|
313
|
-
background: $despegar-title-color;
|
|
314
|
-
color: white;
|
|
315
109
|
}
|
|
316
110
|
|
|
317
|
-
.
|
|
318
|
-
padding: 10px;
|
|
319
|
-
background: $despegar-titlealt-color;
|
|
320
|
-
}
|
|
111
|
+
.picasso-_popups{
|
|
321
112
|
|
|
322
|
-
.
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}
|
|
113
|
+
.resizeable{
|
|
114
|
+
height: 220px!important;
|
|
115
|
+
}
|
|
326
116
|
|
|
327
|
-
.despegar-link-color-hover-demo{
|
|
328
|
-
padding: 10px;
|
|
329
|
-
background: $despegar-link-color-hover;
|
|
330
117
|
}
|
|
331
118
|
|
|
332
|
-
.
|
|
333
|
-
padding: 10px;
|
|
334
|
-
background: $despegar-error-bg;
|
|
335
|
-
}
|
|
119
|
+
.picasso-_tooltips{
|
|
336
120
|
|
|
337
|
-
.
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
}
|
|
121
|
+
.resizeable{
|
|
122
|
+
height: 100px!important;
|
|
123
|
+
}
|
|
341
124
|
|
|
342
|
-
.despegar-warning-bg-demo{
|
|
343
|
-
padding: 10px;
|
|
344
|
-
background: $despegar-warning-bg;
|
|
345
125
|
}
|
|
346
|
-
|
|
347
|
-
.despegar-warning-border-demo{
|
|
348
|
-
padding: 10px;
|
|
349
|
-
background: $despegar-warning-border;
|
|
350
|
-
}
|
data/lib/picasso/version.rb
CHANGED
data/package.json
ADDED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
// carga los estilos generados por Picasso posean la [técnica de clases condicionales
|
|
10
10
|
// en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
|
|
11
11
|
|
|
12
|
-
// ```
|
|
12
|
+
// ```html
|
|
13
13
|
// <!DOCTYPE html>
|
|
14
14
|
// <!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
15
15
|
// <!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
@@ -129,32 +129,4 @@ $accordion-default-font-size: 0.8em !default;
|
|
|
129
129
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
.ie7 &{
|
|
133
|
-
|
|
134
|
-
.accordion-header{
|
|
135
|
-
|
|
136
|
-
.accordion-arrow{
|
|
137
|
-
zoom: expression( this.runtimeStyle.zoom="1", this.innerHTML="<span class='open'>▼</span><span class='close'>►</span>" );
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
&.accordion-header-open{
|
|
141
|
-
|
|
142
|
-
.close{
|
|
143
|
-
display: none;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
&.accordion-header-close{
|
|
149
|
-
|
|
150
|
-
.open{
|
|
151
|
-
display: none;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
}
|
|
159
|
-
|
|
160
132
|
}
|