X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/4d1f83d6bbcc0334251f8ed71fb3c2127b237124..113c32f65e2018fa93e41c1599f2bb1f19ee3826:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 53b561b63..8cd9e2b40 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -80,11 +80,10 @@ small, aside { /* Rules for the header */ #menu-icon { - display: none !important; + display: none; float: right; background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; - display: block; width: 30px; height: 30px; margin: 14px 10px 0 0; @@ -244,7 +243,7 @@ body.compact-nav { body.small-nav { #menu-icon { - display: inline-block !important; + display: block; } nav.primary, @@ -305,7 +304,7 @@ body.small-nav { } nav.secondary { - .user-menu { + .user-menu, .login-menu { width: 100%; } } @@ -318,7 +317,7 @@ body.small-nav { display: inline-block; } - .overlay-sidebar #sidebar .welcome.visible { + .overlay-sidebar #sidebar .welcome { display: none; } @@ -358,8 +357,6 @@ body.small-nav { width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); - border-radius: 4px 0 0 4px; - margin-bottom: 10px; outline: none; &:hover, @@ -378,26 +375,18 @@ body.small-nav { background-color: $vibrant-green; } - .icon { - margin: 10px; + &-first { + border-start-start-radius: 4px; } -} - -.leaflet-control .zoomin, -.control-layers .control-button { - margin-bottom: 0px; - border-radius: 4px 0 0 0; -} -.leaflet-control .zoomout, -.control-key .control-button { - margin-bottom: 0; - border-radius: 0; -} + &-last { + border-end-start-radius: 4px; + margin-bottom: 10px; + } -.control-locate .control-button, -.control-share .control-button { - border-radius: 0 0 0 4px; + .icon { + margin: 10px; + } } /* Rules for the sidebar and main map area */ @@ -433,9 +422,6 @@ body.small-nav { > div { position: relative; - float: left; - clear: both; - width: 100%; } } @@ -450,11 +436,7 @@ body.small-nav { } .welcome { - display: none; - - &.visible { - display: block; - } + display: block; } #sidebar_content { @@ -510,23 +492,6 @@ body.small-nav { border-bottom: 1px solid $grey; padding: 10px 20px; } - - a.close-button { - float: right; - padding:5px; - font-size:20px; - line-height:10px; - color:#222; - border:1px solid $grey; - } - - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; - } - } } } @@ -539,6 +504,13 @@ body.small-nav { height: 50%; } + #map-ui { + z-index: 9999; + width: 100%; + height: 50%; + overflow-y: scroll; + } + .overlay-sidebar { #sidebar { position: absolute; @@ -547,23 +519,10 @@ body.small-nav { overflow: hidden; } - #map { + #map, #map-ui { height: 100%; } } - - #map-ui { - z-index: 9999; - width: 100%; - overflow-y: scroll; - } - } -} - -.layers-ui, -.share-ui { - li:last-child { - margin-bottom: 0; } } @@ -618,35 +577,6 @@ body.small-nav { } .share-ui { - .share-tabs { - margin-bottom: 10px; - - a { - color: #fff; - text-decoration: none; - background-color: $lightblue; - padding: 5px 10px; - border-right: 1px solid #fff; - } - - a:first-child { - border-right: 1px solid #fff; - border-radius: 4px 0 0 4px; - } - - a:last-child { - border-radius: 0 4px 4px 0; - } - - a.active { - background-color: $blue; - } - } - - .share-tab { - display: none; - } - .share-link { input[type=text], textarea { @@ -663,10 +593,6 @@ body.small-nav { } } - #embed_html { - resize: vertical; - } - #mapnik_scale { width: 100px; } @@ -694,19 +620,6 @@ body.small-nav { #attribution { display: none; - - table { - width: 100% - } -} - -.attribution_license, -.attribution_project { - text-align: left; -} - -.attribution_notice { - text-align: center; } .donate-attr { color: darken($green, 10%) !important; } @@ -732,21 +645,6 @@ body.small-nav { } } -#sidebar { - #sidebar_loader, - .search_more { - width: 100%; - margin: $lineheight auto; - } - - .loader { - text-align: center; - margin: auto; - width: 40px; - display: block; - } -} - /* Temporary label size override until we remove site-wide font customisation */ form { @@ -804,7 +702,6 @@ header .search_forms, .search_more .loader { display: none; - width: 100%; } } @@ -844,15 +741,6 @@ tr.turn:hover { .routing_marker { width: 15px; cursor: move; } -/* Rules for entity history */ - -#sidebar_content { - .browse_details { - position: relative; - border-bottom: $keyline; - } -} - .browse_status { display: none; } @@ -1107,6 +995,10 @@ tr.turn:hover { [dir=rtl] .header-illustration { transform: scaleX(-1); + + h1 { + transform: scaleX(-1); + } } #content.maximised { @@ -1144,7 +1036,7 @@ tr.turn:hover { min-width: 200px; p { padding: 0 0 5px 0; - margin-top: 0 0 0 60px; + margin: 0 0 0 60px; font-size: 12px; } } @@ -1231,42 +1123,6 @@ tr.turn:hover { } } -/* Rules for the account settings page */ - -#accountForm .user_image { - margin-bottom: 0; -} - -#accountForm #user_image { - margin-left: 20px; -} - -#accountForm ul.accountImage-options { - margin-left: 120px; -} - -.nohome .location { - display: none; -} - -#homerow .message { - display: none; -} - -.nohome .message { - display: inline !important; -} - -/* Rules for the oauth settings page */ - -.oauth_clients .buttons .oauth-edit { - border-radius: 2px 0 0 2px; -} - -.oauth_clients .buttons .oauth-delete { - border-radius: 0 2px 2px 0; -} - /* Rules for the oauth authorization page */ .oauth-authorize ul { @@ -1326,60 +1182,6 @@ tr.turn:hover { display: none; } -/* Rules for "flash" notice boxes shown at the top of the content area */ - -.flash { - &.error { - background-color: #ff7070; - } - - &.warning { - background-color: #ffe0cc; - } - - &.notice { - background-color: #CBEEA7; - } -} - -/* Rules for highlighting fields with rails validation errors */ - -.formError { - display: inline-block; - padding: 5px 10px; - margin-top: 5px; - border-radius: 4px; - font-size: 12px; - color: #fff; - background-color: #ff7070; -} - -/* Rules for rails validation error boxes */ - -#errorExplanation { - width: 400px; - border: 2px solid #ff7070; - padding: 0 $lineheight/2; - margin-bottom: $lineheight; - background-color: #f0f0f0; - - h2 { - margin: 0 -10px 10px -10px; - padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; - font-weight: bold; - font-size: 12px; - background-color: #c00; - color: #fff; - text-align: left; - } - - p { - color: #333; - margin-bottom: 0px; - padding: $lineheight/4; - } -} - .search_form { background-color: $lightgrey; @@ -1393,14 +1195,6 @@ tr.turn:hover { .directions_form { background-color: $lightgrey; - - .loader_copy { - display: none; - - img { - vertical-align: middle; - } - } } /* Rules for user images */ @@ -1428,7 +1222,7 @@ abbr.geo { border-bottom: none; } -/* General styles for action lists / subnavs / pager navs */ +/* General styles for action lists / subnavs */ nav.secondary-actions { @@ -1441,10 +1235,6 @@ nav.secondary-actions { margin-bottom: 0; margin-left: -1px; padding: 0; - &.pager { - display: inline-block; - margin-right: 60px; - } > li { flex-basis: auto; list-style: none; @@ -1461,60 +1251,6 @@ div.secondary-actions { text-align: center; } -.buttons { - min-width: 200px; - input[type="submit"], - input[type="button"], - input[type="reset"], - .button, - .button_to { - box-sizing: border-box; - float: left; - border-radius: 0; - margin:0; - min-width: 75px; - max-width: 180px; - border-right:1px solid white; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - input:first-child, - .button:first-child, - .button_to:first-child { - border-radius:2px 0 0 2px; - } - input:last-child, - .button:last-child, - .button_to:last-child { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - input:only-child, - .button:only-child, - .button_to:only-child, - *[value="Hide"] + input:last-child, - *[value="Hide"] + .button:last-child, - *[value="Hide"] + .button_to:last-child { - border-radius:2px; - border-right-width: 0; - } - /* if a 3-button set has a hidden middle button */ - *[value="Hide"] + input:nth-child(3), - *[value="Hide"] + .button:nth-child(3), - *[value="Hide"] + .button_to:nth-child(3) { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - /* if a 3-button set starts with a hidden button */ - *[value="Hide"] + input:nth-child(2):not(:last-child), - *[value="Hide"] + .button:nth-child(2):not(:last-child), - *[value="Hide"] + .button_to:nth-child(2):not(:last-child) { - border-radius:2px 0 0 2px; - border-right-width: 1px; - } -} - /* Create a single-line dl */ dl.dl-inline { @@ -1526,13 +1262,6 @@ dl.dl-inline { } } -/* Rules for OpenID logo */ - -.openid_logo { - vertical-align: text-bottom; - border: 0; -} - /* Rules for rich text */ .richtext, @@ -1591,15 +1320,6 @@ dl.dl-inline { display: block; } - .icon-list { - padding-bottom: 20px; - div { - margin-bottom: 10px; - p { - padding-top: 10px; - } - } - } .sprite.small { width: 50px; height: 50px; @@ -1646,10 +1366,6 @@ dl.dl-inline { .site-about #content { background-color: $lightgrey; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; .content-inner { max-width: 760px; @@ -1687,8 +1403,6 @@ dl.dl-inline { .icon { width: 30px; height: 30px; - margin-right: 10px; - vertical-align: middle; background: 40px 40px image-url('about/sprite.png') no-repeat; &.local {