]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/small.scss
Switch to bootstrap for dropdowns and tooltips
[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     .btn-group {
76       width: 100%;
77       padding: 10px;
78     }
79   }
80
81   nav.secondary {
82     .user-menu {
83       width: 100%;
84     }
85   }
86
87   #compact-secondary-nav {
88     display: none;
89   }
90
91   .compact-hide {
92     display: inline-block;
93   }
94
95   &.map-layout {
96     #sidebar, #map {
97       position: relative;
98       overflow-x: hidden;
99       width: 100%;
100       height: 50%;
101     }
102
103     .overlay-sidebar {
104       #sidebar {
105         position: absolute;
106         width: 300px;
107         height: auto;
108         overflow: hidden;
109       }
110
111       #map {
112         height: 100%;
113       }
114     }
115
116     #map-ui {
117       z-index: 9999;
118       width: 100%;
119       overflow-y: scroll;
120     }
121   }
122
123   .overlay-sidebar #sidebar .welcome.visible {
124     display: none;
125   }
126
127   .overlay-sidebar #sidebar #banner {
128     display: none;
129   }
130
131   .leaflet-top.leaflet-right {
132     top: 10px !important;
133   }
134
135   .content_map {
136     width: 100%;
137     border: none;
138     float: none;
139     height: 200px;
140     max-height: none;
141     min-height: auto;
142   }
143
144   /* Rules for the login form */
145
146   #login_login input#user_email {
147     width: 100%;
148     max-width: 18em;
149   }
150
151   #login_login input#user_password {
152     width: 100%;
153     max-width: 18em;
154   }
155
156   #login_login input#openid_url {
157     width: 100%;
158     max-width: 18em;
159   }
160
161   #login_openid_buttons td {
162     padding: 2px;
163   }
164
165   /* Rules for the user view */
166
167   .user_map {
168     width: 100% !important;
169     height: 300px !important;
170   }
171
172   #userinformation .deemphasize {
173     position: relative;
174     right: auto; left: auto;
175     margin-top: 10px;
176     top: auto;
177   }
178
179   &.site-about #content .attr h1 {
180     font-size: 28px;
181   }
182
183 }