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.
- data/README.md +1 -1
- data/docs/all.html +391 -0
- data/docs/arrows.html +130 -0
- data/docs/bubbles.html +126 -0
- data/docs/build/manifest.json +4 -0
- data/docs/build/md/arrows.md +43 -0
- data/docs/build/md/bubbles.md +43 -0
- data/docs/build/md/buttons.md +89 -0
- data/docs/build/md/components.md +1 -0
- data/docs/build/md/despegar.md +198 -0
- data/docs/build/md/intro.md +1 -0
- data/docs/build/md/utils.md +17 -0
- data/docs/build/templates/index.html +37 -0
- data/docs/build/templates/layout.html +39 -0
- data/docs/build/templates/page.html +24 -0
- data/docs/buttons.html +170 -0
- data/docs/components.html +93 -0
- data/docs/config.rb +6 -0
- data/docs/css/github.css +88 -0
- data/docs/css/markdown.css +100 -0
- data/docs/css/style.css +838 -0
- data/docs/despegar.html +281 -0
- data/docs/index.html +93 -0
- data/docs/intro.html +93 -0
- data/docs/js/docs.js +16 -0
- data/docs/js/rainbow-custom.min.js +13 -0
- data/docs/sass/style.scss +215 -0
- data/docs/utils.html +104 -0
- data/lib/picasso/version.rb +1 -1
- data/stylesheets/_picasso.scss +3 -0
- data/stylesheets/picasso/_components.scss +3 -0
- data/stylesheets/picasso/_despegar.scss +1 -0
- data/stylesheets/picasso/_utils.scss +1 -0
- data/stylesheets/picasso/components/_arrows.scss +54 -0
- data/stylesheets/picasso/components/_bubbles.scss +76 -0
- data/stylesheets/picasso/components/_buttons.scss +2 -0
- data/stylesheets/picasso/components/buttons/_buttons.scss +106 -0
- data/stylesheets/picasso/components/buttons/_mini-buttons.scss +66 -0
- data/stylesheets/{despegar → picasso/despegar}/_variables.scss +4 -2
- data/stylesheets/picasso/utils/_clearfix.scss +33 -0
- 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"><div class="bubble">
|
94
|
+
<h4>This is a optional title</h4>
|
95
|
+
<blockquote>
|
96
|
+
This is a long quotation. This is a long quotation.
|
97
|
+
</blockquote>
|
98
|
+
</div></code></pre>
|
99
|
+
<a name="sass"></a><h3>Sass</h3>
|
100
|
+
<pre><code class="lang-css">@import "picasso/components/bubbles";
|
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,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
|
+
```
|