zurb-foundation 2.0.1 → 2.0.2

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.
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
- }