picasso 0.0.1 → 0.0.2

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.
Files changed (41) hide show
  1. data/README.md +1 -1
  2. data/docs/all.html +391 -0
  3. data/docs/arrows.html +130 -0
  4. data/docs/bubbles.html +126 -0
  5. data/docs/build/manifest.json +4 -0
  6. data/docs/build/md/arrows.md +43 -0
  7. data/docs/build/md/bubbles.md +43 -0
  8. data/docs/build/md/buttons.md +89 -0
  9. data/docs/build/md/components.md +1 -0
  10. data/docs/build/md/despegar.md +198 -0
  11. data/docs/build/md/intro.md +1 -0
  12. data/docs/build/md/utils.md +17 -0
  13. data/docs/build/templates/index.html +37 -0
  14. data/docs/build/templates/layout.html +39 -0
  15. data/docs/build/templates/page.html +24 -0
  16. data/docs/buttons.html +170 -0
  17. data/docs/components.html +93 -0
  18. data/docs/config.rb +6 -0
  19. data/docs/css/github.css +88 -0
  20. data/docs/css/markdown.css +100 -0
  21. data/docs/css/style.css +838 -0
  22. data/docs/despegar.html +281 -0
  23. data/docs/index.html +93 -0
  24. data/docs/intro.html +93 -0
  25. data/docs/js/docs.js +16 -0
  26. data/docs/js/rainbow-custom.min.js +13 -0
  27. data/docs/sass/style.scss +215 -0
  28. data/docs/utils.html +104 -0
  29. data/lib/picasso/version.rb +1 -1
  30. data/stylesheets/_picasso.scss +3 -0
  31. data/stylesheets/picasso/_components.scss +3 -0
  32. data/stylesheets/picasso/_despegar.scss +1 -0
  33. data/stylesheets/picasso/_utils.scss +1 -0
  34. data/stylesheets/picasso/components/_arrows.scss +54 -0
  35. data/stylesheets/picasso/components/_bubbles.scss +76 -0
  36. data/stylesheets/picasso/components/_buttons.scss +2 -0
  37. data/stylesheets/picasso/components/buttons/_buttons.scss +106 -0
  38. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +66 -0
  39. data/stylesheets/{despegar → picasso/despegar}/_variables.scss +4 -2
  40. data/stylesheets/picasso/utils/_clearfix.scss +33 -0
  41. metadata +41 -4
