/web-app/css/mobile.css

 1/* Styles for mobile devices */
 2
 3@media screen and (max-width: 480px) {
 4	.nav {
 5		padding: 0.5em;
 6	}
 7
 8	.nav li {
 9		margin: 0 0.5em 0 0;
10		padding: 0.25em;
11	}
12
13	/* Hide individual steps in pagination, just have next & previous */
14	.pagination .step, .pagination .currentStep {
15		display: none;
16	}
17
18	.pagination .prevLink {
19		float: left;
20	}
21
22	.pagination .nextLink {
23		float: right;
24	}
25	
26	/* pagination needs to wrap around floated buttons */
27	.pagination {
28		overflow: hidden;
29	}
30
31	/* slightly smaller margin around content body */
32	fieldset,
33	.property-list {
34		padding: 0.3em 1em 1em;
35	}
36	
37	input, textarea {
38		width: 100%;
39		   -moz-box-sizing: border-box;
40		-webkit-box-sizing: border-box;
41		    -ms-box-sizing: border-box;
42		        box-sizing: border-box;
43	}
44	
45	select, input[type=checkbox], input[type=radio], input[type=submit], input[type=button], input[type=reset] {
46		width: auto;
47	}
48
49	/* hide all but the first column of list tables */
50	.scaffold-list td:not(:first-child),
51	.scaffold-list th:not(:first-child) {
52		display: none;
53	}
54
55	.scaffold-list thead th {
56		text-align: center;
57	}
58
59	/* stack form elements */
60	.fieldcontain {
61		margin-top: 0.6em;
62	}
63
64	.fieldcontain label,
65	.fieldcontain .property-label,
66	.fieldcontain .property-value {
67		display: block;
68		float: none;
69		margin: 0 0 0.25em 0;
70		text-align: left;
71		width: auto;
72	}
73	
74	.errors ul,
75	.message p {
76		margin: 0.5em;
77	}
78
79	.error ul {
80		margin-left: 0;
81	}
82}