X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/e08a9979043b50fcde403a31ddca2d11ee07f518..387d130e87b79cb428f7554c1a233de5d0627ae9:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 9ec7fb3f4..5a197d9b1 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -145,7 +145,7 @@ header { nav.primary { .btn-outline-primary { - @include button-outline-variant($green, $white); + @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } .disabled { @@ -190,21 +190,18 @@ nav.secondary { .login-menu { .btn-outline-secondary { - @include button-outline-variant($darkgrey, $white, null, null, $white); + @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white); } } .user-menu { .btn-outline-secondary { - @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); + @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey); border-color: $grey; &:hover { border-color: $grey; } } - &.show .btn-outline-secondary { - background-color: white; - } } #inboxanchor { @@ -245,6 +242,95 @@ body.compact-nav { } } +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; + } +} + /* Utility for styling notification numbers */ .count-number { @@ -272,8 +358,6 @@ body.compact-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, @@ -292,26 +376,18 @@ body.compact-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 */ @@ -424,21 +500,35 @@ body.compact-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; +@include media-breakpoint-down(md) { + body.map-layout { + #sidebar, #map { + position: relative; + overflow-x: hidden; + width: 100%; + height: 50%; } - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; + #map-ui { + z-index: 9999; + width: 100%; + height: 50%; + overflow-y: scroll; + } + + .overlay-sidebar { + #sidebar { + position: absolute; + width: 350px; + height: auto; + overflow: hidden; + } + + #map, #map-ui { + height: 100%; } } } @@ -502,31 +592,6 @@ body.compact-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; } @@ -616,21 +681,6 @@ body.compact-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 { @@ -650,15 +700,15 @@ legend { reconsider our colours at some point with that in mind. */ .btn-primary { - @include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white); + @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); } .btn-secondary { - @include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white); + @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); } .btn-outline-secondary { - @include button-outline-variant($secondary, $white, null, null, $white); + @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white); } /* Rules for the search and direction forms */ @@ -688,7 +738,6 @@ header .search_forms, .search_more .loader { display: none; - width: 100%; } } @@ -745,10 +794,13 @@ tr.turn:hover { #sidebar .changesets { li { - cursor: pointer; - &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ + + a.stretched-link > span, a:not(.stretched-link), [title] { + position: relative; + z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */ + } } .comments { @@ -988,6 +1040,10 @@ tr.turn:hover { [dir=rtl] .header-illustration { transform: scaleX(-1); + + h1 { + transform: scaleX(-1); + } } #content.maximised { @@ -1025,7 +1081,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; } } @@ -1138,16 +1194,6 @@ tr.turn:hover { 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 { @@ -1274,14 +1320,6 @@ tr.turn:hover { .directions_form { background-color: $lightgrey; - - .loader_copy { - display: none; - - img { - vertical-align: middle; - } - } } /* Rules for user images */ @@ -1309,7 +1347,7 @@ abbr.geo { border-bottom: none; } -/* General styles for action lists / subnavs / pager navs */ +/* General styles for action lists / subnavs */ nav.secondary-actions { @@ -1322,10 +1360,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; @@ -1342,60 +1376,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 { @@ -1472,15 +1452,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; @@ -1527,10 +1498,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; @@ -1568,8 +1535,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 { @@ -1600,9 +1565,3 @@ dl.dl-inline { } @import 'browse'; - -@media only screen and (max-width:960px) { - .header-illustration.new-user-arm { - display: none; - } -}