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