picasso 0.0.3 → 0.1.0
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 +1 -0
- data/docs/accordions.html +267 -0
- data/docs/all.html +934 -56
- data/docs/arrows.html +45 -8
- data/docs/bubbles.html +49 -10
- data/docs/build/manifest.json +19 -2
- data/docs/build/md/changelog.md +16 -0
- data/docs/build/md/components/accordions.md +97 -0
- data/docs/build/md/{arrows.md → components/arrows.md} +10 -2
- data/docs/build/md/{bubbles.md → components/bubbles.md} +16 -4
- data/docs/build/md/{buttons.md → components/buttons.md} +50 -5
- data/docs/build/md/components/components.md +37 -0
- data/docs/build/md/components/inputs.md +73 -0
- data/docs/build/md/components/list-grids.md +180 -0
- data/docs/build/md/components/navs.md +107 -0
- data/docs/build/md/components/pagination.md +112 -0
- data/docs/build/md/components/popups.md +162 -0
- data/docs/build/md/{despegar.md → despegar/despegar.md} +0 -0
- data/docs/build/md/intro.md +3 -2
- data/docs/build/md/mejoras.md +69 -0
- data/docs/build/md/todo.md +11 -1
- data/docs/build/md/utils/utils.md +62 -0
- data/docs/buttons.html +80 -14
- data/docs/changelog.html +74 -2
- data/docs/components.html +65 -2
- data/docs/config.rb +14 -6
- data/docs/css/markdown.css +8 -0
- data/docs/css/style.css +1508 -64
- data/docs/despegar.html +34 -2
- data/docs/ie.html +42 -11
- data/docs/img/picasso-buttons.png +0 -0
- data/docs/img/picasso-mini-buttons.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +37 -4
- data/docs/{docs.html → inputs.html} +95 -21
- data/docs/intro.html +37 -4
- data/docs/js/docs.js +16 -0
- data/docs/js/viewer.js +12 -0
- data/docs/list-grids.html +341 -0
- data/docs/mejoras.html +241 -0
- data/docs/navs.html +272 -0
- data/docs/pagination.html +277 -0
- data/docs/popups.html +328 -0
- data/docs/sass/style.scss +113 -0
- data/docs/todo.html +49 -3
- data/docs/utils.html +68 -3
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +2 -0
- data/stylesheets/picasso/_components.scss +7 -1
- data/stylesheets/picasso/_utils.scss +3 -1
- data/stylesheets/picasso/components/_accordions.scss +96 -0
- data/stylesheets/picasso/components/_arrows.scss +9 -3
- data/stylesheets/picasso/components/_bubbles.scss +28 -17
- data/stylesheets/picasso/components/_inputs.scss +59 -0
- data/stylesheets/picasso/components/_list-grids.scss +118 -0
- data/stylesheets/picasso/components/_navs.scss +266 -0
- data/stylesheets/picasso/components/_pagination.scss +144 -0
- data/stylesheets/picasso/components/_popups.scss +257 -0
- data/stylesheets/picasso/components/buttons/_buttons.scss +124 -54
- data/stylesheets/picasso/components/buttons/_mini-buttons.scss +87 -19
- data/stylesheets/picasso/utils/_ie.scss +36 -0
- data/stylesheets/picasso/utils/_sprite.scss +32 -0
- metadata +65 -13
- data/docs/build/md/components.md +0 -3
- data/docs/build/md/docs.md +0 -21
- data/docs/build/md/ie.md +0 -32
- data/docs/build/md/utils.md +0 -19
data/docs/arrows.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
|
|
53
53
|
<ol>
|
|
54
54
|
|
|
55
|
+
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
56
|
+
|
|
55
57
|
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
56
58
|
|
|
57
59
|
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
@@ -67,15 +69,29 @@
|
|
|
67
69
|
|
|
68
70
|
<ol>
|
|
69
71
|
|
|
72
|
+
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
73
|
+
|
|
74
|
+
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
75
|
+
|
|
76
|
+
<li><a href="./todo.html#otros">Otros</a></li>
|
|
77
|
+
|
|
70
78
|
</ol>
|
|
71
79
|
|
|
72
80
|
</li>
|
|
73
81
|
|
|
74
82
|
<li>
|
|
75
|
-
<a href="./
|
|
83
|
+
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
76
84
|
|
|
77
85
|
<ol>
|
|
78
86
|
|
|
87
|
+
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
88
|
+
|
|
89
|
+
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
90
|
+
|
|
91
|
+
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
92
|
+
|
|
93
|
+
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
94
|
+
|
|
79
95
|
</ol>
|
|
80
96
|
|
|
81
97
|
</li>
|
|
@@ -85,15 +101,27 @@
|
|
|
85
101
|
|
|
86
102
|
<ol>
|
|
87
103
|
|
|
104
|
+
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
105
|
+
|
|
88
106
|
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
89
107
|
|
|
90
108
|
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
91
109
|
|
|
110
|
+
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
111
|
+
|
|
112
|
+
<li><a href="./navs.html#navs">Navs</a></li>
|
|
113
|
+
|
|
114
|
+
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
115
|
+
|
|
92
116
|
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
93
117
|
|
|
118
|
+
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
119
|
+
|
|
94
120
|
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
95
121
|
|
|
96
|
-
<li><a href="./
|
|
122
|
+
<li><a href="./popups.html#popups">Popups</a></li>
|
|
123
|
+
|
|
124
|
+
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
97
125
|
|
|
98
126
|
</ol>
|
|
99
127
|
|
|
@@ -106,6 +134,10 @@
|
|
|
106
134
|
|
|
107
135
|
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
108
136
|
|
|
137
|
+
<li><a href="./utils.html#ie">IE</a></li>
|
|
138
|
+
|
|
139
|
+
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
140
|
+
|
|
109
141
|
</ol>
|
|
110
142
|
|
|
111
143
|
</li>
|
|
@@ -160,15 +192,20 @@
|
|
|
160
192
|
Beneficio
|
|
161
193
|
</em></code></pre>
|
|
162
194
|
<a name="sass"></a><h3>Sass</h3>
|
|
163
|
-
<
|
|
195
|
+
<p>Importación:
|
|
164
196
|
|
|
165
|
-
|
|
166
|
-
|
|
197
|
+
</p>
|
|
198
|
+
<pre><code class="lang-css">@import "picasso/components/arrows";</code></pre>
|
|
199
|
+
<p>Mixin con los parámetros por defecto:
|
|
200
|
+
|
|
201
|
+
</p>
|
|
202
|
+
<pre><code class="lang-css">.arrow{
|
|
167
203
|
@include arrow();
|
|
168
|
-
}
|
|
204
|
+
}</code></pre>
|
|
205
|
+
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
169
206
|
|
|
170
|
-
|
|
171
|
-
|
|
207
|
+
</p>
|
|
208
|
+
<pre><code class="lang-css">.arrow{
|
|
172
209
|
@include arrow(green, white);
|
|
173
210
|
}</code></pre>
|
|
174
211
|
|
data/docs/bubbles.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
|
|
53
53
|
<ol>
|
|
54
54
|
|
|
55
|
+
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
56
|
+
|
|
55
57
|
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
56
58
|
|
|
57
59
|
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
@@ -67,15 +69,29 @@
|
|
|
67
69
|
|
|
68
70
|
<ol>
|
|
69
71
|
|
|
72
|
+
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
73
|
+
|
|
74
|
+
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
75
|
+
|
|
76
|
+
<li><a href="./todo.html#otros">Otros</a></li>
|
|
77
|
+
|
|
70
78
|
</ol>
|
|
71
79
|
|
|
72
80
|
</li>
|
|
73
81
|
|
|
74
82
|
<li>
|
|
75
|
-
<a href="./
|
|
83
|
+
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
76
84
|
|
|
77
85
|
<ol>
|
|
78
86
|
|
|
87
|
+
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
88
|
+
|
|
89
|
+
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
90
|
+
|
|
91
|
+
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
92
|
+
|
|
93
|
+
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
94
|
+
|
|
79
95
|
</ol>
|
|
80
96
|
|
|
81
97
|
</li>
|
|
@@ -85,15 +101,27 @@
|
|
|
85
101
|
|
|
86
102
|
<ol>
|
|
87
103
|
|
|
104
|
+
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
105
|
+
|
|
88
106
|
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
89
107
|
|
|
90
108
|
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
91
109
|
|
|
110
|
+
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
111
|
+
|
|
112
|
+
<li><a href="./navs.html#navs">Navs</a></li>
|
|
113
|
+
|
|
114
|
+
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
115
|
+
|
|
92
116
|
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
93
117
|
|
|
118
|
+
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
119
|
+
|
|
94
120
|
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
95
121
|
|
|
96
|
-
<li><a href="./
|
|
122
|
+
<li><a href="./popups.html#popups">Popups</a></li>
|
|
123
|
+
|
|
124
|
+
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
97
125
|
|
|
98
126
|
</ol>
|
|
99
127
|
|
|
@@ -106,6 +134,10 @@
|
|
|
106
134
|
|
|
107
135
|
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
108
136
|
|
|
137
|
+
<li><a href="./utils.html#ie">IE</a></li>
|
|
138
|
+
|
|
139
|
+
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
140
|
+
|
|
109
141
|
</ol>
|
|
110
142
|
|
|
111
143
|
</li>
|
|
@@ -131,16 +163,18 @@
|
|
|
131
163
|
|
|
132
164
|
<article>
|
|
133
165
|
<a name="bubbles"></a><h2>Bubbles</h2>
|
|
134
|
-
<p>Ideales para
|
|
166
|
+
<p>Ideales para citar comentarios de clientes.
|
|
135
167
|
|
|
136
168
|
</p>
|
|
137
169
|
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
138
171
|
<div class="bubble-demo-1">
|
|
139
172
|
<blockquote>
|
|
140
173
|
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.
|
|
141
174
|
</blockquote>
|
|
142
175
|
</div>
|
|
143
176
|
|
|
177
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
144
178
|
<div class="bubble-demo-2">
|
|
145
179
|
<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>
|
|
146
180
|
<blockquote>
|
|
@@ -156,16 +190,21 @@
|
|
|
156
190
|
</blockquote>
|
|
157
191
|
</div></code></pre>
|
|
158
192
|
<a name="sass"></a><h3>Sass</h3>
|
|
159
|
-
<
|
|
193
|
+
<p>Importación:
|
|
160
194
|
|
|
161
|
-
|
|
162
|
-
|
|
195
|
+
</p>
|
|
196
|
+
<pre><code class="lang-css">@import "picasso/components/bubbles";</code></pre>
|
|
197
|
+
<p>Mixin con los parámetros por defecto:
|
|
198
|
+
|
|
199
|
+
</p>
|
|
200
|
+
<pre><code class="lang-css">.bubble{
|
|
163
201
|
@include bubble();
|
|
164
|
-
}
|
|
202
|
+
}</code></pre>
|
|
203
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, background, color, utilizar ellipsis, posición de la ellipsis:
|
|
165
204
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
@include bubble(200px, blue, white, true);
|
|
205
|
+
</p>
|
|
206
|
+
<pre><code class="lang-css">.bubble{
|
|
207
|
+
@include bubble(200px, blue, white, true, left);
|
|
169
208
|
}</code></pre>
|
|
170
209
|
|
|
171
210
|
</article>
|
data/docs/build/manifest.json
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"title": "Picasso. Framework CSS/Sass.",
|
|
3
|
-
"files": [
|
|
4
|
-
|
|
3
|
+
"files": [
|
|
4
|
+
"md/intro.md",
|
|
5
|
+
"md/changelog.md",
|
|
6
|
+
"md/todo.md",
|
|
7
|
+
"md/mejoras.md",
|
|
8
|
+
"md/components/components.md",
|
|
9
|
+
"md/components/buttons.md",
|
|
10
|
+
"md/components/inputs.md",
|
|
11
|
+
"md/components/navs.md",
|
|
12
|
+
"md/components/list-grids.md",
|
|
13
|
+
"md/components/arrows.md",
|
|
14
|
+
"md/components/pagination.md",
|
|
15
|
+
"md/components/bubbles.md",
|
|
16
|
+
"md/components/popups.md",
|
|
17
|
+
"md/components/accordions.md",
|
|
18
|
+
"md/utils/utils.md",
|
|
19
|
+
"md/despegar/despegar.md"
|
|
20
|
+
]
|
|
21
|
+
}
|
data/docs/build/md/changelog.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.0
|
|
4
|
+
|
|
5
|
+
* Agregados nuevos componentes:
|
|
6
|
+
* - Popups
|
|
7
|
+
* - Pagination
|
|
8
|
+
* - Navs
|
|
9
|
+
* - List Grids
|
|
10
|
+
* - Inputs
|
|
11
|
+
* - Accordions
|
|
12
|
+
* Agregadas nuevas utilidades:
|
|
13
|
+
* - Sprite: `insert-in-sprite()`
|
|
14
|
+
* - IE: `after()` / `before()`
|
|
15
|
+
* Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de [compass-magick](https://github.com/StanAngeloff/compass-magick).
|
|
16
|
+
* Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.
|
|
17
|
+
* Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.
|
|
18
|
+
|
|
3
19
|
## 0.0.3
|
|
4
20
|
|
|
5
21
|
* Agregados estilos de fallback para Internet Explorer.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
## Accordions
|
|
2
|
+
|
|
3
|
+
Para mostrar información en espacios reducidos.
|
|
4
|
+
|
|
5
|
+
### Ejemplos
|
|
6
|
+
|
|
7
|
+
#### Ejemplo 1
|
|
8
|
+
|
|
9
|
+
<div class="accordion-demo-1">
|
|
10
|
+
|
|
11
|
+
<div class="accordion-section">
|
|
12
|
+
<div class="accordion-header accordion-header-open">
|
|
13
|
+
<h4>Precio</h4>
|
|
14
|
+
<span class="arrow"></span>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="accordion-content">
|
|
17
|
+
<span>aca van los filtros de precio</span>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="accordion-section">
|
|
21
|
+
<div class="accordion-header accordion-header-open">
|
|
22
|
+
<h4>Paradas</h4>
|
|
23
|
+
<span class="arrow"></span>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="accordion-content">
|
|
26
|
+
<span>aca van los filtros de paradas</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
#### Ejemplo 2
|
|
33
|
+
|
|
34
|
+
<div class="accordion-demo-2">
|
|
35
|
+
|
|
36
|
+
<div class="accordion-section">
|
|
37
|
+
<div class="accordion-header accordion-header-open">
|
|
38
|
+
<h4>Precio</h4>
|
|
39
|
+
<span class="arrow"></span>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="accordion-content">
|
|
42
|
+
<span>aca van los filtros de precio</span>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="accordion-section">
|
|
46
|
+
<div class="accordion-header accordion-header-open">
|
|
47
|
+
<h4>Paradas</h4>
|
|
48
|
+
<span class="arrow"></span>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="accordion-content">
|
|
51
|
+
<span>aca van los filtros de paradas</span>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
### HTML
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div class="accordion">
|
|
61
|
+
<div class="accordion-section">
|
|
62
|
+
<div class="accordion-header accordion-header-open">
|
|
63
|
+
<h4>Precio</h4>
|
|
64
|
+
<span class="arrow"></span>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="accordion-content">
|
|
67
|
+
<span>aca van los filtros de precio</span>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
> **Nota**: Para tener un header cerrado se utiliza la clase `accordion-header-close`. El componente no incluye las funciones JavaScript para ocultar y mostrar el contenido de cada acordeón.
|
|
74
|
+
|
|
75
|
+
### Sass
|
|
76
|
+
|
|
77
|
+
Importación:
|
|
78
|
+
|
|
79
|
+
```css
|
|
80
|
+
@import "picasso/components/accordions";
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Mixin con los parámetros por defecto:
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
.accordion {
|
|
87
|
+
@include accordion();
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Mixin con parámetros personalizados. Disponibles: alto, background del título, color del título:
|
|
92
|
+
|
|
93
|
+
```css
|
|
94
|
+
.accordion {
|
|
95
|
+
@include accordion(40px, #CCCCCC, #000000);
|
|
96
|
+
}
|
|
97
|
+
```
|
|
@@ -30,15 +30,23 @@ Excelentes para avisos importantes.
|
|
|
30
30
|
|
|
31
31
|
### Sass
|
|
32
32
|
|
|
33
|
+
Importación:
|
|
34
|
+
|
|
33
35
|
```css
|
|
34
36
|
@import "picasso/components/arrows";
|
|
37
|
+
```
|
|
35
38
|
|
|
36
|
-
|
|
39
|
+
Mixin con los parámetros por defecto:
|
|
40
|
+
|
|
41
|
+
```css
|
|
37
42
|
.arrow{
|
|
38
43
|
@include arrow();
|
|
39
44
|
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Mixin con parámetros personalizados. Disponibles: background y color:
|
|
40
48
|
|
|
41
|
-
|
|
49
|
+
```css
|
|
42
50
|
.arrow{
|
|
43
51
|
@include arrow(green, white);
|
|
44
52
|
}
|
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
## Bubbles
|
|
2
2
|
|
|
3
|
-
Ideales para
|
|
3
|
+
Ideales para citar comentarios de clientes.
|
|
4
4
|
|
|
5
5
|
### Ejemplos
|
|
6
6
|
|
|
7
|
+
#### Ejemplo 1
|
|
8
|
+
|
|
7
9
|
<div class="bubble-demo-1">
|
|
8
10
|
<blockquote>
|
|
9
11
|
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.
|
|
10
12
|
</blockquote>
|
|
11
13
|
</div>
|
|
12
14
|
|
|
15
|
+
#### Ejemplo 2
|
|
16
|
+
|
|
13
17
|
<div class="bubble-demo-2">
|
|
14
18
|
<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>
|
|
15
19
|
<blockquote>
|
|
@@ -30,16 +34,24 @@ Ideales para mostrar comentarios de clientes.
|
|
|
30
34
|
|
|
31
35
|
### Sass
|
|
32
36
|
|
|
37
|
+
Importación:
|
|
38
|
+
|
|
33
39
|
```css
|
|
34
40
|
@import "picasso/components/bubbles";
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Mixin con los parámetros por defecto:
|
|
35
44
|
|
|
36
|
-
|
|
45
|
+
```css
|
|
37
46
|
.bubble{
|
|
38
47
|
@include bubble();
|
|
39
48
|
}
|
|
49
|
+
```
|
|
40
50
|
|
|
41
|
-
|
|
51
|
+
Mixin con parámetros personalizados. Disponibles: ancho, background, color, utilizar ellipsis, posición de la ellipsis:
|
|
52
|
+
|
|
53
|
+
```css
|
|
42
54
|
.bubble{
|
|
43
|
-
@include bubble(200px, blue, white, true);
|
|
55
|
+
@include bubble(200px, blue, white, true, left);
|
|
44
56
|
}
|
|
45
57
|
```
|