Browse section pagination
[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 #compact-secondary-nav {
84   display: none;
85 }
86 .compact-hide {
87   display: inline-block;
88 }
89
90 #content { margin-top: 58px; }
91
92 .map-layout {
93   #sidebar {
94     width: 100%;
95     position: fixed;
96     top: 58px;
97     height: 370px;
98     overflow-x: hidden;
99     z-index: 1;
100     background: #fff;
101     p.large-text {
102       font-size: 1.2em;
103       line-height: 1.4em;
104     }
105     &.minimized {
106       background: none;
107     }
108   }
109   #content {
110     position: fixed;
111     top: 0;
112     display: block;
113     height: 100%;
114     margin-top: 0;
115     padding-top: 58px;
116   }
117   #map {
118     width: 100%;
119     // height: 100%;
120     // position: fixed;
121   }
122 }
123
124 .leaflet-top.leaflet-right {
125   top: 10px !important;
126   z-index: 0;
127 }
128
129 .content_map {
130   width: 100%;
131   border: none;
132   float: none;
133   height: 200px;
134   max-height: none;
135   min-height: auto;
136 }
137
138 /* Rules for the map UI */
139
140 .layers-ui {
141   .leaflet-container {
142     display: none;
143   }
144
145   li {
146     border-radius: 0;
147     margin-bottom: 0;
148
149     &:first-child {
150       border-radius: 4px 4px 0 0;
151     }
152
153     &:last-child {
154       border-radius: 0 0 4px 4px;
155     }
156   }
157
158   .overlay-layers p {
159     display: none;
160   }
161 }
162
163 /* Rules for the login form */
164
165 #login_login input#user_email {
166   width: 100%;
167   max-width: 18em;
168 }
169
170 #login_login input#user_password {
171   width: 100%;
172   max-width: 18em;
173 }
174
175 #login_login input#openid_url {
176   width: 100%;
177   max-width: 18em;
178 }
179
180 #login_openid_buttons td {
181   padding: 2px;
182 }
183
184 /* Rules for the user view */
185
186 .user_map {
187   width: 100% !important;
188   height: 300px !important;
189 }
190
191 #userinformation .deemphasize {
192   position: relative;
193   right: auto; left: auto;
194   margin-top: 10px;
195   top: auto;
196 }
197
198 /* Rules for the sign-up page */
199
200 .user-new,
201 .user-create {
202   .col6 {
203     width: 100%;
204   }
205
206   .aside {
207     display: none;
208   }
209 }
210
211 .site-about #content .attr h1 {
212   font-size: 28px;
213 }