zurb-foundation 2.0.1 → 2.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. data/README.markdown +51 -13
  2. data/lib/foundation/generators/layout_generator.rb +10 -1
  3. data/lib/foundation/generators/templates/application.html.erb +1 -1
  4. data/lib/foundation/generators/templates/application.html.haml +30 -0
  5. data/lib/foundation/generators/templates/application.html.slim +30 -0
  6. data/lib/foundation/version.rb +1 -1
  7. data/{app → vendor}/assets/images/foundation/misc/button-gloss.png +0 -0
  8. data/{app → vendor}/assets/images/foundation/misc/button-overlay.png +0 -0
  9. data/{app → vendor}/assets/images/foundation/misc/custom-form-sprites.png +0 -0
  10. data/{app → vendor}/assets/images/foundation/misc/input-bg.png +0 -0
  11. data/{app → vendor}/assets/images/foundation/misc/modal-gloss.png +0 -0
  12. data/{app → vendor}/assets/images/foundation/misc/table-sorter.png +0 -0
  13. data/{app → vendor}/assets/images/foundation/orbit/bullets.jpg +0 -0
  14. data/{app → vendor}/assets/images/foundation/orbit/left-arrow.png +0 -0
  15. data/{app → vendor}/assets/images/foundation/orbit/loading.gif +0 -0
  16. data/{app → vendor}/assets/images/foundation/orbit/mask-black.png +0 -0
  17. data/{app → vendor}/assets/images/foundation/orbit/pause-black.png +0 -0
  18. data/{app → vendor}/assets/images/foundation/orbit/right-arrow.png +0 -0
  19. data/{app → vendor}/assets/images/foundation/orbit/rotator-black.png +0 -0
  20. data/{app → vendor}/assets/images/foundation/orbit/timer-black.png +0 -0
  21. data/{app/assets/javascripts/foundation/jquery.orbit-1.3.0.js → vendor/assets/javascripts/foundation.js} +354 -1
  22. data/vendor/assets/stylesheets/foundation.scss +1072 -0
  23. metadata +26 -36
  24. data/app/assets/javascripts/foundation/app.js +0 -43
  25. data/app/assets/javascripts/foundation/forms.jquery.js +0 -58
  26. data/app/assets/javascripts/foundation/index.js +0 -6
  27. data/app/assets/javascripts/foundation/jquery.customforms.js +0 -162
  28. data/app/assets/javascripts/foundation/jquery.placeholder.min.js.erb +0 -2
  29. data/app/assets/javascripts/foundation/jquery.reveal.js +0 -150
  30. data/app/assets/stylesheets/foundation/forms.css.scss.erb +0 -83
  31. data/app/assets/stylesheets/foundation/globals.css.scss.erb +0 -301
  32. data/app/assets/stylesheets/foundation/index.css +0 -8
  33. data/app/assets/stylesheets/foundation/mobile.css.scss.erb +0 -112
  34. data/app/assets/stylesheets/foundation/orbit.css.scss.erb +0 -210
  35. data/app/assets/stylesheets/foundation/reveal.css.scss.erb +0 -91
  36. data/app/assets/stylesheets/foundation/ui.css.scss.erb +0 -212
