Move search form to header on small screens
[rails.git] / app / assets / stylesheets / small.css.scss
1 /* Styles specific to a small screen, such as iPhone, Android, etc... */
2
3 input[type="submit"],
4 input[type="text"] {
5   -webkit-appearance: none;
6 }
7
8 .column-1 {
9   width: 100%;
10 }
11
12 #menu-icon {
13   display: inline-block !important;
14 }
15
16 nav.primary,
17 nav.secondary {
18   float: none !important;
19   position: relative;
20   display: block;
21   clear: both;
22 }
23
24 header {
25   height: auto;
26   background: #fff;
27
28   h1 {
29     padding-bottom: 15px;
30   }
31
32   &.closed nav {
33     display: none;
34   }
35
36   .search_form {
37     display: block;
38   }
39 }
40
41 #sidebar .search_form,
42 #edit_tab,
43 #export_tab {
44   display: none;
45 }
46
47 nav.primary {
48   padding: 0;
49
50   ul, li {
51     border: none;
52     border-radius: 0;
53     width: 100%;
54   }
55
56   ul {
57     border-top: 1px solid #eee;
58     li {
59       border-bottom: 1px solid #eee;
60       border-right: none;
61       > a {
62         border-radius: 0;
63         width: 100%;
64         text-align: center;
65         font-size: 15px;
66       }
67     }
68   }
69 }
70
71 nav.secondary {
72   border-bottom: 1px solid #eee;
73
74   .user-menu {
75     display: block;
76     width: 100%;
77     margin-left: 0;
78     > li {
79       width: 49%;
80       > a { 
81         width: 100%; 
82         text-align: center;
83       }
84     }
85   }
86 }
87
88 #compact-secondary-nav {
89   display: none;
90 }
91
92 .compact-hide {
93   display: inline-block;
94 }
95
96 .map-layout {
97   #sidebar, #map {
98     position: relative;
99     overflow-x: hidden;
100     width: 100%;
101     height: 50%;
102   }
103
104   .overlay-sidebar {
105     #sidebar {
106       width: 300px;
107     }
108
109     #map {
110       height: 100%;
111     }
112   }
113
114   #map-ui {
115     z-index: 9999;
116     width: 100%;
117     overflow-y: scroll;
118   }
119 }
120
121 #sidebar .welcome {
122   display: none;
123 }
124
125 .leaflet-top.leaflet-right {
126   top: 10px !important;
127   z-index: 0;
128 }
129
130 .content_map {
131   width: 100%;
132   border: none;
133   float: none;
134   height: 200px;
135   max-height: none;
136   min-height: auto;
137 }
138
139 /* Rules for the login form */
140
141 #login_login input#user_email {
142   width: 100%;
143   max-width: 18em;
144 }
145
146 #login_login input#user_password {
147   width: 100%;
148   max-width: 18em;
149 }
150
151 #login_login input#openid_url {
152   width: 100%;
153   max-width: 18em;
154 }
155
156 #login_openid_buttons td {
157   padding: 2px;
158 }
159
160 /* Rules for the user view */
161
162 .user_map {
163   width: 100% !important;
164   height: 300px !important;
165 }
166
167 #userinformation .deemphasize {
168   position: relative;
169   right: auto; left: auto;
170   margin-top: 10px;
171   top: auto;
172 }
173
174 /* Rules for the sign-up page */
175
176 .user-new,
177 .user-create {
178   .col6 {
179     width: 100%;
180   }
181
182   .aside {
183     display: none;
184   }
185 }
186
187 .site-about #content .attr h1 {
188   font-size: 28px;
189 }