]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/small.scss
Refactor diary entry forms to use a custom form builder
[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-nav {
6   #menu-icon {
7     display: inline-block !important;
8   }
9
10   nav.primary,
11   nav.secondary {
12     float: none !important;
13     position: relative;
14     display: block;
15     clear: both;
16   }
17
18   header {
19     height: auto;
20     min-height: $headerHeight;
21     background: #fff;
22
23     h1 {
24       padding-bottom: 15px;
25     }
26
27     &.closed nav {
28       display: none;
29     }
30
31     .search_forms {
32       display: block;
33     }
34   }
35
36   #sidebar .search_forms,
37   #edit_tab,
38   #export_tab {
39     display: none;
40   }
41
42   nav.primary {
43     padding: 0;
44
45     ul, li {
46       border: none;
47       border-radius: 0;
48       width: 100%;
49     }
50
51     ul {
52       border-top: 1px solid #eee;
53       li {
54         border-bottom: 1px solid #eee;
55         border-right: none;
56         > a {
57           border-radius: 0;
58           width: 100%;
59           text-align: center;
60           font-size: 15px;
61         }
62       }
63     }
64
65     .btn-group {
66       width: 100%;
67       padding: 10px;
68     }
69   }
70
71   nav.secondary {
72     .user-menu {
73       width: 100%;
74     }
75   }
76
77   #compact-secondary-nav {
78     display: none;
79   }
80
81   .compact-hide {
82     display: inline-block;
83   }
84
85   .overlay-sidebar #sidebar .welcome.visible {
86     display: none;
87   }
88
89   .overlay-sidebar #sidebar #banner {
90     display: none;
91   }
92
93   .leaflet-top.leaflet-right {
94     top: 10px !important;
95   }
96 }
97
98 @media (max-width: 767.98px) {
99   body.map-layout {
100     #sidebar, #map {
101       position: relative;
102       overflow-x: hidden;
103       width: 100%;
104       height: 50%;
105     }
106
107     .overlay-sidebar {
108       #sidebar {
109         position: absolute;
110         width: 300px;
111         height: auto;
112         overflow: hidden;
113       }
114
115       #map {
116         height: 100%;
117       }
118     }
119
120     #map-ui {
121       z-index: 9999;
122       width: 100%;
123       overflow-y: scroll;
124     }
125   }
126 }
127
128 @media (max-width: 575.98px) {
129   /* Rules for the login form */
130
131   #login_login input#user_email {
132     width: 100%;
133     max-width: 18em;
134   }
135
136   #login_login input#user_password {
137     width: 100%;
138     max-width: 18em;
139   }
140
141   #login_login input#openid_url {
142     width: 100%;
143     max-width: 18em;
144   }
145
146   #login_openid_buttons td {
147     padding: 2px;
148   }
149 }