diff options
Diffstat (limited to 'web/cobrands/sass/_layout.scss')
| -rw-r--r-- | web/cobrands/sass/_layout.scss | 241 |
1 files changed, 147 insertions, 94 deletions
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index a0c27863e..1d1ecf205 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -1,6 +1,5 @@ @import "_mixins"; -$image-sprite: '../fixmystreet/images/sprite.png' !default; $layout_front_stats_color: $primary !default; $mappage-header-height: 4em !default; // eg: might want this to equal outer height of #site-header on normal pages $mappage-sidebar-width: 29em; @@ -586,7 +585,8 @@ body.authpage { #fms_pan_zoom_panleft, #fms_pan_zoom_panright, #fms_pan_zoom_zoomin, -#fms_pan_zoom_zoomout { +#fms_pan_zoom_zoomout, +.big-hide-pins-link { opacity: 0.85; &:hover { opacity: 1; @@ -613,31 +613,95 @@ body.authpage { #sub_map_links { #{$left}: auto; bottom: 2em; - #map_links_toggle { - display:block; - cursor: pointer; - position:absolute; - #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */ - width: 1em; - height:100%; - background:#000 inline-image("../fixmystreet/images/triangle-grey-#{$right}.svg") 50% 50% no-repeat; - @include border-radius(flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0)); +} + +// Show the extra button if there is vertical space. +@media (min-height: 450px) { + .big-hide-pins-link { + $fms_pan_zoom_top: 8px; + $fms_pan_zoom_right: 8px; + $fms_pan_zoom_zoomout_top: 174px; + $fms_pan_zoom_zoomout_right: 30px; + $fms_pan_zoom_zoomout_height: 44px; + $gap: 22px; + + display: block; + position: absolute; + top: $fms_pan_zoom_top + $fms_pan_zoom_zoomout_top + $fms_pan_zoom_zoomout_height + $gap; + right: $fms_pan_zoom_right + $fms_pan_zoom_zoomout_right; + border-radius: 5px; + color: #fff; + width: 36px; + height: 0; + padding-top: 36px; + overflow: hidden; + + background: #222; + background-size: 36px 36px; + background-repeat: no-repeat; + background-position: 100% 0; + @include svg-background-image('/cobrands/fixmystreet/images/hide-pins-link'); + &:hover { - #{$left}: -1.5em; - //use border so we don't have to redefine the background-position - border-#{$right}: 0.5em solid #000; - } - &.closed { - background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg"); + text-decoration: none; + color: #fff; + width: auto; + height: auto; + padding: 6px 40px 6px 10px; + overflow: visible; } } } -.iel8 #sub_map_links #map_links_toggle { - height: 1.75em; - background: #000 url('../fixmystreet/images/ie_sub_map_links_sprite.gif') center -143px no-repeat; - &.closed { - background-position: center -183px; + +#map_links_toggle { + display: block; + cursor: pointer; + position: absolute; + #{$left}: -1em; + width: 1em; + height: 100%; + border-radius: flip(0.25em 0 0 0.25em, 0 0.25em 0.25em 0); + background-color: #333; + + &:hover { + #{$left}: -1.2em; + width: 1.2em; + background-color: #000; + } + + &:after { + content: ""; + display: inline-block; + vertical-align: middle; + width: 6px; + height: 12px; + margin-#{$left}: ((16px - 6px) / 2); // horizontally centre in 16px wide parent + background-size: 96px 12px; + @include svg-background-image('/cobrands/fixmystreet/images/map-tools'); + } + + // Expanded arrow points towards edge of window. + // Closed arrow points away from edge of window. + @if ($right == 'right') { + + &:after { + background-position: -6px 0; + } + + &.closed:after { + background-position: 0 0; + } + + } @else { + + &:after { + background-position: 0 0; + } + + &.closed:after { + background-position: -6px 0; } + } } @@ -652,58 +716,6 @@ body.authpage { overflow: hidden; padding-top: 2em; - ul#key-tools { - border-top: 0.25em solid $primary; - margin: 0; - @include box-shadow(0 0 1em 1em #fff); - li { - border:none; - a, input[type=submit] { - font-size: 0.75em; - line-height: 18px; // match `body` - color:#666; - padding: flip(0.5em 1.5em 0.5em 0, 0.5em 0 0.5em 1.5em); - text-transform:none; - &.abuse { - background-image:url($image-sprite); - background-position: flip(right, -337px) -2935px; - } - &.feed { - background-image:url($image-sprite); - background-position: flip(right, -337px) -3074px; - } - &.share { - min-width: 5em; - background-image: url(/cobrands/fixmystreet/images/share.png); - background-position: flip(80%, 20%) 50%; - } - &.chevron { - border-#{$right}: solid 1em transparent; - padding-#{$right}: 0.5em; - background-position: $right 50%; - background-size: 12px 15px; - } - &.chevron.hover { - // Reset things that changed - border-#{$right}: none; - padding-#{$right}: 1.5em; - background-size: auto auto; - } - &.hover { - background-image: url($image-sprite); - background-position: flip(right, -337px) -1876px; - } - } - } - &.singleton { - li { - text-align: $right; - a { - padding-#{$right}: 3em; - } - } - } - } &.static { padding: 0 0 1em; position: static; @@ -711,6 +723,29 @@ body.authpage { } } +#key-tools { + border-top: 0.25em solid $primary; + margin: 0; + @include box-shadow(0 0 1em 1em #fff); + + li { + border-#{$right}: none; // undo border-right/left from _base.scss + + // Cancel centre alignment, if the *only child* in list. + &:first-child:last-child { + text-align: $right; + } + } + + a, button { + font-size: 0.75em; + line-height: 18px; // match `body` + color: #666; + padding: 0.5em; + text-transform: none; // undo uppercase from _base.scss + } +} + // If JS is disabled, these are still CSS positioned, so don't want behind shining through. #report-share, #report-updates-data { background-color: #fff; @@ -720,6 +755,14 @@ body.authpage { margin-bottom: 0; } +#loading-indicator { + height: 64px; + width: 64px; + background-color: rgba(0, 0, 0, 0.7); + // Reset the base left, as zoom buttons now elsewhere + left: 0.5em; +} + .big-green-banner { top: auto; margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375); @@ -750,23 +793,24 @@ body.authpage { border-#{$left}: 0.75em solid transparent; border-bottom: 0.75em solid #888; } - &#fixed { - padding-top:5em; - background-image:url($image-sprite); - background-position:-324px -326px; - background-repeat:no-repeat; - &:before { - border-bottom: 0.75em solid $col_fixed_label_dark; - } + } + + #fixed, + #closed { + padding-top: 48px; + padding-top: calc(1.5em + 32px); + background-image: url('/i/pin-flat-white-small.png'); + background-size: 24px 32px; + background-position: 50% 1em; + background-repeat:no-repeat; + &:before { + border-bottom: 0.75em solid $col_fixed_label_dark; } - &#closed { - padding-top:5em; - background-image:url($image-sprite); - background-position:-318px -326px; - background-repeat:no-repeat; - &:before { - border-bottom: 0.75em solid #666; - } + } + + #closed { + &:before { + border-bottom-color: #666; } } } @@ -904,6 +948,9 @@ textarea.form-error { background:none; } } + a#geolocate_link.loading { + border-right: none; + } } .ie7 #front-main { #postcodeForm { @@ -923,10 +970,16 @@ textarea.form-error { color: #222; border-top:0.25em solid $primary; padding-top:1em; - div { - big { - color: $layout_front_stats_color; - font-size: 3.2308em; + big { + color: $layout_front_stats_color; + font-size: 2em; + @media (min-width: 54em) { + // 54em roughly halfway between 48em and 62em + font-size: 2.5em; + } + @media (min-width: 62em) { + // container max-width 60em + 2em side padding + font-size: 3em; } } } |