picasso 0.2.3 → 0.3.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/README.md +216 -3
- data/docs/_picasso.html +38 -0
- data/docs/config.rb +1 -1
- data/docs/css/{style.css → picasso-docs.css} +797 -1331
- data/docs/img/picasso-buttons-glossy.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +201 -198
- data/docs/picasso-_components.html +83 -0
- data/docs/picasso-_despegar.html +34 -0
- data/docs/picasso-_utils.html +40 -0
- data/docs/picasso-components-_accordions.html +183 -0
- data/docs/picasso-components-_arrows.html +124 -0
- data/docs/picasso-components-_bubbles.html +142 -0
- data/docs/picasso-components-_buttons.html +38 -0
- data/docs/picasso-components-_inputs.html +122 -0
- data/docs/picasso-components-_list-grids.html +253 -0
- data/docs/picasso-components-_mini-tooltips.html +152 -0
- data/docs/picasso-components-_navs.html +360 -0
- data/docs/picasso-components-_pagination.html +258 -0
- data/docs/picasso-components-_popups.html +359 -0
- data/docs/picasso-components-buttons-_3d.html +284 -0
- data/docs/picasso-components-buttons-_glossy.html +290 -0
- data/docs/picasso-components-buttons-_mini.html +224 -0
- data/docs/picasso-despegar-_variables.html +145 -0
- data/docs/picasso-utils-_clearfix.html +56 -0
- data/docs/picasso-utils-_grid.html +390 -0
- data/docs/picasso-utils-_ie.html +50 -0
- data/docs/picasso-utils-_sprite.html +62 -0
- data/docs/resources/docs.jade +46 -0
- data/docs/resources/docs.js +52 -0
- data/docs/sass/{style.scss → picasso-docs.scss} +71 -96
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +1 -1
- data/stylesheets/_picasso.scss +14 -0
- data/stylesheets/picasso/_components.scss +54 -0
- data/stylesheets/picasso/_despegar.scss +12 -0
- data/stylesheets/picasso/_utils.scss +17 -1
- data/stylesheets/picasso/components/_accordions.scss +52 -2
- data/stylesheets/picasso/components/_arrows.scss +39 -2
- data/stylesheets/picasso/components/_bubbles.scss +36 -2
- data/stylesheets/picasso/components/_buttons.scss +14 -0
- data/stylesheets/picasso/components/_inputs.scss +41 -2
- data/stylesheets/picasso/components/_list-grids.scss +84 -3
- data/stylesheets/picasso/components/_mini-tooltips.scss +128 -0
- data/stylesheets/picasso/components/_navs.scss +52 -2
- data/stylesheets/picasso/components/_pagination.scss +63 -2
- data/stylesheets/picasso/components/_popups.scss +73 -2
- data/stylesheets/picasso/components/buttons/_3d.scss +75 -2
- data/stylesheets/picasso/components/buttons/_glossy.scss +41 -2
- data/stylesheets/picasso/components/buttons/_mini.scss +44 -2
- data/stylesheets/picasso/despegar/_variables.scss +61 -60
- data/stylesheets/picasso/utils/_clearfix.scss +24 -16
- data/stylesheets/picasso/utils/_grid.scss +269 -0
- data/stylesheets/picasso/utils/_ie.scss +23 -28
- data/stylesheets/picasso/utils/_sprite.scss +15 -3
- metadata +34 -50
- data/docs/accordions.html +0 -276
- data/docs/all.html +0 -1588
- data/docs/arrows.html +0 -233
- data/docs/bubbles.html +0 -231
- data/docs/build/manifest.json +0 -21
- data/docs/build/md/changelog.md +0 -53
- data/docs/build/md/components/accordions.md +0 -97
- data/docs/build/md/components/arrows.md +0 -53
- data/docs/build/md/components/bubbles.md +0 -57
- data/docs/build/md/components/buttons.md +0 -205
- data/docs/build/md/components/components.md +0 -37
- data/docs/build/md/components/inputs.md +0 -73
- data/docs/build/md/components/list-grids.md +0 -180
- data/docs/build/md/components/navs.md +0 -107
- data/docs/build/md/components/pagination.md +0 -112
- data/docs/build/md/components/popups.md +0 -162
- data/docs/build/md/despegar/despegar.md +0 -200
- data/docs/build/md/intro.md +0 -59
- data/docs/build/md/mejoras.md +0 -69
- data/docs/build/md/todo.md +0 -14
- data/docs/build/md/utils/utils.md +0 -62
- data/docs/build/templates/index.html +0 -37
- data/docs/build/templates/layout.html +0 -68
- data/docs/build/templates/page.html +0 -3
- data/docs/buttons.html +0 -357
- data/docs/changelog.html +0 -264
- data/docs/components.html +0 -220
- data/docs/css/github.css +0 -88
- data/docs/css/markdown.css +0 -108
- data/docs/despegar.html +0 -377
- data/docs/inputs.html +0 -248
- data/docs/intro.html +0 -233
- data/docs/js/docs.js +0 -32
- data/docs/js/rainbow-custom.min.js +0 -13
- data/docs/js/viewer.js +0 -12
- data/docs/list-grids.html +0 -350
- data/docs/mejoras.html +0 -250
- data/docs/navs.html +0 -281
- data/docs/pagination.html +0 -286
- data/docs/popups.html +0 -337
- data/docs/todo.html +0 -204
- data/docs/utils.html +0 -233
data/docs/build/md/todo.md
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
# Todo
|
|
2
|
-
|
|
3
|
-
## Componentes
|
|
4
|
-
* Tabs;
|
|
5
|
-
* Tooltips;
|
|
6
|
-
* Breadcrumbs;
|
|
7
|
-
|
|
8
|
-
## Utilidades
|
|
9
|
-
* Grillas responsivas;
|
|
10
|
-
* Tipografias con pictogramas comunes;
|
|
11
|
-
|
|
12
|
-
## Otros
|
|
13
|
-
* Creación de sprites: Implementar API para poder detectar si un archivo ya existe.
|
|
14
|
-
* Mejoras en la documentación especificando variables por defecto de cada componente y mejor descripción de sus parámetros.
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
-------------------
|
|
2
|
-
|
|
3
|
-
# Utils
|
|
4
|
-
|
|
5
|
-
## Clearfix
|
|
6
|
-
|
|
7
|
-
Basado en http://nicolasgallagher.com/micro-clearfix-hack/.
|
|
8
|
-
|
|
9
|
-
### Sass
|
|
10
|
-
|
|
11
|
-
```css
|
|
12
|
-
@import "picasso/utils/clearfix";
|
|
13
|
-
|
|
14
|
-
//Clearfix
|
|
15
|
-
.container{
|
|
16
|
-
@include clearfix;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## IE
|
|
22
|
-
|
|
23
|
-
### After / Before
|
|
24
|
-
|
|
25
|
-
Soporte de `:after` y `:before` para Internet Explorer 7.
|
|
26
|
-
|
|
27
|
-
Basado en http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/
|
|
28
|
-
|
|
29
|
-
#### Sass
|
|
30
|
-
|
|
31
|
-
```css
|
|
32
|
-
@import "picasso/utils/ie";
|
|
33
|
-
|
|
34
|
-
.my-element {
|
|
35
|
-
@include after;
|
|
36
|
-
@include before;
|
|
37
|
-
|
|
38
|
-
//Para IE quedan disponibles las clases .after y .before
|
|
39
|
-
//para aplicar los mismos estilos como si fueran pseudoselectores
|
|
40
|
-
.ie7 & {
|
|
41
|
-
.after{
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.before{
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
## Sprite
|
|
52
|
-
|
|
53
|
-
Inserta dinámicamente imágenes de un componente específico dentro de un sprite y devuelve la posición vertical en donde se insertó.
|
|
54
|
-
|
|
55
|
-
### Sass
|
|
56
|
-
|
|
57
|
-
```css
|
|
58
|
-
@import "picasso/utils/sprite";
|
|
59
|
-
|
|
60
|
-
$initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);
|
|
61
|
-
|
|
62
|
-
```
|
|
@@ -1,37 +0,0 @@
|
|
|
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><%= @title %></title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
|
|
12
|
-
<header>
|
|
13
|
-
<h1><%= @title %></h1>
|
|
14
|
-
</header>
|
|
15
|
-
|
|
16
|
-
<div role="main">
|
|
17
|
-
|
|
18
|
-
<% for categoryName, manifests of @categories: %>
|
|
19
|
-
<section class="category">
|
|
20
|
-
<h2><%= categoryName %></h2>
|
|
21
|
-
<ul>
|
|
22
|
-
<% for manifest in manifests: %>
|
|
23
|
-
<li><a href="<%= @baseUrl %><%- manifest.slug %>/"><%= manifest.title %></a></li>
|
|
24
|
-
<% end %>
|
|
25
|
-
</ul>
|
|
26
|
-
</section>
|
|
27
|
-
<% end %>
|
|
28
|
-
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<footer>
|
|
32
|
-
|
|
33
|
-
</footer>
|
|
34
|
-
|
|
35
|
-
</body>
|
|
36
|
-
|
|
37
|
-
</html>
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
3
|
-
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
4
|
-
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
5
|
-
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
6
|
-
|
|
7
|
-
<head>
|
|
8
|
-
<meta charset="utf-8">
|
|
9
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
10
|
-
<title><%= @manifest.title %></title>
|
|
11
|
-
<% if @manifest.options.css: %>
|
|
12
|
-
<link type="text/css" rel="stylesheet" href="<%- @manifest.options.css %>">
|
|
13
|
-
<% end %>
|
|
14
|
-
<link type="text/css" rel="stylesheet" href="<%= @baseUrl %>css/markdown.css">
|
|
15
|
-
<link type="text/css" rel="stylesheet" href="<%= @baseUrl %>css/github.css">
|
|
16
|
-
<link type="text/css" rel="stylesheet" href="<%= @baseUrl %>css/style.css">
|
|
17
|
-
</head>
|
|
18
|
-
|
|
19
|
-
<body>
|
|
20
|
-
|
|
21
|
-
<% if not @noHeader: %>
|
|
22
|
-
<header>
|
|
23
|
-
<img src="img/picasso.png" />
|
|
24
|
-
<h1 class="title">Framework CSS/Sass.</h1>
|
|
25
|
-
</header>
|
|
26
|
-
<% end %>
|
|
27
|
-
|
|
28
|
-
<% if not @noToc: %>
|
|
29
|
-
|
|
30
|
-
<hr>
|
|
31
|
-
|
|
32
|
-
<h2>Contenidos</h2>
|
|
33
|
-
|
|
34
|
-
<aside>
|
|
35
|
-
<nav>
|
|
36
|
-
<ol>
|
|
37
|
-
<% for entry in @manifest.tableOfContent: %>
|
|
38
|
-
<li>
|
|
39
|
-
<a href="<%= @baseUrl %><%- entry.slug %>.html#<%= entry.anchor %>"><%= entry.title %></a>
|
|
40
|
-
<% if entry.childs: %>
|
|
41
|
-
<ol>
|
|
42
|
-
<% for child in entry.childs: %>
|
|
43
|
-
<li><a href="<%= @baseUrl %><%- child.slug %>.html#<%= child.anchor %>"><%= child.title %></a></li>
|
|
44
|
-
<% end %>
|
|
45
|
-
</ol>
|
|
46
|
-
<% end %>
|
|
47
|
-
</li>
|
|
48
|
-
<% end %>
|
|
49
|
-
</ol>
|
|
50
|
-
</nav>
|
|
51
|
-
</aside>
|
|
52
|
-
|
|
53
|
-
<% end %>
|
|
54
|
-
|
|
55
|
-
<hr>
|
|
56
|
-
|
|
57
|
-
<%- @content %>
|
|
58
|
-
|
|
59
|
-
<footer>
|
|
60
|
-
</footer>
|
|
61
|
-
|
|
62
|
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
63
|
-
<script src="<%= @baseUrl %>js/docs.js"></script>
|
|
64
|
-
<script src="<%= @baseUrl %>js/rainbow-custom.min.js"></script>
|
|
65
|
-
|
|
66
|
-
</body>
|
|
67
|
-
|
|
68
|
-
</html>
|
data/docs/buttons.html
DELETED
|
@@ -1,357 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
3
|
-
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
4
|
-
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
5
|
-
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
6
|
-
|
|
7
|
-
<head>
|
|
8
|
-
<meta charset="utf-8">
|
|
9
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
10
|
-
<title>Picasso. Framework CSS/Sass.</title>
|
|
11
|
-
|
|
12
|
-
<link type="text/css" rel="stylesheet" href="./css/markdown.css">
|
|
13
|
-
<link type="text/css" rel="stylesheet" href="./css/github.css">
|
|
14
|
-
<link type="text/css" rel="stylesheet" href="./css/style.css">
|
|
15
|
-
</head>
|
|
16
|
-
|
|
17
|
-
<body>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<header>
|
|
21
|
-
<img src="img/picasso.png" />
|
|
22
|
-
<h1 class="title">Framework CSS/Sass.</h1>
|
|
23
|
-
</header>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<hr>
|
|
29
|
-
|
|
30
|
-
<h2>Contenidos</h2>
|
|
31
|
-
|
|
32
|
-
<aside>
|
|
33
|
-
<nav>
|
|
34
|
-
<ol>
|
|
35
|
-
|
|
36
|
-
<li>
|
|
37
|
-
<a href="./intro.html#introduccioacuten">Introducci&oacute;n</a>
|
|
38
|
-
|
|
39
|
-
<ol>
|
|
40
|
-
|
|
41
|
-
<li><a href="./intro.html#repositorio">Repositorio</a></li>
|
|
42
|
-
|
|
43
|
-
<li><a href="./intro.html#instalacioacuten">Instalaci&oacute;n</a></li>
|
|
44
|
-
|
|
45
|
-
<li><a href="./intro.html#actualizacioacuten">Actualizaci&oacute;n</a></li>
|
|
46
|
-
|
|
47
|
-
<li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&oacute;n de oily_png</a></li>
|
|
48
|
-
|
|
49
|
-
</ol>
|
|
50
|
-
|
|
51
|
-
</li>
|
|
52
|
-
|
|
53
|
-
<li>
|
|
54
|
-
<a href="./changelog.html#changelog">Changelog</a>
|
|
55
|
-
|
|
56
|
-
<ol>
|
|
57
|
-
|
|
58
|
-
<li><a href="./changelog.html#023">0.2.3</a></li>
|
|
59
|
-
|
|
60
|
-
<li><a href="./changelog.html#022">0.2.2</a></li>
|
|
61
|
-
|
|
62
|
-
<li><a href="./changelog.html#021">0.2.1</a></li>
|
|
63
|
-
|
|
64
|
-
<li><a href="./changelog.html#020">0.2.0</a></li>
|
|
65
|
-
|
|
66
|
-
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
67
|
-
|
|
68
|
-
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
69
|
-
|
|
70
|
-
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
71
|
-
|
|
72
|
-
<li><a href="./changelog.html#001">0.0.1</a></li>
|
|
73
|
-
|
|
74
|
-
</ol>
|
|
75
|
-
|
|
76
|
-
</li>
|
|
77
|
-
|
|
78
|
-
<li>
|
|
79
|
-
<a href="./todo.html#todo">Todo</a>
|
|
80
|
-
|
|
81
|
-
<ol>
|
|
82
|
-
|
|
83
|
-
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
84
|
-
|
|
85
|
-
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
86
|
-
|
|
87
|
-
<li><a href="./todo.html#otros">Otros</a></li>
|
|
88
|
-
|
|
89
|
-
</ol>
|
|
90
|
-
|
|
91
|
-
</li>
|
|
92
|
-
|
|
93
|
-
<li>
|
|
94
|
-
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
95
|
-
|
|
96
|
-
<ol>
|
|
97
|
-
|
|
98
|
-
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
99
|
-
|
|
100
|
-
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
101
|
-
|
|
102
|
-
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
103
|
-
|
|
104
|
-
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
105
|
-
|
|
106
|
-
</ol>
|
|
107
|
-
|
|
108
|
-
</li>
|
|
109
|
-
|
|
110
|
-
<li>
|
|
111
|
-
<a href="./components.html#components">Components</a>
|
|
112
|
-
|
|
113
|
-
<ol>
|
|
114
|
-
|
|
115
|
-
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
116
|
-
|
|
117
|
-
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
118
|
-
|
|
119
|
-
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
120
|
-
|
|
121
|
-
<li><a href="./navs.html#navs">Navs</a></li>
|
|
122
|
-
|
|
123
|
-
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
124
|
-
|
|
125
|
-
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
126
|
-
|
|
127
|
-
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
128
|
-
|
|
129
|
-
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
130
|
-
|
|
131
|
-
<li><a href="./popups.html#popups">Popups</a></li>
|
|
132
|
-
|
|
133
|
-
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
134
|
-
|
|
135
|
-
</ol>
|
|
136
|
-
|
|
137
|
-
</li>
|
|
138
|
-
|
|
139
|
-
<li>
|
|
140
|
-
<a href="./utils.html#utils">Utils</a>
|
|
141
|
-
|
|
142
|
-
<ol>
|
|
143
|
-
|
|
144
|
-
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
145
|
-
|
|
146
|
-
<li><a href="./utils.html#ie">IE</a></li>
|
|
147
|
-
|
|
148
|
-
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
149
|
-
|
|
150
|
-
</ol>
|
|
151
|
-
|
|
152
|
-
</li>
|
|
153
|
-
|
|
154
|
-
<li>
|
|
155
|
-
<a href="./despegar.html#despegar">Despegar</a>
|
|
156
|
-
|
|
157
|
-
<ol>
|
|
158
|
-
|
|
159
|
-
<li><a href="./despegar.html#variables">Variables</a></li>
|
|
160
|
-
|
|
161
|
-
</ol>
|
|
162
|
-
|
|
163
|
-
</li>
|
|
164
|
-
|
|
165
|
-
</ol>
|
|
166
|
-
</nav>
|
|
167
|
-
</aside>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
<hr>
|
|
172
|
-
|
|
173
|
-
<article>
|
|
174
|
-
<a name="buttons"></a><h2>Buttons</h2>
|
|
175
|
-
<p>Disponibles en 3 versiones: 3D, Glossy y Mini.
|
|
176
|
-
|
|
177
|
-
</p>
|
|
178
|
-
<a name="sass"></a><a name="sass"></a><a name="sass"></a><h4>Sass</h4>
|
|
179
|
-
<p>Importación:
|
|
180
|
-
|
|
181
|
-
</p>
|
|
182
|
-
<pre><code class="lang-css">@import "picasso/components/buttons";</code></pre>
|
|
183
|
-
<a name="3d-buttons"></a><h3>3D Buttons</h3>
|
|
184
|
-
<a name="ejemplos"></a><a name="ejemplos"></a><a name="ejemplos"></a><h4>Ejemplos</h4>
|
|
185
|
-
<a name="normales"></a><h5>Normales</h5>
|
|
186
|
-
<p><a class="button-3d-demo-1">
|
|
187
|
-
<span>Comprar</span>
|
|
188
|
-
</a>
|
|
189
|
-
<a class="button-3d-demo-2">
|
|
190
|
-
<span>Buscar</span>
|
|
191
|
-
</a>
|
|
192
|
-
<a class="button-3d-demo-3">
|
|
193
|
-
<span>Reservar</span>
|
|
194
|
-
</a>
|
|
195
|
-
|
|
196
|
-
</p>
|
|
197
|
-
<a name="desactivados"></a><h5>Desactivados</h5>
|
|
198
|
-
<p><a class="button-3d-demo-1 disabled">
|
|
199
|
-
<span>Comprar</span>
|
|
200
|
-
</a>
|
|
201
|
-
<a class="button-3d-demo-2 disabled">
|
|
202
|
-
<span>Buscar</span>
|
|
203
|
-
</a>
|
|
204
|
-
<a class="button-3d-demo-3 disabled">
|
|
205
|
-
<span>Reservar</span>
|
|
206
|
-
</a>
|
|
207
|
-
|
|
208
|
-
</p>
|
|
209
|
-
<a name="variante-ancho-100"></a><h5>Variante: ancho 100%</h5>
|
|
210
|
-
<p><a class="button-3d-demo-4">
|
|
211
|
-
<span>Botón full-width</span>
|
|
212
|
-
</a>
|
|
213
|
-
|
|
214
|
-
</p>
|
|
215
|
-
<a name="variante-bordes-redondeados-100"></a><h5>Variante: bordes redondeados 100%</h5>
|
|
216
|
-
<p><a class="button-3d-demo-5">
|
|
217
|
-
<span>Botón redondeado</span>
|
|
218
|
-
</a>
|
|
219
|
-
<a class="button-3d-demo-5 disabled">
|
|
220
|
-
<span>Botón redondeado disabled</span>
|
|
221
|
-
</a>
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
</p>
|
|
225
|
-
<a name="html"></a><a name="html"></a><a name="html"></a><h4>HTML</h4>
|
|
226
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
227
|
-
<span>Comprar</span>
|
|
228
|
-
</a>
|
|
229
|
-
|
|
230
|
-
<a class="button disabled" href="#">
|
|
231
|
-
<span>Agotado</span>
|
|
232
|
-
</a></code></pre>
|
|
233
|
-
<h4>Sass</h4>
|
|
234
|
-
<p>Mixin con los parámetros por defecto:
|
|
235
|
-
|
|
236
|
-
</p>
|
|
237
|
-
<pre><code class="lang-css">.button{
|
|
238
|
-
@include button-3d();
|
|
239
|
-
}</code></pre>
|
|
240
|
-
<p>Mixin con parámetros personalizados. Disponibles: background, color, font-size, full-width y rounded:
|
|
241
|
-
|
|
242
|
-
</p>
|
|
243
|
-
<pre><code class="lang-css">.button{
|
|
244
|
-
@include button-3d(red, white, 24px, true, true);
|
|
245
|
-
}</code></pre>
|
|
246
|
-
<a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h4>Fallback para IE</h4>
|
|
247
|
-
<p>La estrategia de los botones es siempre graceful degradation.
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
</p>
|
|
252
|
-
<a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
|
|
253
|
-
<h4>Ejemplos</h4>
|
|
254
|
-
<p><a class="button-glossy-demo-1">
|
|
255
|
-
<span>Comprar</span>
|
|
256
|
-
</a>
|
|
257
|
-
<a class="button-glossy-demo-2">
|
|
258
|
-
<span>Buscar</span>
|
|
259
|
-
</a>
|
|
260
|
-
<a class="button-glossy-demo-3">
|
|
261
|
-
<span>Reservar</span>
|
|
262
|
-
</a>
|
|
263
|
-
<a class="button-glossy-demo-4">
|
|
264
|
-
<span>Un texto demasiado largo para este botón</span>
|
|
265
|
-
</a>
|
|
266
|
-
|
|
267
|
-
</p>
|
|
268
|
-
<h4>HTML</h4>
|
|
269
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
270
|
-
<span>Comprar</span>
|
|
271
|
-
</a></code></pre>
|
|
272
|
-
<p>Mixin con los parámetros por defecto:
|
|
273
|
-
|
|
274
|
-
</p>
|
|
275
|
-
<pre><code class="lang-css">.button{
|
|
276
|
-
@include button-glossy();
|
|
277
|
-
}</code></pre>
|
|
278
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background y color:
|
|
279
|
-
|
|
280
|
-
</p>
|
|
281
|
-
<pre><code class="lang-css">.button{
|
|
282
|
-
@include button-glossy(100px, 30px, red, white);
|
|
283
|
-
}</code></pre>
|
|
284
|
-
<h4>Fallback para IE</h4>
|
|
285
|
-
<p>Variable y valor por defecto:
|
|
286
|
-
|
|
287
|
-
</p>
|
|
288
|
-
<pre><code class="lang-css">$button-glossy-ie-fallback: "sprites";</code></pre>
|
|
289
|
-
<p>Estrategias soportadas:
|
|
290
|
-
|
|
291
|
-
</p>
|
|
292
|
-
<ul>
|
|
293
|
-
<li><code>sprites</code></li>
|
|
294
|
-
<li><code>GD</code></li>
|
|
295
|
-
</ul>
|
|
296
|
-
<a name="mini-buttons"></a><h3>Mini Buttons</h3>
|
|
297
|
-
<p>Perfectos para acciones simples en la interfaz.
|
|
298
|
-
|
|
299
|
-
</p>
|
|
300
|
-
<h4>Ejemplos</h4>
|
|
301
|
-
<p><a class="button-mini-demo-1">
|
|
302
|
-
<span>Limpiar</span>
|
|
303
|
-
</a>
|
|
304
|
-
<a class="button-mini-demo-2">
|
|
305
|
-
<span>Abrir</span>
|
|
306
|
-
</a>
|
|
307
|
-
<a class="button-mini-demo-3">
|
|
308
|
-
<span>Descargar</span>
|
|
309
|
-
</a>
|
|
310
|
-
<a class="button-mini-demo-4">
|
|
311
|
-
<span>Ir</span>
|
|
312
|
-
</a>
|
|
313
|
-
|
|
314
|
-
</p>
|
|
315
|
-
<h4>HTML</h4>
|
|
316
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
317
|
-
<span>Limpiar</span>
|
|
318
|
-
</a></code></pre>
|
|
319
|
-
<h4>Sass</h4>
|
|
320
|
-
<p>Mixin con los parámetros por defecto:
|
|
321
|
-
|
|
322
|
-
</p>
|
|
323
|
-
<pre><code class="lang-css">.button{
|
|
324
|
-
@include button-mini();
|
|
325
|
-
}</code></pre>
|
|
326
|
-
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
327
|
-
|
|
328
|
-
</p>
|
|
329
|
-
<pre><code class="lang-css">.button{
|
|
330
|
-
@include button-mini(grey, blue);
|
|
331
|
-
}</code></pre>
|
|
332
|
-
<h4>Fallback para IE</h4>
|
|
333
|
-
<p>Variable y valor por defecto:
|
|
334
|
-
|
|
335
|
-
</p>
|
|
336
|
-
<pre><code class="lang-css">$button-mini-ie-fallback: "sprites";</code></pre>
|
|
337
|
-
<p>Estrategias soportadas:
|
|
338
|
-
|
|
339
|
-
</p>
|
|
340
|
-
<ul>
|
|
341
|
-
<li><code>sprites</code></li>
|
|
342
|
-
<li><code>GD</code></li>
|
|
343
|
-
</ul>
|
|
344
|
-
|
|
345
|
-
</article>
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<footer>
|
|
349
|
-
</footer>
|
|
350
|
-
|
|
351
|
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
352
|
-
<script src="./js/docs.js"></script>
|
|
353
|
-
<script src="./js/rainbow-custom.min.js"></script>
|
|
354
|
-
|
|
355
|
-
</body>
|
|
356
|
-
|
|
357
|
-
</html>
|