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/despegar.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>
|
data/docs/ie.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
|
|
53
53
|
<ol>
|
|
54
54
|
|
|
55
|
+
<li><a href="./changelog.html#004">0.0.4</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="./ie.html#internet-explorer">Internet Explorer</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>
|
|
@@ -139,21 +171,20 @@
|
|
|
139
171
|
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
140
172
|
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
141
173
|
<!--[if gt IE 9]><!--> <html> <!--<![endif]--></code></pre>
|
|
142
|
-
<a name="
|
|
143
|
-
<p>Picasso
|
|
174
|
+
<a name="estrategias-para-estilos-de-fallback-para-ie"></a><h3>Estrategias para estilos de fallback para IE</h3>
|
|
175
|
+
<p>Para ciertos componentes, Picasso ofrece dos estrategias para estilos de fallback para versiones antiguas de Internet Explorer. Dichas estrategías se setean en variables individuales de cada componente, por ejemplo:
|
|
144
176
|
|
|
145
177
|
</p>
|
|
146
|
-
<pre><code class="lang-css"
|
|
147
|
-
<
|
|
148
|
-
- Tambi&eacute;n es requisito que la p&aacute;gina posea la t&eacute;cnica de clases condicionales en la etiqueta html.
|
|
149
|
-
- Cuando el soporte de CSS3 Pie esta activado, los estilos de fallback no son cargados.</code></pre>
|
|
150
|
-
<p>Un punto importante a tener en cuenta es la definició de la variable <code>$pie-behavior</code> con la ruta del archivo <code>.htc</code>:
|
|
178
|
+
<pre><code class="lang-css">$<componente>-ie-fallback: "sprites"|"GD"</code></pre>
|
|
179
|
+
<p>Los valores admitidos son <code>sprites</code> y <code>GD</code> (Graceful Degradation).
|
|
151
180
|
|
|
152
181
|
</p>
|
|
153
|
-
<
|
|
154
|
-
<p>
|
|
182
|
+
<a name="estrategiacutea-de-sprites"></a><h4>Estrategía de sprites</h4>
|
|
183
|
+
<p>Por cada componente, Picasso generará dinamicamente un sprite para recrear los estilos de cada elemento y seteará los estilos para que Internet Explorer utilice el sprite generado.
|
|
155
184
|
|
|
156
185
|
</p>
|
|
186
|
+
<a name="estrategiacutea-gd"></a><h4>Estrategía GD</h4>
|
|
187
|
+
<p>Por cada componente, Picasso seteará estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.</p>
|
|
157
188
|
|
|
158
189
|
</article>
|
|
159
190
|
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
data/docs/index.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>
|
|
@@ -140,11 +172,12 @@
|
|
|
140
172
|
|
|
141
173
|
</p>
|
|
142
174
|
<pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
|
|
143
|
-
<p>En el config.rb agregar:
|
|
175
|
+
<p>En el <code>config.rb</code> agregar:
|
|
144
176
|
|
|
145
177
|
</p>
|
|
146
178
|
<pre><code class="lang-bash">require 'picasso'
|
|
147
|
-
|
|
179
|
+
require 'magick'
|
|
180
|
+
gem 'picasso', '~> 0.1.0'</code></pre>
|
|
148
181
|
<p>Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
|
149
182
|
|
|
150
183
|
</p>
|
|
@@ -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>
|
|
@@ -130,25 +162,67 @@
|
|
|
130
162
|
<hr>
|
|
131
163
|
|
|
132
164
|
<article>
|
|
133
|
-
<a name="
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
</
|
|
137
|
-
<
|
|
138
|
-
</
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<
|
|
142
|
-
<
|
|
143
|
-
<
|
|
144
|
-
</
|
|
145
|
-
<
|
|
146
|
-
</
|
|
147
|
-
</
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
<
|
|
151
|
-
|
|
165
|
+
<a name="inputs"></a><h2>Inputs</h2>
|
|
166
|
+
<p>Estilos inputs de textos y selects.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<input type="text" class="text-input-demo-1">
|
|
172
|
+
|
|
173
|
+
<p>
|
|
174
|
+
<select class="select-demo-1">
|
|
175
|
+
<option value="1">1</option>
|
|
176
|
+
<option value="2">2</option>
|
|
177
|
+
<option value="3">3</option>
|
|
178
|
+
</select>
|
|
179
|
+
</p>
|
|
180
|
+
|
|
181
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
182
|
+
<input type="text" class="text-input-demo-2">
|
|
183
|
+
|
|
184
|
+
<p>
|
|
185
|
+
<select class="select-demo-2">
|
|
186
|
+
<option value="1">1</option>
|
|
187
|
+
<option value="2">2</option>
|
|
188
|
+
<option value="3">3</option>
|
|
189
|
+
</select>
|
|
190
|
+
</p>
|
|
191
|
+
|
|
192
|
+
<a name="html"></a><h3>HTML</h3>
|
|
193
|
+
<p><strong>Text inputs</strong>
|
|
194
|
+
|
|
195
|
+
</p>
|
|
196
|
+
<pre><code class="lang-html"><input type="text" class="text-input"></code></pre>
|
|
197
|
+
<p><strong>Selects</strong>
|
|
198
|
+
|
|
199
|
+
</p>
|
|
200
|
+
<pre><code class="lang-html"><select class="select">
|
|
201
|
+
<option value="1">1</option>
|
|
202
|
+
<option value="2">2</option>
|
|
203
|
+
<option value="3">3</option>
|
|
204
|
+
</select></code></pre>
|
|
205
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
206
|
+
<p>Importación:
|
|
207
|
+
|
|
208
|
+
</p>
|
|
209
|
+
<pre><code class="lang-css">@import "picasso/components/inputs";</code></pre>
|
|
210
|
+
<p>Mixin con los parámetros por defecto:
|
|
211
|
+
|
|
212
|
+
</p>
|
|
213
|
+
<pre><code class="lang-css">.text-input {
|
|
214
|
+
@include input();
|
|
215
|
+
}</code></pre>
|
|
216
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, color del borde, color del borde al hacer foco, radio del borde, color del texto, tamaño de la fuente:
|
|
217
|
+
|
|
218
|
+
</p>
|
|
219
|
+
<pre><code class="lang-css">.text-input {
|
|
220
|
+
@include input(100px, 20px, #DDD, blue, 5px, black, 14px);
|
|
221
|
+
}</code></pre>
|
|
222
|
+
<blockquote>
|
|
223
|
+
<p><strong>Nota</strong>: El color del borde debe ser en hexadecimal.
|
|
224
|
+
</p>
|
|
225
|
+
</blockquote>
|
|
152
226
|
|
|
153
227
|
</article>
|
|
154
228
|
|