groundwork for responsive menu
[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;
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: 100%;
29   background: #fff;
30   clear: both;
31   h1 { padding-bottom: 17px; }
32   &.closed {
33     nav.primary,
34     nav.secondary {
35       display: none;
36     }
37   }
38 }
39
40 .mobile-hide { display: none !important; }
41
42 nav.primary {
43   padding: 0;
44   ul, li {
45     border: none;
46     border-radius: 0;
47     width: 100%;
48   }
49   ul {
50     border-top: 1px solid #eee;
51     li {
52       border-bottom: 1px solid #eee;
53       border-right: none;
54       > a {
55         border-radius: 0;
56         width: 100%;
57         text-align: center;
58         font-size: 15px;
59       }
60     }
61   }
62 }
63
64 nav.secondary {
65   .user-menu {
66     display: block;
67     width: 100%;
68     margin-left: 0;
69   }
70 }
71
72 .map-layout {
73   #sidebar {
74     width: 60%;
75   }
76   #content {
77     position: static;
78     display: block;
79     height: 600px;
80   }
81 }
82
83 .content_map {
84   width: 100%;
85   border: none;
86   float: none;
87   height: 200px;
88   max-height: none;
89   min-height: auto;
90 }
91
92 /* Rules for the map UI */
93
94 .layers-ui {
95   .leaflet-container {
96     display: none;
97   }
98
99   li {
100     border-radius: 0;
101     margin-bottom: 0;
102
103     &:first-child {
104       border-radius: 4px 4px 0 0;
105     }
106
107     &:last-child {
108       border-radius: 0 0 4px 4px;
109     }
110   }
111
112   .overlay-layers p {
113     display: none;
114   }
115 }
116
117 /* Rules for the login form */
118
119 #login_login input#user_email {
120   width: 100%;
121   max-width: 18em;
122 }
123
124 #login_login input#user_password {
125   width: 100%;
126   max-width: 18em;
127 }
128
129 #login_login input#openid_url {
130   width: 100%;
131   max-width: 18em;
132 }
133
134 #login_openid_buttons td {
135   padding: 2px;
136 }
137
138 /* Rules for the user view */
139
140 .user_map {
141   width: 100% !important;
142   height: 300px !important;
143 }
144
145 #userinformation .deemphasize {
146   position: relative;
147   right: auto; left: auto;
148   margin-top: 10px;
149   top: auto;
150 }
151
152 /* Rules for the sign-up page */
153
154 .user-new,
155 .user-create {
156   .col6 {
157     width: 100%;
158   }
159
160   .aside {
161     display: none;
162   }
163 }