@@ -1,83 +0,0 @@
1
- /* Artfully masterminded by ZURB
2
-
3
- Make sure to include the app.js if you are going to use inline label inputs
4
- */
5
-
6
-
7
- /* -----------------------------------------
8
- Standard Forms
9
- ----------------------------------------- */
10
-
11
- form { margin: 0 0 18px; }
12
- form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; }
13
-
14
- input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
15
- input.input-text, textarea, select { display: block; margin-bottom: 9px; }
16
- label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }
17
-
18
- /* Text input and textarea font and padding */
19
- input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
20
- input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
21
- input.input-text:focus, textarea:focus { background: #f9f9f9; }
22
-
23
- /* Inlined Label Style */
24
- input.placeholder, textarea.placeholder { color: #888; }
25
-
26
- /* Text input and textarea sizes */
27
- input.input-text, textarea { width: 254px; }
28
- input.small, textarea.small { width: 134px; }
29
- input.medium, textarea.medium { width: 254px; }
30
- input.large, textarea.large { width: 434px; }
31
-
32
- /* Fieldsets */
33
- form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; }
34
-
35
- /* Errors */
36
- input.input-text.red { border-color: red; background-color: rgba(255,0,0,0.15); }
37
- label.red { color: red; }
38
- small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }
39
-
40
- .small + .error { width: 140px; }
41
- .medium + .error { width: 260px; }
42
- .large + .error { width: 440px; }
43
-
44
- /* -----------------------------------------
45
- Nicer Forms
46
- ----------------------------------------- */
47
- form.nice input.input-text, form.nice textarea { border: solid 1px #bbb; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
48
- form.nice input.input-text, form.nice textarea { font-size: 13px; padding: 6px 3px 4px; outline: none !important; background: url(<%= asset_path "foundation/misc/input-bg.png" %>) #fff; }
49
- form.nice input.input-text:focus, form.nice textarea:focus { background-color: #f9f9f9; }
50
-
51
- form.nice fieldset { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
52
-
53
- form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }
54
-
55
- form.nice .small + .error { width: 132px; }
56
- form.nice .medium + .error { width: 252px; }
57
- form.nice .large + .error { width: 432px; }
58
-
59
- /* -----------------------------------------
60
- Custom Forms
61
- ----------------------------------------- */
62
-
63
- form.custom span.custom { display: inline-block; width: 14px; height: 14px; position: relative; top: 2px; border: solid 1px #ccc; background: url(<%= asset_path "foundation/misc/custom-form-sprites.png" %>) 0 0 no-repeat; }
64
- form.custom span.custom.radio { border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; }
65
- form.custom span.custom.radio.checked { background-position: 0px -14px; }
66
- form.custom span.custom.checkbox.checked { background-position: 0px -28px; }
67
-
68
- form.custom div.custom.dropdown { position: relative; display: inline-block; width: auto; height: 28px; margin-bottom: 9px; }
69
- form.custom div.custom.dropdown a.current { display: block; width: auto; line-height: 26px; padding: 0 38px 0 6px; border: solid 1px #ddd; color: #141414; }
70
- form.custom div.custom.dropdown a.selector { position: absolute; width: 26px; height: 26px; display: block; background: url(<%= asset_path "foundation/misc/custom-form-sprites.png" %>) -14px 0 no-repeat; right: 0px; top: 0px; border: solid 1px #ddd; }
71
- form.custom div.custom.dropdown:hover a.selector,
72
- form.custom div.custom.dropdown.open a.selector { background-position: -14px -26px; }
73
-
74
- form.custom div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; left: 0px; top: 27px; margin: 0; padding: 0; background: rgba(255,255,255,0.9); border: solid 1px #ddd; z-index: 10; }
75
- form.custom div.custom.dropdown ul li { cursor: pointer; padding: 3px 38px 3px 6px; margin: 0; }
76
- form.custom div.custom.dropdown ul li.selected { background: url(<%= asset_path "foundation/misc/custom-form-sprites.png" %>) right -52px no-repeat; }
77
- form.custom div.custom.dropdown ul li:hover { background-color: #2a85e8; color: #fff; }
78
- form.custom div.custom.dropdown ul li.selected:hover { background: url(<%= asset_path "foundation/misc/custom-form-sprites.png" %>) #2a85e8 right -78px no-repeat; }
79
- form.custom div.custom.dropdown ul.show { display: block; }
80
-
81
- form.custom div.custom.dropdown.open ul { display: block; }
82
-
83
-
@@ -1,301 +0,0 @@
1
- /* Arfully Masterminded by ZURB */
2
-
3
- /* --------------------------------------------------
4
- Table of Contents
5
- -----------------------------------------------------
6
- :: Reset & Standards
7
- :: Typography
8
- :: Links
9
- :: Lists
10
- :: Mobile-Friendly Grid
11
- :: Tables
12
- :: Misc
13
- :: Block Grids
14
- */
15
-
16
-
17
- /* --------------------------------------------------
18
- :: Global Reset & Standards
19
- -------------------------------------------------- */
20
-
21
- /*
22
- Eric Meyer's CSS Reset
23
- http://meyerweb.com/eric/tools/css/reset/
24
- v2.0 | 20110126
25
- License: none (public domain)
26
- */
27
-
28
- html, body, div, span, applet, object, iframe,
29
- h1, h2, h3, h4, h5, h6, p, blockquote, pre,
30
- a, abbr, acronym, address, big, cite, code,
31
- del, dfn, em, img, ins, kbd, q, s, samp,
32
- small, strike, strong, sub, sup, tt, var,
33
- b, u, i, center,
34
- dl, dt, dd, ol, ul, li,
35
- fieldset, form, label, legend,
36
- table, caption, tbody, tfoot, thead, tr, th, td,
37
- article, aside, canvas, details, embed,
38
- figure, figcaption, footer, header, hgroup,
39
- menu, nav, output, ruby, section, summary,
40
- time, mark, audio, video {
41
- margin: 0;
42
- padding: 0;
43
- border: 0;
44
- font: inherit;
45
- vertical-align: baseline;
46
- }
47
- html {
48
- font-size: 62.5%;
49
- }
50
- /* HTML5 display-role reset for older browsers */
51
- article, aside, details, figcaption, figure,
52
- footer, header, hgroup, menu, nav, section {
53
- display: block;
54
- }
55
- body {
56
- line-height: 1;
57
- }
58
- ol, ul {
59
- list-style: none;
60
- }
61
- blockquote, q {
62
- quotes: none;
63
- }
64
- blockquote:before, blockquote:after,
65
- q:before, q:after {
66
- content: '';
67
- content: none;
68
- }
69
- table {
70
- border-collapse: collapse;
71
- border-spacing: 0;
72
- }
73
-
74
-
75
-
76
- body { background: #fff; font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif; font-size: 13px; line-height: 18px; color: #555; position: relative; -webkit-font-smoothing: antialiased; }
77
-
78
-
79
- /* --------------------------------------------------
80
- :: Typography
81
- -------------------------------------------------- */
82
- h1, h2, h3, h4, h5, h6 { color: #181818; font-weight: bold; line-height: 1.25 }
83
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
84
- h1 { font-size: 46px; font-size: 4.6rem; margin-bottom: 12px;}
85
- h2 { font-size: 35px; font-size: 3.5rem; margin-bottom: 9px; }
86
- h3 { font-size: 28px; font-size: 2.8rem; margin-bottom: 9px; }
87
- h4 { font-size: 21px; font-size: 2.1rem; margin-bottom: 3px; }
88
- h5 { font-size: 18px; font-size: 1.8rem; font-weight: normal; margin-bottom: 3px; }
89
- h6 { font-size: 15px; font-size: 1.5rem; font-weight: normal; }
90
-
91
- .subheader { color: #777; font-weight: 300; margin-bottom: 24px; }
92
-
93
- p { line-height: 17px; margin: 0 0 18px; }
94
- p img { margin: 0; }
95
- p.lead { font-size: 18px; font-size: 1.8rem; line-height: 24px; }
96
-
97
- /* Mobile */
98
-
99
- @media handheld, only screen and (max-width: 767px) {
100
- body, p { font-size: 15px; font-size: 1.5rem; line-height: 1.4; }
101
- }
102
-
103
- em { font-style: italic; line-height: inherit; }
104
- strong { font-weight: bold; line-height: inherit; }
105
- small { font-size: 60%; line-height: inherit; }
106
-
107
- h1 small, h2 small, h3 small, h4 small, h5 small { color: #777; }
108
-
109
- /* Blockquotes */
110
- blockquote, blockquote p { line-height: 20px; color: #777; }
111
- blockquote { margin: 0 0 18px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
112
- blockquote cite { display: block; font-size: 12px; font-size: 1.2rem; color: #555; }
113
- blockquote cite:before { content: "\2014 \0020"; }
114
- blockquote cite a, blockquote cite a:visited { color: #555; }
115
-
116
- hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }
117
-
118
- abbr, acronym { text-transform: uppercase; font-size: 90%; color: #222; border-bottom: 1px solid #ddd; cursor: help; }
119
- abbr { text-transform: none; }
120
-
121
- /**
122
- * Print styles.
123
- *
124
- * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
125
- * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
126
- */
127
- @media print {
128
- * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
129
- -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
130
- p a, p a:visited { color: #444 !important; text-decoration: underline; }
131
- p a[href]:after { content: " (" attr(href) ")"; }
132
- abbr[title]:after { content: " (" attr(title) ")"; }
133
- .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
134
- pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
135
- thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
136
- tr, img { page-break-inside: avoid; }
137
- @page { margin: 0.5cm; }
138
- p, h2, h3 { orphans: 3; widows: 3; }
139
- h2, h3{ page-break-after: avoid; }
140
- }
141
-
142
-
143
- /* --------------------------------------------------
144
- :: Links
145
- -------------------------------------------------- */
146
- a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; }
147
- a:hover { color: #11639d; }
148
- p a, p a:visited { line-height: inherit; }
149
-
150
-
151
- /* --------------------------------------------------
152
- :: Lists
153
- -------------------------------------------------- */
154
- ul, ol { margin-bottom: 18px; }
155
- ul { list-style: none outside; }
156
- ol { list-style: decimal; }
157
- ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
158
- ul.square { list-style: square outside; }
159
- ul.circle { list-style: circle outside; }
160
- ul.disc { list-style: disc outside; }
161
- ul ul, ol ol { margin: 4px 0 5px 30px; }
162
- li { margin-bottom: 12px; }
163
- ul.large li { line-height: 21px; }
164
-
165
-
166
- /* --------------------------------------------------
167
- :: Grid
168
- -------------------------------------------------- */
169
-
170
- .container { padding: 0px 20px; }
171
-
172
- .row { width: 100%; max-width: 980px; min-width: 727px; margin: 0 auto; }
173
- /* To fix the grid into a certain size, set max-width to width */
174
- .row .row { min-width: 0px; }
175
-
176
- .column, .columns { margin-left: 4.4%; float: left; min-height: 1px; position: relative; }
177
- .column:first-child, .columns:first-child { margin-left: 0px; }
178
-
179
- .row .one.columns { width: 4.3%; }
180
- .row .two.columns { width: 13%; }
181
- .row .three.columns { width: 21.68%; }
182
- .row .four.columns { width: 30.4%; }
183
- .row .five.columns { width: 39.1%; }
184
- .row .six.columns { width: 47.8%; }
185
- .row .seven.columns { width: 56.5%; }
186
- .row .eight.columns { width: 65.2%; }
187
- .row .nine.columns { width: 73.9%; }
188
- .row .ten.columns { width: 82.6%; }
189
- .row .eleven.columns { width: 91.3%; }
190
- .row .twelve.columns { width: 100%; }
191
-
192
- .row .offset-by-one { margin-left: 13.1%; }
193
- .row .offset-by-two { margin-left: 21.8%; }
194
- .row .offset-by-three { margin-left: 30.5%; }
195
- .row .offset-by-four { margin-left: 39.2%; }
196
- .row .offset-by-five { margin-left: 47.9%; }
197
- .row .offset-by-six { margin-left: 56.6%; }
198
- .row .offset-by-seven { margin-left: 65.3%; }
199
- .row .offset-by-eight { margin-left: 74.0%; }
200
- .row .offset-by-nine { margin-left: 82.7%; }
201
- .row .offset-by-ten { margin-left: 91.4%; }
202
- /*.row .offset-by-eleven { margin-left: 95.7%; }*/
203
-
204
- .row .one.centered { margin-left: 47.9%; }
205
- .row .two.centered { margin-left: 43.5%; }
206
- .row .three.centered { margin-left: 39.2%; }
207
- .row .four.centered { margin-left: 34.8%; }
208
- .row .five.centered { margin-left: 30.5%; }
209
- .row .six.centered { margin-left: 26.1%; }
210
- .row .seven.centered { margin-left: 21.8%; }
211
- .row .eight.centered { margin-left: 17.4%; }
212
- .row .nine.centered { margin-left: 13.1%; }
213
- .row .ten.centered { margin-left: 8.7%; }
214
- .row .eleven.centered { margin-left: 4.3%; }
215
-
216
- .row .offset-by-one:first-child { margin-left: 8.7%; }
217
- .row .offset-by-two:first-child { margin-left: 17.4%; }
218
- .row .offset-by-three:first-child { margin-left: 26.1%; }
219
- .row .offset-by-four:first-child { margin-left: 34.8%; }
220
- .row .offset-by-five:first-child { margin-left: 43.5%; }
221
- .row .offset-by-six:first-child { margin-left: 52.2%; }
222
- .row .offset-by-seven:first-child { margin-left: 60.9%; }
223
- .row .offset-by-eight:first-child { margin-left: 69.6%; }
224
- .row .offset-by-nine:first-child { margin-left: 78.3%; }
225
- .row .offset-by-ten:first-child { margin-left: 87%; }
226
- .row .offset-by-eleven:first-child { margin-left: 95.7%; }
227
-
228
- img, object, embed { max-width: 100%; }
229
- img { -ms-interpolation-mode: bicubic; }
230
-
231
-
232
- /* Clear the columns automagically */
233
- /*
234
- .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
235
- .row:last-child:after { content: ""; }
236
- * html .row, * html .clearfix { height: 1%; }
237
- .row, .clearfix { display: inline-block; }
238
- .row, .clearfix { display: block; }
239
- */
240
-
241
- /* Testing Nicolas Gallagher's micro clearfix */
242
- .row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
243
- .row:after, .clearfix:after { clear: both; }
244
- .row, .clearfix { zoom: 1; }
245
-
246
-
247
-
248
- /* --------------------------------------------------
249
- :: Tables
250
- -------------------------------------------------- */
251
- table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; width: 100%; margin: 0 0 18px; border: 1px solid #ddd; }
252
-
253
- table thead { background: #f5f5f5; }
254
- table thead tr th,
255
- table tbody tr td { font-size: 12px; line-height: 18px; text-align: left; }
256
- table thead tr th { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
257
- table thead tr th:first-child { border-left: none; }
258
- table thead tr th:last-child { border-right: none; }
259
-
260
- table thead tr { }
261
- table tbody { }
262
- table tbody tr { }
263
- table tbody tr.even,
264
- table tbody tr.alt { background: #f9f9f9; }
265
- table tbody tr:nth-child(even) { background: #f9f9f9; }
266
- table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
267
-
268
- /* --------------------------------------------------
269
- :: Misc
270
- ---------------------------------------------------*/
271
- .left { float: left; }
272
- .right { float: right; }
273
- .hide { display: none; }
274
- .highlight { background: #ff0; }
275
-
276
-
277
-
278
- /* --------------------------------------------------
279
- :: Block grids
280
-
281
- These are 2-up, 3-up, 4-up and 5-up ULs, suited
282
- for repeating blocks of content. Add 'mobile' to
283
- them to switch them just like the layout grid
284
- (one item per line) on phones
285
- -------------------------------------------------- */
286
-
287
- .block-grid { display: block; overflow: hidden; }
288
- .block-grid li { display: block; height: auto; float: left; }
289
-
290
- .block-grid.two-up { margin-left: -4% }
291
- .block-grid.two-up li { margin-left: 4%; width: 46%; }
292
-
293
- .block-grid.three-up { margin-left: -2% }
294
- .block-grid.three-up li { margin-left: 2%; width: 31.3%; }
295
-
296
- .block-grid.four-up { margin-left: -2% }
297
- .block-grid.four-up li { margin-left: 2%; width: 23%; }
298
-
299
- .block-grid.five-up { margin-left: -1.5% }
300
- .block-grid.five-up li { margin-left: 1.5%; width: 18.5%; }
301
-
@@ -1,8 +0,0 @@
1
- /*
2
- *= require ./globals.css
3
- *= require ./ui.css
4
- *= require ./forms.css
5
- *= require ./orbit.css
6
- *= require ./reveal.css
7
- *= require ./mobile.css
8
- */
@@ -1,112 +0,0 @@
1
- /* --------------------------------------------------
2
- :: Grid
3
- -------------------------------------------------- */
4
-
5
- /* Tablet screens */
6
- @media only screen and (device-width: 768px), (device-width: 800px) {
7
- /* Currently unused */
8
- }
9
-
10
-
11
- /* Mobile */
12
- @media only screen and (max-width: 767px) {
13
- body { -webkit-text-size-adjust: none; }
14
-
15
- .row, body, .container { width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
16
- .row .row .column, .row .row .columns { padding: 0; }
17
- .column, .columns { width: auto !important; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; }
18
- .column:last-child, .columns:last-child { margin-right: 0px; }
19
- .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven { margin-left: 0% !important; }
20
- }
21
-
22
-
23
- /* --------------------------------------------------
24
- :: Block Grids
25
- -------------------------------------------------- */
26
-
27
- @media only screen and (max-width: 767px) {
28
- .block-grid.mobile li { float: none; width: 100%; }
29
- }
30
-
31
-
32
-
33
- /* --------------------------------------------------
34
- :: Mobile Visibility Affordances
35
- ---------------------------------------------------*/
36
-
37
-
38
- .show-on-phones { display: none !important; }
39
- .show-on-tablets { display: none !important; }
40
- .show-on-desktops { display: block; }
41
-
42
- .hide-on-phones { display: block !important; }
43
- .hide-on-tablets { display: block !important; }
44
- .hide-on-desktops { display: none; }
45
-
46
-
47
- @media only screen and (device-width: 768px), only screen and (device-width: 1280px), only screen and (device-width: 800px) {
48
- .hide-on-phones { display: block !important; }
49
- .hide-on-tablets { display: none !important; }
50
- .hide-on-desktops { display: block !important; }
51
-
52
- .show-on-phones { display: none !important; }
53
- .show-on-tablets { display: block !important; }
54
- .show-on-desktops { display: none !important; }
55
- }
56
-
57
-
58
- @media only screen and (max-width: 767px) {
59
- .hide-on-phones { display: none !important; }
60
- .hide-on-tablets { display: block !important; }
61
- .hide-on-desktops { display: block !important; }
62
-
63
- .show-on-phones { display: block !important; }
64
- .show-on-tablets { display: none !important; }
65
- .show-on-desktops { display: none !important; }
66
- }
67
-
68
-
69
- /* --------------------------------------------------
70
- :: Forms
71
- ---------------------------------------------------*/
72
-
73
-
74
- @media only screen and (max-width: 767px) {
75
- input.input-text, input.input-text.oversize, textarea,
76
- form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { display: block; width: 96%; padding: 6px 2% 4px; font-size: 18px; }
77
- form.nice input.input-text, form.nice input.input-text.oversize, form.nice textarea { -webkit-border-radius: 2px; -moz-border-radius: 2px; }
78
- form.nice small.error { padding: 6px 2%; display: block; }
79
- form.nice .small + .error { width: auto; }
80
- form.nice .medium + .error { width: auto; }
81
- form.nice .large + .error { width: auto; }
82
- }
83
-
84
-
85
- /* --------------------------------------------------
86
- :: UI
87
- ---------------------------------------------------*/
88
-
89
- /* Buttons */
90
- @media only screen and (max-width: 767px) {
91
- .button { display: block; }
92
- button.button { width: 100%; padding-left: 0px; padding-right: 0px; }
93
- }
94
-
95
- /* Tabs */
96
-
97
- @media only screen and (max-width: 767px) {
98
- dl.tabs.mobile, dl.nice.tabs.mobile { width: auto; margin: 20px -20px 40px; height: auto; }
99
- dl.tabs.mobile dt, dl.tabs.mobile dd, dl.nice.tabs.mobile dt, dl.nice.tabs.mobile dd { float: none; height: auto; }
100
-
101
- dl.tabs.mobile dd a { display: block; width: auto; height: auto; padding: 18px 20px; line-height: 1; border: solid 0px #ccc; border-width: 1px 0px 0px; margin: 0; color: #555; background: #eee; font-size: 15px; font-size: 1.5rem; }
102
- dl.tabs.mobile dd a.active { height: auto; margin: 0; border-width: 1px 0px 0px; }
103
-
104
- .nice.tabs.mobile { border-bottom: solid 1px #ccc; height: auto; }
105
- .nice.tabs.mobile dd a { padding: 18px 20px; border: none; border-left: none; border-right: none; border-top: 1px solid #ccc; background: #fff; }
106
- .nice.tabs.mobile dd a.active { border: none; background: #00a6fc; color: #fff; margin: 0; position: static; top: 0px; height: auto; }
107
- .nice.tabs.mobile dd:first-child a.active { margin: 0; }
108
-
109
- dl.contained.mobile, dl.nice.contained.mobile { margin-bottom: 0px; }
110
- dl.contained.tabs.mobile dd a { padding: 18px 20px; }
111
- dl.nice.contained.tabs.mobile dd a { padding: 18px 20px; }
112
- }