data/docs/bubbles.html ADDED
@@ -0,0 +1,126 @@
1
+ <!doctype html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
+ <title>Picasso Docs</title>
8
+
9
+ <link type="text/css" rel="stylesheet" href="./css/markdown.css">
10
+ <link type="text/css" rel="stylesheet" href="./css/github.css">
11
+ <link type="text/css" rel="stylesheet" href="./css/style.css">
12
+ </head>
13
+
14
+ <body>
15
+
16
+
17
+
18
+
19
+ <aside>
20
+ <nav>
21
+ <ol>
22
+
23
+ <li>
24
+ <a href="./intro.html#picasso-framework-css-sass">Picasso. Framework CSS/Sass.</a>
25
+
26
+ <ol>
27
+
28
+ </ol>
29
+
30
+ </li>
31
+
32
+ <li>
33
+ <a href="./components.html#components">Components</a>
34
+
35
+ <ol>
36
+
37
+ <li><a href="./buttons.html#buttons">Buttons</a></li>
38
+
39
+ <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
40
+
41
+ <li><a href="./arrows.html#arrows">Arrows</a></li>
42
+
43
+ <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
44
+
45
+ </ol>
46
+
47
+ </li>
48
+
49
+ <li>
50
+ <a href="./utils.html#utils">Utils</a>
51
+
52
+ <ol>
53
+
54
+ <li><a href="./utils.html#clearfix">Clearfix</a></li>
55
+
56
+ </ol>
57
+
58
+ </li>
59
+
60
+ <li>
61
+ <a href="./despegar.html#despegar">Despegar</a>
62
+
63
+ <ol>
64
+
65
+ <li><a href="./despegar.html#variables">Variables</a></li>
66
+
67
+ </ol>
68
+
69
+ </li>
70
+
71
+ </ol>
72
+ </nav>
73
+ </aside>
74
+
75
+
76
+ <article>
77
+ <a name="bubbles"></a><h2>Bubbles</h2>
78
+ <a name="ejemplos"></a><h3>Ejemplos</h3>
79
+ <div class="bubble-demo-1">
80
+ <blockquote>
81
+ This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
82
+ </blockquote>
83
+ </div>
84
+
85
+ <div class="bubble-demo-2">
86
+ <a name="this-is-a-long-title-this-is-a-long-title-this-is-a-long-title-this-is-a-long-title-this-is-a-long-title"></a><h4>This is a long title. This is a long title. This is a long title. This is a long title. This is a long title.</h4>
87
+ <blockquote>
88
+ This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
89
+ </blockquote>
90
+ </div>
91
+
92
+ <a name="html"></a><h3>HTML</h3>
93
+ <pre><code class="lang-html">&lt;div class=&quot;bubble&quot;&gt;
94
+ &lt;h4&gt;This is a optional title&lt;/h4&gt;
95
+ &lt;blockquote&gt;
96
+ This is a long quotation. This is a long quotation.
97
+ &lt;/blockquote&gt;
98
+ &lt;/div&gt;</code></pre>
99
+ <a name="sass"></a><h3>Sass</h3>
100
+ <pre><code class="lang-css">@import &quot;picasso/components/bubbles&quot;;
101
+
102
+ //Bubbles
103
+ .bubble{
104
+ @include bubble();
105
+ }
106
+
107
+ // Con todos los parametros: ancho, background, color y ellipsis
108
+ .bubble{
109
+ @include bubble(200px, blue, white, true);
110
+ }</code></pre>
111
+
112
+ </article>
113
+
114
+
115
+ <footer>
116
+ <a href="./all.html">Everything on a single page</a>
117
+
118
+ </footer>
119
+
120
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
121
+ <script src="./js/docs.js"></script>
122
+ <script src="./js/rainbow-custom.min.js"></script>
123
+
124
+ </body>
125
+
126
+ </html>
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Picasso Docs",
3
+ "files": ["md/intro.md", "md/components.md", "md/buttons.md", "md/arrows.md", "md/bubbles.md", "md/utils.md", "md/despegar.md"]
4
+ }
@@ -0,0 +1,43 @@
1
+ ## Arrows
2
+
3
+ ### Ejemplos
4
+
5
+ <em class="arrow-demo-1">
6
+ Información
7
+ </em>
8
+
9
+ <em class="arrow-demo-2">
10
+ Importante
11
+ </em>
12
+
13
+ <em class="arrow-demo-3">
14
+ Leer
15
+ </em>
16
+
17
+ <em class="arrow-demo-4">
18
+ Aceptado
19
+ </em>
20
+
21
+ ### HTML
22
+
23
+ ```html
24
+ <em class="arrow">
25
+ Beneficio
26
+ </em>
27
+ ```
28
+
29
+ ### Sass
30
+
31
+ ```css
32
+ @import "picasso/components/arrows";
33
+
34
+ //Arrows
35
+ .arrow{
36
+ @include arrow();
37
+ }
38
+
39
+ // Con todos los parametros: background y color
40
+ .arrow{
41
+ @include arrow(green, white);
42
+ }
43
+ ```
@@ -0,0 +1,43 @@
1
+ ## Bubbles
2
+
3
+ ### Ejemplos
4
+
5
+ <div class="bubble-demo-1">
6
+ <blockquote>
7
+ This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
8
+ </blockquote>
9
+ </div>
10
+
11
+ <div class="bubble-demo-2">
12
+ <h4>This is a long title. This is a long title. This is a long title. This is a long title. This is a long title.</h4>
13
+ <blockquote>
14
+ This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
15
+ </blockquote>
16
+ </div>
17
+
18
+ ### HTML
19
+
20
+ ```html
21
+ <div class="bubble">
22
+ <h4>This is a optional title</h4>
23
+ <blockquote>
24
+ This is a long quotation. This is a long quotation.
25
+ </blockquote>
26
+ </div>
27
+ ```
28
+
29
+ ### Sass
30
+
31
+ ```css
32
+ @import "picasso/components/bubbles";
33
+
34
+ //Bubbles
35
+ .bubble{
36
+ @include bubble();
37
+ }
38
+
39
+ // Con todos los parametros: ancho, background, color y ellipsis
40
+ .bubble{
41
+ @include bubble(200px, blue, white, true);
42
+ }
43
+ ```
@@ -0,0 +1,89 @@
1
+ ## Buttons
2
+
3
+ ### Ejemplos
4
+
5
+ <a class="button-demo-1" href="#">
6
+ <span>Comprar</span>
7
+ </a>
8
+
9
+ <a class="button-demo-2" href="#">
10
+ <span>Buscar</span>
11
+ </a>
12
+
13
+ <a class="button-demo-3" href="#">
14
+ <span>Reservar</span>
15
+ </a>
16
+
17
+ <a class="button-demo-4" href="#">
18
+ <span>Un texto demasiado largo para este botón</span>
19
+ </a>
20
+
21
+ ### HTML
22
+
23
+ ```html
24
+ <a class="button" href="#">
25
+ <span>Comprar</span>
26
+ </a>
27
+ ```
28
+
29
+ ### Sass
30
+
31
+ ```css
32
+ @import "picasso/components/buttons";
33
+
34
+ // Con valores por defecto
35
+ .button{
36
+ @include button();
37
+ }
38
+
39
+ // Con todos los parametros: ancho, alto, background y color
40
+ .button{
41
+ @include button(100px, 30px, red, white);
42
+ }
43
+ ```
44
+
45
+ ## Mini-Buttons
46
+
47
+ ### Ejemplos
48
+
49
+ <a class="mini-button-demo-1" href="#">
50
+ <span>Limpiar</span>
51
+ </a>
52
+
53
+ <a class="mini-button-demo-2" href="#">
54
+ <span>Abrir</span>
55
+ </a>
56
+
57
+ <a class="mini-button-demo-3" href="#">
58
+ <span>Descargar</span>
59
+ </a>
60
+
61
+ <a class="mini-button-demo-4" href="#">
62
+ <span>Ir</span>
63
+ </a>
64
+
65
+
66
+
67
+ ### HTML
68
+
69
+ ```html
70
+ <a class="mini-button" href="#">
71
+ <span>Comprar</span>
72
+ </a>
73
+ ```
74
+
75
+ ### Sass
76
+
77
+ ```css
78
+ @import "picasso/components/buttons";
79
+
80
+ // Con valores por defecto
81
+ .mini-button{
82
+ @include mini-button();
83
+ }
84
+
85
+ // Con todos los parametros: background y color
86
+ .mini-button{
87
+ @include button(grey, blue);
88
+ }
89
+ ```
@@ -0,0 +1 @@
1
+ # Components
@@ -0,0 +1,198 @@
1
+ # Despegar
2
+
3
+ ## Variables
4
+
5
+ ### Ejemplos
6
+
7
+ #### Cuerpos tipograficos
8
+
9
+ <p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
10
+
11
+ <p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
12
+
13
+ <p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
14
+
15
+ <p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
16
+
17
+ <p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
18
+
19
+ <p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p>
20
+
21
+ #### Colores base
22
+
23
+ <p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
24
+
25
+ <p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
26
+
27
+ <p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
28
+
29
+ <p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
30
+
31
+ <p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
32
+
33
+ <p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
34
+
35
+ <p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
36
+
37
+ <p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
38
+
39
+ <p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
40
+
41
+ <p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
42
+
43
+ <p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
44
+
45
+ <p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
46
+
47
+ #### Elementos
48
+
49
+ <p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
50
+
51
+ <p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
52
+
53
+ <p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
54
+
55
+ <p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
56
+
57
+ <p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
58
+
59
+ <p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
60
+
61
+ <p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
62
+
63
+ <p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
64
+
65
+ <p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p>
66
+
67
+ ### Sass
68
+
69
+ ```css
70
+ @import "picasso/despegar/variables";
71
+
72
+ //Size 1
73
+ .despegar-size-1-demo{
74
+ font-size: $despegar-size-1;
75
+ }
76
+
77
+ //Size 2
78
+ .despegar-size-2-demo{
79
+ font-size: $despegar-size-2;
80
+ }
81
+
82
+ //Size 3
83
+ .despegar-size-3-demo{
84
+ font-size: $despegar-size-3;
85
+ }
86
+
87
+ //Size 4
88
+ .despegar-size-4-demo{
89
+ font-size: $despegar-size-4;
90
+ }
91
+
92
+ //Size 5
93
+ .despegar-size-5-demo{
94
+ font-size: $despegar-size-5;
95
+ }
96
+
97
+ //Size 6
98
+ .despegar-size-6-demo{
99
+ font-size: $despegar-size-6;
100
+ }
101
+
102
+ //Black
103
+ .despegar-black-demo{
104
+ background: $despegar-black;
105
+ }
106
+
107
+ //White
108
+ .despegar-white-demo{
109
+ background: $despegar-white;
110
+ }
111
+
112
+ //Yellow
113
+ .despegar-yellow-demo{
114
+ background: $despegar-yellow;
115
+ }
116
+
117
+ //Red
118
+ .despegar-red-demo{
119
+ background: $despegar-red;
120
+ }
121
+
122
+ //Blue
123
+ .despegar-blue-demo{
124
+ background: $despegar-blue;
125
+ }
126
+
127
+ //Gray 1
128
+ .despegar-gray-1-demo{
129
+ color: $despegar-gray-1;
130
+ }
131
+
132
+ //Gray 2
133
+ .despegar-gray-2-demo{
134
+ color: $despegar-gray-2;
135
+ }
136
+
137
+ //Gray 3
138
+ .despegar-gray-3-demo{
139
+ color: $despegar-gray-3;
140
+ }
141
+
142
+ //Gray 4
143
+ .despegar-gray-4-demo{
144
+ color: $despegar-gray-4;
145
+ }
146
+
147
+ //Gray 5
148
+ .despegar-gray-5-demo{
149
+ color: $despegar-gray-5;
150
+ }
151
+
152
+ //Gray 6
153
+ .despegar-gray-6-demo{
154
+ color: $despegar-gray-6;
155
+ }
156
+
157
+ //Gray 7
158
+ .despegar-gray-7-demo{
159
+ color: $despegar-gray-7;
160
+ }
161
+
162
+ //Searchbox
163
+ .despegar-searchbox-bg-demo{
164
+ background: $despegar-searchbox-bg;
165
+ }
166
+
167
+ //Title
168
+ .despegar-title-color-demo{
169
+ color: $despegar-title-color;
170
+ }
171
+
172
+ //Title Alt
173
+ .despegar-titlealt-color-demo{
174
+ color: $despegar-titlealt-color;
175
+ }
176
+
177
+ //Link
178
+ .despegar-link-color-demo{
179
+ color: $despegar-link-color;
180
+
181
+ &:hover{
182
+ color: $despegar-link-color-hover;
183
+ }
184
+
185
+ }
186
+
187
+ //Error
188
+ .despegar-error-bg-demo{
189
+ background: $despegar-error-bg;
190
+ border: 1px solid $despegar-error-border;
191
+ }
192
+
193
+ //Warning
194
+ .despegar-warning-bg-demo{
195
+ background: $despegar-warning-bg;
196
+ border: 1px solid $despegar-warning-border;
197
+ }
198
+ ```