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/sass/style.scss
CHANGED
|
@@ -42,6 +42,66 @@ body{
|
|
|
42
42
|
@include mini-button(#414141, white);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
+
// inputs
|
|
46
|
+
.text-input-demo-1 {
|
|
47
|
+
@include input();
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.text-input-demo-2 {
|
|
51
|
+
@include input(120px, 20px, red, green, 10px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.text-input-demo-3 {
|
|
55
|
+
@include input(200px, 40px, #DDD, blue, 3px, blue, 25px);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.select-demo-1 {
|
|
59
|
+
@include input();
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.select-demo-2 {
|
|
63
|
+
@include input(120px, 20px, red, green, 10px);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.select-demo-3 {
|
|
67
|
+
@include input(200px, 40px, #DDD, blue, 3px, blue, 25px);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//Nav
|
|
71
|
+
.nav-demo-1{
|
|
72
|
+
@include nav();
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.nav-demo-2{
|
|
76
|
+
@include nav(435px, 30px, #1164BF, #083C78, black, right);
|
|
77
|
+
|
|
78
|
+
a, a:hover{
|
|
79
|
+
color: white;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
//List grid
|
|
85
|
+
.list-grid-demo-1 {
|
|
86
|
+
@include list-grid();
|
|
87
|
+
|
|
88
|
+
.first-column {
|
|
89
|
+
width: 100px;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.list-grid-demo-2 {
|
|
94
|
+
@include list-grid(400px, 30px, transparent, white, white);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.list-grid-demo-3 {
|
|
98
|
+
@include list-grid(130px, 40px, #999999, white, #319fda);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.list-grid-demo-4 {
|
|
102
|
+
@include list-grid(130px, 15px, black, #CCCCCC, #EEEEEE, #ff0000);
|
|
103
|
+
}
|
|
104
|
+
|
|
45
105
|
//Arrows
|
|
46
106
|
.arrow-demo-1{
|
|
47
107
|
@include arrow();
|
|
@@ -59,6 +119,14 @@ body{
|
|
|
59
119
|
@include arrow(#468847, white);
|
|
60
120
|
}
|
|
61
121
|
|
|
122
|
+
//Pagination
|
|
123
|
+
.pagination-demo-1{
|
|
124
|
+
@include pagination();
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.pagination-demo-2{
|
|
128
|
+
@include pagination(black, blue, white, red, 10px, yellow, green);
|
|
129
|
+
}
|
|
62
130
|
|
|
63
131
|
//Bubbles
|
|
64
132
|
.bubble-demo-1{
|
|
@@ -73,6 +141,51 @@ body{
|
|
|
73
141
|
margin: 20px 0;
|
|
74
142
|
}
|
|
75
143
|
|
|
144
|
+
// Popups
|
|
145
|
+
.popup-demo-1, .popup-demo-2, .popup-demo-3, .popup-demo-4 {
|
|
146
|
+
@include popup();
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.popup-demo-5 {
|
|
150
|
+
@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgb(1, 61, 147), 0.7, red, black, rgba(1, 61, 147, 0.7), white);
|
|
151
|
+
|
|
152
|
+
.popup-bottom-arrow {
|
|
153
|
+
&:after {
|
|
154
|
+
left: 132px
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.popup-demo-6 {
|
|
160
|
+
@include popup(white, 20px, rgba(0, 0, 0, 0.5) 10px -10px 10px, rgb(68, 137, 81), 0.7, rgba(68, 137, 81, 0.7));
|
|
161
|
+
|
|
162
|
+
.popup-bottom-arrow {
|
|
163
|
+
&:after {
|
|
164
|
+
left: 132px
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.popup-demo-container {
|
|
170
|
+
float: left;
|
|
171
|
+
width: 330px;
|
|
172
|
+
height: 180px;
|
|
173
|
+
positon: relative;
|
|
174
|
+
|
|
175
|
+
.ie8 &, .ie7 & {
|
|
176
|
+
width: 240px;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
//Accordions
|
|
181
|
+
.accordion-demo-1{
|
|
182
|
+
@include accordion();
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.accordion-demo-2{
|
|
186
|
+
@include accordion(40px, #CCCCCC, #000000);
|
|
187
|
+
width: 300px;
|
|
188
|
+
}
|
|
76
189
|
|
|
77
190
|
//Despegar
|
|
78
191
|
|
data/docs/todo.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,7 +163,21 @@
|
|
|
131
163
|
|
|
132
164
|
<article>
|
|
133
165
|
<a name="todo"></a><h1>Todo</h1>
|
|
134
|
-
<
|
|
166
|
+
<a name="componentes"></a><h2>Componentes</h2>
|
|
167
|
+
<ul>
|
|
168
|
+
<li>Tabs;</li>
|
|
169
|
+
<li>Tooltips;</li>
|
|
170
|
+
<li>Breadcrumbs;</li>
|
|
171
|
+
</ul>
|
|
172
|
+
<a name="utilidades"></a><h2>Utilidades</h2>
|
|
173
|
+
<ul>
|
|
174
|
+
<li>Grillas responsivas;</li>
|
|
175
|
+
<li>Tipografias con pictogramas comunes;</li>
|
|
176
|
+
</ul>
|
|
177
|
+
<a name="otros"></a><h2>Otros</h2>
|
|
178
|
+
<ul>
|
|
179
|
+
<li>Creación de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de imágenes especificado en el config.rb.</li>
|
|
180
|
+
</ul>
|
|
135
181
|
|
|
136
182
|
</article>
|
|
137
183
|
|
data/docs/utils.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>
|
|
@@ -136,13 +168,46 @@
|
|
|
136
168
|
<p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
|
|
137
169
|
|
|
138
170
|
</p>
|
|
139
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
171
|
+
<a name="sass"></a><a name="sass"></a><h3>Sass</h3>
|
|
140
172
|
<pre><code class="lang-css">@import "picasso/utils/clearfix";
|
|
141
173
|
|
|
142
174
|
//Clearfix
|
|
143
175
|
.container{
|
|
144
176
|
@include clearfix;
|
|
145
177
|
}</code></pre>
|
|
178
|
+
<a name="ie"></a><h2>IE</h2>
|
|
179
|
+
<a name="after-before"></a><h3>After / Before</h3>
|
|
180
|
+
<p>Soporte de <code>:after</code> y <code>:before</code> para Internet Explorer 7.
|
|
181
|
+
|
|
182
|
+
</p>
|
|
183
|
+
<p>Basado en <a href="http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/">http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/</a>
|
|
184
|
+
|
|
185
|
+
</p>
|
|
186
|
+
<a name="sass"></a><h4>Sass</h4>
|
|
187
|
+
<pre><code class="lang-css">@import "picasso/utils/ie";
|
|
188
|
+
|
|
189
|
+
.my-element {
|
|
190
|
+
@include after;
|
|
191
|
+
@include before;
|
|
192
|
+
|
|
193
|
+
//Para IE quedan disponibles las clases .after y .before
|
|
194
|
+
//para aplicar los mismos estilos como si fueran pseudoselectores
|
|
195
|
+
.ie7 & {
|
|
196
|
+
.after{
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.before{
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}</code></pre>
|
|
203
|
+
<a name="sprite"></a><h2>Sprite</h2>
|
|
204
|
+
<p>Inserta dinámicamente imágenes de un componente específico dentro de un sprite y devuelve la posición vertical en donde se insertó.
|
|
205
|
+
|
|
206
|
+
</p>
|
|
207
|
+
<h3>Sass</h3>
|
|
208
|
+
<pre><code class="lang-css">@import "picasso/utils/sprite";
|
|
209
|
+
|
|
210
|
+
$initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);</code></pre>
|
|
146
211
|
|
|
147
212
|
</article>
|
|
148
213
|
|
data/lib/picasso/version.rb
CHANGED
data/picasso.gemspec
CHANGED
|
@@ -17,4 +17,6 @@ Gem::Specification.new do |gem|
|
|
|
17
17
|
gem.post_install_message = "\n\n##################################################\n## Picasso - Sass/Compass Framework\n\n## Versión: " + Picasso::VERSION + "\n## Documentación: http://dl.dropbox.com/u/54126/picasso/docs/all.html\n## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/changelog.html#changelog\n##################################################\n\n"
|
|
18
18
|
|
|
19
19
|
gem.add_dependency("compass", [">= 0.12.1"])
|
|
20
|
+
gem.add_dependency("compass-magick", [">= 0.1.6"])
|
|
21
|
+
gem.add_dependency("oily_png", [">= 1.0.2"])
|
|
20
22
|
end
|
|
@@ -1,3 +1,9 @@
|
|
|
1
1
|
@import "components/buttons";
|
|
2
|
+
@import "components/inputs";
|
|
3
|
+
@import "components/list-grids";
|
|
2
4
|
@import "components/arrows";
|
|
3
|
-
@import "components/
|
|
5
|
+
@import "components/pagination";
|
|
6
|
+
@import "components/bubbles";
|
|
7
|
+
@import "components/popups";
|
|
8
|
+
@import "components/accordions";
|
|
9
|
+
@import "components/navs";
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Accordions
|
|
3
|
+
//
|
|
4
|
+
$accordion-default-height: 20px;
|
|
5
|
+
$accordion-default-background-color: #013D93;
|
|
6
|
+
$accordion-default-text-color: #FFFFFF;
|
|
7
|
+
|
|
8
|
+
$arrow-height: 8px;
|
|
9
|
+
$arrow-width: 5px;
|
|
10
|
+
|
|
11
|
+
@mixin accordion(
|
|
12
|
+
$height: $accordion-default-height,
|
|
13
|
+
$background-color: $accordion-default-background-color,
|
|
14
|
+
$text-color: $accordion-default-text-color
|
|
15
|
+
) {
|
|
16
|
+
|
|
17
|
+
@include accordion-layout($height);
|
|
18
|
+
@include accordion-visual($background-color, $text-color);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@mixin accordion-visual(
|
|
22
|
+
$background-color: $accordion-default-background-color,
|
|
23
|
+
$text-color: $accordion-default-text-color
|
|
24
|
+
) {
|
|
25
|
+
|
|
26
|
+
.accordion-header {
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
background: $background-color;
|
|
29
|
+
border-bottom: 1px solid white;
|
|
30
|
+
|
|
31
|
+
h4 {
|
|
32
|
+
color: $text-color;
|
|
33
|
+
font-size: 13px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.accordion-header-open {
|
|
39
|
+
.arrow {
|
|
40
|
+
border-left: $arrow-width solid transparent;
|
|
41
|
+
border-right: $arrow-width solid transparent;
|
|
42
|
+
border-top: $arrow-height solid $text-color;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.accordion-header-close {
|
|
47
|
+
.arrow {
|
|
48
|
+
border-left: $arrow-height solid $text-color;
|
|
49
|
+
border-bottom: $arrow-width solid transparent;
|
|
50
|
+
border-top: $arrow-width solid transparent;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.accordion-content {
|
|
55
|
+
border: 1px solid #CCCCCC;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin accordion-layout($height: $accordion-default-height) {
|
|
61
|
+
.accordion-header {
|
|
62
|
+
position: relative;
|
|
63
|
+
height: $height;
|
|
64
|
+
padding: 0 10px;
|
|
65
|
+
display: block;
|
|
66
|
+
|
|
67
|
+
h4 {
|
|
68
|
+
line-height: $height;
|
|
69
|
+
margin: 0px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.arrow {
|
|
73
|
+
height: 0;
|
|
74
|
+
position: absolute;
|
|
75
|
+
right: 10px;
|
|
76
|
+
width: 0;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.accordion-header-open {
|
|
81
|
+
.arrow {
|
|
82
|
+
top: ($height - $arrow-width) / 2;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.accordion-header-close {
|
|
87
|
+
.arrow {
|
|
88
|
+
top: ($height - $arrow-height) / 2;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.accordion-content {
|
|
93
|
+
position: relative;
|
|
94
|
+
top: -1px;
|
|
95
|
+
}
|
|
96
|
+
}
|