X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/248ad3ae0584e0a158b7de2c3b5d8bee114509b0..b43aaa1d5868d40a1ad4b1caa0985eddf1c81bb8:/app/assets/stylesheets/small.scss?ds=sidebyside diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss index 623d0f6b4..2247b4bbe 100644 --- a/app/assets/stylesheets/small.scss +++ b/app/assets/stylesheets/small.scss @@ -1,187 +1,122 @@ @import "parameters"; /* Styles specific to a small screen, such as iPhone, Android, etc... */ -@media (max-width: 640px) { - body { - input[type="submit"], - input[type="text"] { - -webkit-appearance: none; - } - - .column-1 { - width: 100%; - } - - #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; - - h1 { - padding-bottom: 15px; - } +body.small-nav { + #menu-icon { + display: inline-block !important; + } - &.closed nav { - display: none; - } + nav.primary, + nav.secondary { + float: none !important; + position: relative; + display: block; + clear: both; + } - .search_forms { - display: block; - } - } + header { + height: auto; + min-height: $headerHeight; + background: #fff; - #sidebar .search_forms, - #edit_tab, - #export_tab { + &.closed nav { 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; - } + .search_forms { + display: block; } + } - nav.secondary { - .user-menu { - width: 100%; - } - } + #sidebar .search_forms, + #edit_tab, + #export_tab { + display: none; + } - #compact-secondary-nav { - display: none; - } + nav.primary { + padding: 0; - .compact-hide { - display: inline-block; + ul, li { + border: none; + border-radius: 0; + width: 100%; } - &.map-layout { - #sidebar, #map { - position: relative; - overflow-x: hidden; - width: 100%; - height: 50%; - } - - .overlay-sidebar { - #sidebar { - position: absolute; - width: 300px; - height: auto; - overflow: hidden; - } - - #map { - height: 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; } } - - #map-ui { - z-index: 9999; - width: 100%; - overflow-y: scroll; - } - } - - .overlay-sidebar #sidebar .welcome.visible { - display: none; } - .overlay-sidebar #sidebar #banner { - display: none; - } - - .leaflet-top.leaflet-right { - top: 10px !important; - } - - .content_map { + .btn-group { width: 100%; - border: none; - float: none; - height: 200px; - max-height: none; - min-height: auto; + padding: 10px; } + } - /* Rules for the login form */ - - #login_login input#user_email { + nav.secondary { + .user-menu { width: 100%; - max-width: 18em; } + } - #login_login input#user_password { - width: 100%; - max-width: 18em; - } + #compact-secondary-nav { + display: none; + } - #login_login input#openid_url { - width: 100%; - max-width: 18em; - } + .compact-hide { + display: inline-block; + } - #login_openid_buttons td { - padding: 2px; - } + .overlay-sidebar #sidebar .welcome.visible { + display: none; + } - /* Rules for the user view */ + .overlay-sidebar #sidebar #banner { + display: none; + } - .user_map { - width: 100% !important; - height: 300px !important; - } + .leaflet-top.leaflet-right { + top: 10px !important; + } +} - #userinformation .deemphasize { +@media (max-width: 767.98px) { + body.map-layout { + #sidebar, #map { position: relative; - right: auto; - left: auto; - margin-top: 10px; - top: auto; + overflow-x: hidden; + width: 100%; + height: 50%; } - &.site-about #content .attr h1 { - font-size: 28px; + .overlay-sidebar { + #sidebar { + position: absolute; + width: 350px; + height: auto; + overflow: hidden; + } + + #map { + height: 100%; + } } + #map-ui { + z-index: 9999; + width: 100%; + overflow-y: scroll; + } } }