openstreetmap-website/app/assets/stylesheets/small.scss

122 lines
1.8 KiB
SCSS

@import "parameters";
/* Styles specific to a small screen, such as iPhone, Android, etc... */
body.small-nav {
#menu-icon {
display: inline-block !important;
}
nav.primary,
nav.secondary {
float: none !important;
position: relative;
display: block;
clear: both;
}
header {
height: auto;
min-height: $headerHeight;
background: #fff;
&.closed nav {
display: none;
}
.search_forms {
display: block;
}
}
#sidebar .search_forms,
#edit_tab,
#export_tab {
display: none;
}
nav.primary {
padding: 0;
ul, li {
border: none;
border-radius: 0;
width: 100%;
}
ul {
border-top: 1px solid #eee;
li {
border-bottom: 1px solid #eee;
border-right: none;
> a {
border-radius: 0;
width: 100%;
text-align: center;
font-size: 15px;
}
}
}
.btn-group {
width: 100%;
padding: 10px;
}
}
nav.secondary {
.user-menu {
width: 100%;
}
}
#compact-secondary-nav {
display: none;
}
.compact-hide {
display: inline-block;
}
.overlay-sidebar #sidebar .welcome.visible {
display: none;
}
.overlay-sidebar #sidebar #banner {
display: none;
}
.leaflet-top.leaflet-right {
top: 10px !important;
}
}
@media (max-width: 767.98px) {
body.map-layout {
#sidebar, #map {
position: relative;
overflow-x: hidden;
width: 100%;
height: 50%;
}
.overlay-sidebar {
#sidebar {
position: absolute;
width: 350px;
height: auto;
overflow: hidden;
}
#map {
height: 100%;
}
}
#map-ui {
z-index: 9999;
width: 100%;
overflow-y: scroll;
}
}
}