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