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