Merge remote-tracking branch 'upstream/pull/3379'
[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     &.closed nav {
24       display: none;
25     }
26
27     .search_forms {
28       display: block;
29     }
30   }
31
32   #sidebar .search_forms,
33   #edit_tab,
34   #export_tab {
35     display: none;
36   }
37
38   nav.primary {
39     padding: 0;
40
41     ul, li {
42       border: none;
43       border-radius: 0;
44       width: 100%;
45     }
46
47     ul {
48       border-top: 1px solid #eee;
49       li {
50         border-bottom: 1px solid #eee;
51         border-right: none;
52         > a {
53           border-radius: 0;
54           width: 100%;
55           text-align: center;
56           font-size: 15px;
57         }
58       }
59     }
60
61     .btn-group {
62       width: 100%;
63       padding: 10px;
64     }
65   }
66
67   nav.secondary {
68     .user-menu {
69       width: 100%;
70     }
71   }
72
73   #compact-secondary-nav {
74     display: none;
75   }
76
77   .compact-hide {
78     display: inline-block;
79   }
80
81   .overlay-sidebar #sidebar .welcome.visible {
82     display: none;
83   }
84
85   .overlay-sidebar #sidebar #banner {
86     display: none;
87   }
88
89   .leaflet-top.leaflet-right {
90     top: 10px !important;
91   }
92 }
93
94 @media (max-width: 767.98px) {
95   body.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: 350px;
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 }