diff options
18 files changed, 378 insertions, 352 deletions
diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 485f0ffc2..ecd729364 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -6,7 +6,6 @@ @import "../sass/h5bp"; @import "_colours"; -@import "../sass/mixins"; @import "compass"; @import "../sass/base"; @@ -16,9 +15,17 @@ #country_banner { display: none; - color: $primary_text; background: $primary; - p#international_message { margin: auto; padding: 0.5em 2em; max-width: 40em; text-align: center; } - #message_close { float: right; } + color: $primary_text; + background: $primary; + p#international_message { + margin: auto; + padding: 0.5em 2em; + max-width: 40em; + text-align: center; + } + #message_close { + float: $right; + } } #site-logo { @@ -56,11 +63,11 @@ padding-top: 0.4em; // extra padding between buttons and previous paragraph a { - float: left; - margin: 1em 0.6em 0 0; + float: $left; + margin: flip(1em 0.6em 0 0, 1em 0 0 0.6em); &:last-child { - margin-right: 0; + margin-#{$right}: 0; } } @@ -79,9 +86,9 @@ @include pie-clearfix; .goodies-preview { - float: right; - margin-left: 1em; - margin-right: -0.5em; + float: $right; + margin-#{$left}: 1em; + margin-#{$right}: -0.5em; } } diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 23f3c575d..fed24af53 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -98,11 +98,6 @@ body.mappage { ul#mysoc-menu { background: #515151; margin-top: -4px; - li a { - &#mysoc-logo { - background-position: 0px 15px; - } - } } } @@ -147,13 +142,13 @@ body.fullwidthpage { } a#geolocate_link { font-family: MuseoSans,Helmet,Freesans,sans-serif; - background: url(images/locate-me.png) no-repeat; + background: url(images/locate-me.png) $left 0 no-repeat; height: 34px; - padding-left: 24px; + padding-#{$left}: 24px; margin-top: 0.25em; @media only screen and (min-resolution: 320dpi), only screen and (-webkit-min-device-pixel-ratio: 2) { - background: url(images/locate-me@2.png) no-repeat; + background-image: url(images/locate-me@2.png); } } } @@ -222,13 +217,13 @@ body.twothirdswidthpage { list-style: none; padding: 0px; margin: 0px; - float:left; + float: $left; li { list-style: none; display: inline; margin: 0px; padding: 0px; - float:left; + float: $left; a, span { display: block; @@ -244,7 +239,7 @@ body.twothirdswidthpage { display: block; } #footer-help-nav { - float: right; + float: $right; } } } @@ -256,13 +251,13 @@ body.twothirdswidthpage { .next-steps__step { font-family: MuseoSans,Helmet,Freesans,sans-serif; - float: left; + float: $left; width: 33%; padding: 1.8em; & + .next-steps__step { border-top: none; - border-left: 1px solid #ede8c9; + border-#{$left}: 1px solid #ede8c9; } h2 { @@ -316,9 +311,9 @@ body.unresponsive-council { .unresponsive-council-cta { margin: 1.5em 0; max-width: 20em; - padding-right: 6em; + padding-#{$right}: 6em; background-image: url(images/unresponsive-council-cta-arrow.png); - background-position: right center; + background-position: $right center; background-repeat: no-repeat; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { diff --git a/web/cobrands/fixmystreet.com/posters.scss b/web/cobrands/fixmystreet.com/posters.scss index 8c4f0c1ed..ee8da9d32 100644 --- a/web/cobrands/fixmystreet.com/posters.scss +++ b/web/cobrands/fixmystreet.com/posters.scss @@ -1,4 +1,5 @@ @import "_colours"; +@import "../sass/mixins"; body.goodies { .content { @@ -23,14 +24,14 @@ body.goodies { } .pack-preview { - float: right; - margin: 0 0 1em 1em; + float: $right; + margin: flip(0 0 1em 1em, 0 1em 1em 0); max-width: 33%; } .download-button { display: inline-block; - padding: 0.7em 1.2em 0.5em 1.2em; + padding: 0.7em 1.2em 0.5em; font-weight: bold; line-height: 1em; background-color: $primary; @@ -43,19 +44,19 @@ body.goodies { width: 16px; height: 16px; background: transparent url(images/arrow-down-16px-16px.png) 0 0 no-repeat; - margin-right: 0.5em; + margin-#{$right}: 0.5em; vertical-align: -0.1em; } } .badge-preview { - float: right; + float: $right; margin-top: -3em; - margin-left: 1em; + margin-#{$left}: 1em; } .downloads { - margin-left: 0; + margin-#{$left}: 0; li { list-style: none; @@ -89,7 +90,7 @@ body.goodies { overflow: auto; li { - float: left; + float: $left; width: 50%; } @@ -100,7 +101,7 @@ body.goodies { li:nth-child(even) { width: 48%; - float: right; + float: $right; } } } @@ -111,7 +112,7 @@ body.goodies { .container .content { // overloaded selector to match default .content styling width: auto; - padding: 1.5em 2em 1.5em 16em; + padding: flip(1.5em 2em 1.5em 16em, 1.5em 16em 1.5em 2em); & > :last-child { margin-bottom: 0; @@ -120,7 +121,7 @@ body.goodies { .content { .sticky-sidebar { - left: 0; + #{$left}: 0; top: 0; bottom: 0; z-index: 1; diff --git a/web/cobrands/fixmystreet/dashboard.scss b/web/cobrands/fixmystreet/dashboard.scss index ca862aaa4..fb4fd7a8a 100644 --- a/web/cobrands/fixmystreet/dashboard.scss +++ b/web/cobrands/fixmystreet/dashboard.scss @@ -1,3 +1,5 @@ +@import "../sass/_mixins"; + select { width: auto; } @@ -15,17 +17,18 @@ } th { - text-align:left; + text-align: $left; &[scope=col] { - border-left:1px solid #ccc; - padding:10px 0 10px 10px; - font-weight:bold; + border-#{$left}: 1px solid #ccc; + padding: flip(10px 0 10px 10px, 10px 10px 10px 0); + font-weight: bold; } &[scope=row] { - font-weight: normal;text-align:left; - border-top:1px solid #ddd; - padding-left:10px; + font-weight: normal; + text-align: $left; + border-top: 1px solid #ddd; + padding-#{$left}: 10px; } abbr[title] { @@ -35,9 +38,9 @@ td { width:10%; - border-left:1px solid #ccc; - border-top:1px solid #ddd; - padding-left:10px; + border-#{$left}: 1px solid #ccc; + border-top: 1px solid #ddd; + padding-#{$left}: 10px; } tr.subtotal { @@ -54,7 +57,7 @@ #reports{ th { - padding-left: 20px; + padding-#{$left}: 20px; border-bottom: none; } date { @@ -70,7 +73,7 @@ padding:0 1em; p { - float:left; + float: $left; padding:0 1em; width:25%; font-size:0.75em; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index fc09ea84a..30a6ac7cd 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -127,7 +127,7 @@ $(function(){ } //show/hide notes on mobile - $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">' + translation_strings.how_to_send + '</a>').hide(); + $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide(); $('.rap-notes-trigger').click(function(e){ e.preventDefault(); //check if we've already moved the notes @@ -138,7 +138,7 @@ $(function(){ }else{ //if not, move them and show, hiding .content $('.content').after('<div class="content rap-notes"></div>').hide(); - $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">' + translation_strings.back + '</a>'); + $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-back">' + translation_strings.back + '</a>'); } $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top); location.hash = 'rap-notes'; diff --git a/web/cobrands/fixmystreet/images/chevron-grey-left.svg b/web/cobrands/fixmystreet/images/chevron-grey-left.svg new file mode 100644 index 000000000..650eeac26 --- /dev/null +++ b/web/cobrands/fixmystreet/images/chevron-grey-left.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> + <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#d1d1d1"/> +</svg> diff --git a/web/cobrands/fixmystreet/images/chevron-grey-right.svg b/web/cobrands/fixmystreet/images/chevron-grey-right.svg new file mode 100644 index 000000000..18432eb3b --- /dev/null +++ b/web/cobrands/fixmystreet/images/chevron-grey-right.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> + <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#d1d1d1"/> +</svg> diff --git a/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif b/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif Binary files differnew file mode 100644 index 000000000..e8e6f79d8 --- /dev/null +++ b/web/cobrands/fixmystreet/images/chevron-white-left-on-green.gif diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg new file mode 100644 index 000000000..95f9fd8a8 --- /dev/null +++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> + <polygon points="26,0 13,0 0,16 13,32 26,32 13,16" fill="#ffffff"/> +</svg> diff --git a/web/cobrands/fixmystreet/images/ie_green_chevron.gif b/web/cobrands/fixmystreet/images/chevron-white-right-on-green.gif Binary files differindex 341ac1eeb..341ac1eeb 100644 --- a/web/cobrands/fixmystreet/images/ie_green_chevron.gif +++ b/web/cobrands/fixmystreet/images/chevron-white-right-on-green.gif diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg new file mode 100644 index 000000000..43f321782 --- /dev/null +++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="33"> + <polygon points="0,0 13,0 26,16 13,32 0,32 13,16" fill="#ffffff"/> +</svg> diff --git a/web/cobrands/fixmystreet/images/triangle-grey-left.svg b/web/cobrands/fixmystreet/images/triangle-grey-left.svg new file mode 100644 index 000000000..26ea59a23 --- /dev/null +++ b/web/cobrands/fixmystreet/images/triangle-grey-left.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7"> + <polygon points="3,0 0,3 3,6" fill="#f1f1f1"/> +</svg> diff --git a/web/cobrands/fixmystreet/images/triangle-grey-right.svg b/web/cobrands/fixmystreet/images/triangle-grey-right.svg new file mode 100644 index 000000000..8ea307b21 --- /dev/null +++ b/web/cobrands/fixmystreet/images/triangle-grey-right.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="4" height="7"> + <polygon points="0,0 3,3 0,6" fill="#f1f1f1"/> +</svg> diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss index a668712ae..b7c208773 100644 --- a/web/cobrands/sass/_admin.scss +++ b/web/cobrands/sass/_admin.scss @@ -23,8 +23,8 @@ $button_bg_col: #a1a1a1; // also search bar (tables) color: white; background-color: $table_heading_bg_col; border-bottom: 2px solid $table_heading_underline_col; - border-left: 1px solid $table_heading_border_col; - border-right: 1px solid $table_heading_border_col; + border-#{$left}: 1px solid $table_heading_border_col; + border-#{$right}: 1px solid $table_heading_border_col; a:link, a:visited { color: white; } @@ -35,10 +35,10 @@ $button_bg_col: #a1a1a1; // also search bar (tables) } tr.filter-row td { display: none; /* TODO: reveal when filtering is implemented */ - padding: 4px 4px 4px 40px; + padding: flip(4px 4px 4px 40px, 4px 40px 4px 4px); background-color: $button_bg_col; background-image: url('search-icon-white.png'); - background-position: 14px center; + background-position: flip(14px, right) center; background-repeat: no-repeat; border-bottom: 2px solid $table_border_color; } @@ -57,7 +57,7 @@ $button_bg_col: #a1a1a1; // also search bar (tables) } } .no-bullets { - margin-left: 0; + margin-#{$left}: 0; > li { list-style: none; } @@ -78,7 +78,7 @@ $button_bg_col: #a1a1a1; // also search bar (tables) font-size: 90%; border-style: solid; border-width: 1px; - border-left-width: 1em; + border-#{$left}-width: 1em; margin-bottom: 1em; } .fms-admin-warning { @@ -98,10 +98,10 @@ $button_bg_col: #a1a1a1; // also search bar (tables) font-size: 80%; // little question marks are small cursor: pointer; display: block; - float:left; + float: $left; overflow: hidden; padding: 0.2em; - margin-right: 0.666em; + margin-#{$right}: 0.666em; text-align: center; color: #fff; font-weight: bold; @@ -115,7 +115,7 @@ $button_bg_col: #a1a1a1; // also search bar (tables) &:before { content: "?" } &.admin-hint-show { font-size: 90%; - text-align: left; + text-align: $left; display: block; float:none; margin:1em 0; @@ -128,7 +128,7 @@ $button_bg_col: #a1a1a1; // also search bar (tables) color: #000; border-style: solid; border-width: 1px; - border-left-width: 1em; + border-#{$left}-width: 1em; border-color: #f93; padding:1em; margin: 0; @@ -136,9 +136,9 @@ $button_bg_col: #a1a1a1; // also search bar (tables) } } .admin-offsite-link { - padding-right: 12px; + padding-#{$right}: 12px; background-image: url(../../i/external-link.png); - background-position: right top; + background-position: $right top; background-repeat: no-repeat; } } diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 32626d1d7..a660bf928 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -6,6 +6,8 @@ $heading-font: 'Museo300-display', MuseoSans, Helmet, Freesans, sans-serif !defa $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default; $menu-image: 'menu-white' !default; +@import "_mixins"; + body { font-family: $body-font; margin:0; @@ -19,7 +21,7 @@ body { p { font-size: 1em; font-weight: normal; - margin:0 0 1em 0; + margin: 0 0 1em; } small{ @@ -72,7 +74,7 @@ h4 { ul, ol { font-size: 1em; margin-bottom: 2em; - margin-left: 2em; + margin-#{$left}: 2em; padding:0; } @@ -97,13 +99,13 @@ ol.big-numbers { > li { position: relative; list-style: none; - padding:0 0 0 2.5em; + padding: flip(0 0 0 2.5em, 0 2.5em 0 0); margin-bottom:2em; &:before { content: counter(li); // set the content to be whatever the 'li' var is counter-increment: li; // add to the counter var position: absolute; - left: 0; + #{$left}: 0; top:-0.2em; color:#ccc; line-height:1; @@ -127,7 +129,7 @@ dl { dd { font-weight: 1em; line-height: 1.5em; - margin:0 0 1em 0; + margin: 0 0 1em; } } @@ -296,14 +298,14 @@ label{ font-weight: bold; &.inline{ display: inline; - padding: 0 2em 0 1em; + padding: flip(0 2em 0 1em, 0 1em 0 2em); font-weight: normal; } } // grey background, full width box .form-box { - margin: 0 -1em 0.25em -1em; + margin: 0 -1em 0.25em; background: #eee; padding: 1em; > input[type=text], input[type=email] { @@ -321,7 +323,7 @@ label{ } strong { font-size:2em; - margin-right:0.25em; + margin-#{$right}: 0.25em; } } } @@ -329,21 +331,22 @@ label{ // the password box falls off screen for some reason. Just have boring margins, // it looks okay. .ie6 .form-box { - margin: 0 0 0.25em 0; + margin: 0 0 0.25em; padding: 1em; } // Prevent grey displaying oddly by giving it a width, and stop odd left margin issue .ie7 .form-box { width: 100%; > input[type=text], input[type=email] { - margin-left: 2em; + margin-#{$left}: 2em; } } .change_location { color: #666; - padding-left: 24px; - background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) 4px 50% no-repeat; + padding-#{$left}: 20px; + background: transparent url(/cobrands/fixmystreet/images/wrong-location.png) $left 50% no-repeat; + border-#{$left}: solid 4px #fff; margin-top: -0.5em; } @@ -353,12 +356,12 @@ label{ input[type=text], input[type=email] { width: 65%; - float:left; + float: $left; } input[type=submit] { - float:right; + float: $right; width:28%; - margin-right:0.25em; + margin-#{$right}: 0.25em; padding-top:0.7em; padding-bottom:0.6em; } @@ -443,7 +446,7 @@ p.label-valid { width: 175px; height: 40px; top: 0.4em; - left: 0.5em; + #{$left}: 0.5em; background: url($image-sprite) -3px -3px no-repeat; text-indent: -999999px; position: absolute; @@ -458,12 +461,12 @@ p.label-valid { width: 3em; height: 3em; // same height as #site-header background: transparent url(/cobrands/fixmystreet/images/#{$menu-image}.png) center center no-repeat; - background-image: url(/cobrands/fixmystreet/images/#{$menu-image}.svg), none; + background-image: inline-image("../fixmystreet/images/#{$menu-image}.svg"), none; background-size: 22px 18px; display: block; text-indent: -999999px; position: absolute; - right: 0; + #{$right}: 0; top: 0.25em; // same as border-top on #site-header } @@ -472,7 +475,7 @@ p.label-valid { display: block; position: absolute; top: (3em / 2); // half the height of #site-header - right: 3.5em; + #{$right}: 3.5em; margin-top: -0.5em; font-size: 0.9em; @@ -516,7 +519,8 @@ p.label-valid { color: $primary_text; background: $primary; &#mysoc-logo { - background-position: 20px 13px; + background-origin: content-box; + background-position: $left 3px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAYCAYAAAArrNkGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABBtJREFUaN7tmT2u1DAQx/cIPgBCQUJCICH5BuQIPkIq6hzBB0AyiAP4ABQ5ghtEm54mEtVrICUNkpmsJjBvdvyR1S7hPa2lv1aJs5PEP894xjkc/tMWY+xADhRQA8iC9I7PtD6PP9xa9aC1oCnmm9lpgtHW3WiVB03HuqYeA9DlPZbJuXj8o5wgGM5os+ixLb74MeTt+Hz+kiGXva99jEDjJV7w+5Pn3aIHNoEvB/Tu7s6iejzuQAEUQRPIgxT2KTwesX+5rkvYs7yP2KDXLN7XXCKkAUgHiii3MaQuideI9x/x2GB/gxFjVZMIoY6AmtBGJ+QJluUKgdheI1LpfveuoQMciTw7XrUAbEFzot8Re4GcnwWghv23Ezx0PiejBYiBAA0/Pz7VoOV3AKnEup1LwhyBQFsr2Jkzdjy51hZyBIuwaOuFZ6fPPaaA5jQX+hvi4fS8YUC9BBzXqJOB4INXAGpAM8oAxBEUUbYSQiCD1ZWACnZGhDJIUacGaBbY34ghAxfAdHheCxBHAs6yvp7YpP/zDOgk9WHIGhMvOZ5TrjCgfUUSptigqQqg1M7A7kHhTVvWUAF8Q/r6ZObPQy4bfMf62wycoeSFOEmoPS2sQ74mdFUC1RhuHQ25QonkKurjE6CCpzTC+9CmNwBNeiHz/oGvabnweG+9E9ZDul6GDDiD53tybsoMYIMJhhQSjy/28YVzoAgKoGRt+uvHMwUaQRHkS7N/I1AjhGuuGs+2ifsOPOwKk6TLAeUe2J4DFPtG7vnsnK3MQPngTwg0ErUZoC3CPEqyWbmDJQG1cVvbCpRPmIadm6Wy5VpAeXKkpCRqQ1F/DwBAnAlQnQHaEKDzlYGGgvQWoEJy1LOx8P8SqOLJEU2uNhbhvQC0AVn76n3/9vWHpIe++/Km/fxVL17aL3ATSYU5E2h77rbkBqA2kYFHsbS7FlAhOTrJpIXwkirYRynMAEgDiignwHSgiGozCceUg5EBqs5N2hhQX8gnpDaldoquCVQn6lmV2foLbJdkSmWkANESoNPLT98UyKMUgbnIFsqWGRMxQ0JbW1G2eCHsdmQferWlMwlPxHuLnwiFa9NefU2gQiJ0UholBixm6lGV8lAEGVFDykMr6l5e5OeA1tg5ASB8wcmVMEa4rtkLqM3VnqQuDJnBmHnhT6A2oKPNBSIFuq6hoCbzCatY91Zs/ZXspED5Ws+rDu0IbZUSEps//YmQuvbrCg8NFd8I1zBl8bd66w8galBA6Q3rmWKb3YZlpIqE0Da13pLrVjtd6flxMtP7qorvse1hjyYkRfs8yMP/8E83WMIeII2wdrobnk0gG6HOnUu7WteAqRKf39QN0yagTlhf9/lwz9fNG8yzgBrmmWa3h8Ftv0HaQLi1TYlaSGX3UvsNzdBKw+waoEEAAAAASUVORK5CYII='); background-repeat:no-repeat; text-indent:-999999px; @@ -545,10 +549,10 @@ p.label-valid { position: relative; color: $primary_text; background: $primary; - padding:1em 6em 1em 1em; + padding: flip(1em 6em 1em 1em, 1em 1em 1em 6em); a { position: absolute; - right:1em; + #{$right}: 1em; @include inline-block; text-transform:uppercase; font-size:0.75em; @@ -573,9 +577,9 @@ p.label-valid { display: table-cell; vertical-align: bottom; text-align: center; - border-right:0.25em solid #fff; + border-#{$right}: 0.25em solid #fff; &:last-child { - border-right:none; + border-#{$right}: none; } input[type=submit] { width: 100%; @@ -586,7 +590,7 @@ p.label-valid { background-color: #f5f5f5; background-repeat: no-repeat; color:#333; - padding:4em 2em 1em 2em; + padding:4em 2em 1em; text-transform:uppercase; font: { size:0.6875em; @@ -610,8 +614,9 @@ p.label-valid { background-position: center 25%; } &.chevron { - background-image:url($image-sprite); - background-position:center -2716px; + background-image: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg"); + background-position: center 25%; + background-size: 20px 25px; } &.hover { background-image:url($image-sprite); @@ -628,10 +633,10 @@ p.label-valid { ul#key-tools{ background:#f5f5f5; li{ - float:left; + float: $left; a { - padding-left:1.5em; - padding-right:3em; + padding-#{$left}: 1.5em; + padding-#{$right}: 3em; } } } @@ -640,23 +645,25 @@ p.label-valid { .ie6 .shadow-wrap ul#key-tools li a { &.abuse { background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); - background-position: right 0px; + background-position: $right 0px; } &.feed { background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); - background-position: right -58px; - } - &.chevron { - background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); - background-position: right -116px; + background-position: $right -58px; } &:hover { background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif'); } } +.iel8 { + .shadow-wrap ul#key-tools li a.chevron { + background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif'); + background-position: $right -116px; + } +} #report-updates-data img { - float: right; + float: $right; } #report-share iframe { @@ -670,7 +677,7 @@ footer { #footer-mobileapps { @extend .full-width; - padding:1em 1em 0 1em; + padding: 1em 1em 0; h4 { margin:0; } @@ -690,7 +697,7 @@ footer { border-bottom:none; } h4 { - margin:0.75em 0 0.25em 0; + margin:0.75em 0 0.25em; } p { font-size:0.75em; @@ -723,14 +730,20 @@ input.red-btn{ .final-submit, input.final-submit { - margin:1em 0.5em; - float:right; + margin: 1em 0.5em; + float: $right; } -.button-right, -.button-left, -a.button-right, -a.button-left { +.button-fwd { + padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em); + background: inline-image("../fixmystreet/images/chevron-grey-#{$right}.svg") $right 50% no-repeat; +} +.button-back { + padding: flip(1em 1em 1em 3em, 1em 3em 1em 1em); + background: inline-image("../fixmystreet/images/chevron-grey-#{$left}.svg") $left 50% no-repeat; +} +.button-fwd, +.button-back { @include inline-block; cursor:pointer; font-size: 1em; @@ -738,33 +751,27 @@ a.button-left { margin:0; border:1px solid #999; color:#333; - background: #eee; + background-color: #eee; + background-size: 20px+16px 25px; @include border-radius(4px); &:hover{ color:#fff; - background:#777; + background-color: #777; text-decoration: none; border:1px solid #666; } } -.button-right, -a.button-right, -:hover.button-right, -a:hover.button-right { - padding:1em 3em 1em 1em; - background-image: url($image-sprite); - background-repeat:no-repeat; - background-position:right -686px; -} - -.button-left, -a.button-left, -:hover.button-left, -a:hover.button-left { - padding:1em 1em 1em 3em; - background-image: url($image-sprite); - background-repeat:no-repeat; - background-position:-18px -802px; +.iel8 { + .button-fwd, .button-back { + background-image: url($image-sprite); + background-repeat: no-repeat; + } + .button-fwd { + background-position: right -686px; + } + .button-back { + background-position: -18px -802px; + } } .big-green-banner { @@ -780,12 +787,12 @@ a:hover.button-left { font-size:0.875em; &:before { content: ""; - left:-0.5em; + #{$left}: -0.5em; top:0; position: absolute; width: 0; height: 0; - border-left: 0.5em solid transparent; + border-#{$left}: 0.5em solid transparent; border-bottom: 0.5em solid $col_click_map_dark; } } @@ -795,7 +802,7 @@ a:hover.button-left { p { position: absolute; top:-1.95em; - right:0; + #{$right}: 0; @include inline-block; font-size:0.6875em;//11px line-height:1em; @@ -809,12 +816,12 @@ a:hover.button-left { } &:before { content: ""; - left:-0.5em; + #{$left}: -0.5em; top:0; position: absolute; width: 0; height: 0; - border-left: 0.5em solid transparent; + border-#{$left}: 0.5em solid transparent; border-bottom: 0.5em solid #888; } &#fixed { @@ -837,13 +844,13 @@ a:hover.button-left { } .issue-list{ - margin: 0 0 1em 0; + margin: 0 0 1em; padding: 0; border-bottom: 0.25em solid $primary; li{ list-style: none; background: #f6f6f6; - margin: 0.25em 0 0 0; + margin: 0.25em 0 0; padding: 0.5em 1em; display:block; .update-wrap { @@ -853,21 +860,21 @@ a:hover.button-left { margin-bottom: 0.5em; } .update-img { - float: right; - margin: 0.5em 0 0.5em 1em; // gutter between text and floated image + float: $right; + margin: flip(0.5em 0 0.5em 1em, 0.5em 1em 0.5em 0); // gutter between text and floated image } } } .issue-list-a { - margin: 0 0 1em 0; + margin: 0 0 1em; padding: 0; border-bottom: 0.25em solid $primary; li { list-style: none; margin:0; padding:0; - margin: 0.25em 0 0 0; + margin: 0.25em 0 0; /* see note below about this */ display:table; background: #f6f6f6; @@ -892,27 +899,27 @@ a:hover.button-left { display: table-cell; width: 100%; vertical-align:top; - padding: 0px 0px 0px 1em; + padding: flip(0 0 0 1em, 0 1em 0 0); .img { width: 90px; - float: right; + float: $right; height:auto; } h4 { - padding-right: 1em; + padding-#{$right}: 1em; padding-top: 0.25em; margin:0; } small { color:#666; display: block; - padding-right: 1em; + padding-#{$right}: 1em; padding-top: 0.25em; padding-bottom: 0.25em; } } >p { - margin: 0.25em 0 0 0; + margin: 0.25em 0 0; padding: 0.5em 1em; background: #f6f6f6; } @@ -935,7 +942,7 @@ a:hover.button-left { display:block; overflow:hidden; .text { - float:left; + float: $left; } } } @@ -955,7 +962,7 @@ a:hover.button-left { span { position:absolute; top:0; - right:0; + #{$right}: 0; display:block; width:20px; height:20px; @@ -975,8 +982,8 @@ a:hover.button-left { margin-bottom:1em; } .problem-header .update-img { - float: right; - margin-left: 0.5em; + float: $right; + margin-#{$left}: 0.5em; margin-bottom: 0.5em; } @@ -1011,13 +1018,13 @@ a:hover.button-left { // OpenLayers fix for navigation being top right // Left and right so that zoom can be left, pan right. #fms_pan_zoom { - right: 0.5em !important; top: 0.5em; - left: 0.5em !important; + #{$left}: 0.5em !important; + #{$right}: 0.5em !important; } // The left and right of the above causes the navigation to move off-screen left in IE6. .ie6 #fms_pan_zoom { - left: auto !important; + #{$left}: auto !important; } // Openlayers map controls (overrides) @@ -1029,7 +1036,7 @@ a:hover.button-left { #fms_pan_zoom_zoomout { width:36px !important; height:36px !important; - text-indent:-999999px; + text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary background:url($image-sprite) no-repeat; filter: none !important; // Override OpenLayers PNG handling of the navigation } @@ -1041,48 +1048,48 @@ a:hover.button-left { #fms_pan_zoom_panup { background-position:-42px -222px; - right:30px !important; - left: auto !important; + #{$right}: 30px !important; + #{$left}: auto !important; top:0 !important; } #fms_pan_zoom_pandown { background-position:-42px -282px; - right:30px !important; - left: auto !important; + #{$right}: 30px !important; + #{$left}: auto !important; top:72px !important; } #fms_pan_zoom_panleft { background-position:-12px -252px; width:48px !important; - right:48px !important; - left: auto !important; + #{$right}: flip(48px, 0) !important; + #{$left}: auto !important; top:36px !important; } #fms_pan_zoom_panright { background-position:-60px -252px; width:48px !important; - right:0 !important; - left: auto !important; + #{$right}: flip(0, 48px) !important; + #{$left}: auto !important; top:36px !important; } #fms_pan_zoom_zoomin { background-position:-152px -223px; height:44px !important; - left:0 !important; + #{$left}: 0 !important; top:0 !important; } #fms_pan_zoom_zoomout { background-position:-152px -259px; height:44px !important; - left:0 !important; + #{$left}: 0 !important; top:44px !important; } //hide pins, show old reports etc #sub_map_links { position: absolute; - left: 0; - right:0; + #{$left}: 0; + #{$right}: 0; bottom: 0; background:#333; background:rgba(0, 0, 0, 0.7); @@ -1091,23 +1098,23 @@ a:hover.button-left { @include inline-block; font-size:0.6875em; color:#fff; - padding:0.6em 3em 0.5em 1em; + padding: flip(0.6em 3em 0.5em 1em, 0.6em 1em 0.5em 3em); background-repeat:no-repeat; &#hide_pins_link { background-image:url($image-sprite); - background-position: right -3976px; + background-position: flip(right, -341px) -3976px; } &#all_pins_link { background-image:url($image-sprite); - background-position: right -4022px; + background-position: flip(right, -337px) -4022px; } &#map_permalink { background-image:url($image-sprite); - background-position: right -4070px; + background-position: flip(right, -341px) -4070px; } &.feed { background-image:url($image-sprite); - background-position: right -3936px; + background-position: flip(right, -341px) -3936px; } &:hover { background-color:#000; @@ -1119,15 +1126,15 @@ a:hover.button-left { .ie6 #sub_map_links a { &#hide_pins_link { background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); - background-position: right 1px; + background-position: $right 1px; } &#all_pins_link { background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); - background-position: right -45px; + background-position: $right -45px; } &#map_permalink { background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif'); - background-position: right -93px; + background-position: $right -93px; } } @@ -1158,7 +1165,7 @@ a:hover.button-left { a#try_again { position: absolute; display: block; - left: 25%; + left: 25%; // along with width of 50%, centres it bottom: 0; margin-bottom: 6em; background: rgba(0, 0, 0, 0.8); @@ -1167,7 +1174,7 @@ a:hover.button-left { a#mob_ok { position: absolute; display: block; - right: 1em; + #{$right}: 1em; bottom: 0; height: 20px; padding-top: 30px; @@ -1182,8 +1189,8 @@ a:hover.button-left { margin:0; position: absolute; top:0; - left:0; - right:0; + #{$left}: 0; + #{$right}: 0; font-size:0.75em; background:rgba(0, 0, 0, 0.7); padding:0.75em 30px; @@ -1196,15 +1203,15 @@ a:hover.button-left { line-height:1; padding:0.5em 0.75em; position:absolute; - left:0.3em; + #{$left}: 0.3em; top:0.3em; } } .olControlAttribution { bottom: 3.25em !important; - right: 0.25em !important; - left: 0.25em !important; + #{$right}: 0.25em !important; + #{$left}: 0.25em !important; color: #222222; font-size:0.75em !important; } @@ -1213,7 +1220,7 @@ a:hover.button-left { } .olControlPermalink { bottom: 3px !important; - right: 3px; + #{$right}: 3px; } /* Drag is only present in noscript form. XXX Copy from core. */ @@ -1245,8 +1252,8 @@ a.rap-notes-trigger, a:hover.rap-notes-trigger { display:block; width:90%; - padding-left:5%; - padding-right:5%; + padding-#{$left}: 5%; + padding-#{$right}: 5%; } .rap-notes { margin:1em 0; @@ -1263,9 +1270,9 @@ a:hover.rap-notes-trigger { width:100%; li { display:table-cell; - border-right:0.25em solid #fff; + border-#{$right}: 0.25em solid #fff; &:last-child { - border-right:none; + border-#{$right}: none; } a { display:block; @@ -1296,7 +1303,7 @@ a:hover.rap-notes-trigger { margin:0; padding:0; ul li { - float:left; + float: $left; } } } @@ -1319,16 +1326,17 @@ label .muted { ul { width: 49%; margin: 0; - float: left; + float: $left; font-size: 14px; line-height: 20px; } li { margin-bottom: 0; - padding-left: 20px; + padding-#{$left}: 16px; list-style: none; - background: transparent url(/cobrands/fixmystreet/images/tick-10px-8px.png) 4px 5px no-repeat; + background: transparent url(/cobrands/fixmystreet/images/tick-10px-8px.png) $left 5px no-repeat; + border-#{$left}: solid 4px #fff; } .do { @@ -1336,12 +1344,14 @@ label .muted { } .dont { - float: right; + float: $right; color: #881111; li { background-image: url(/cobrands/fixmystreet/images/cross-7px-7px.png); - background-position: 6px 6px; + background-position: $left 6px; + padding-#{$left}: 14px; + border-#{$left}: solid 6px #fff; } } } @@ -1382,7 +1392,7 @@ table.nicetable { } } .title { - text-align:left; + text-align: $left; } .data { width:12%; @@ -1400,7 +1410,7 @@ table.nicetable { .close-promo { position:absolute; top:0.5em; - right:0.5em; + #{$right}: 0.5em; display:block; width:16px; height:16px; @@ -1431,18 +1441,18 @@ table.nicetable { position:relative; .prev { position:absolute; - left:0.5em; + #{$left}: 0.5em; } .next { position:absolute; - right:0.5em; + #{$right}: 0.5em; } a { @include inline-block; color: $primary_text; background: $primary; - padding-left:0.5em; - padding-right:0.5em; + padding-#{$left}: 0.5em; + padding-#{$right}: 0.5em; &:hover { text-decoration:none; background:$primary/1.1; @@ -1584,7 +1594,7 @@ table.nicetable { background: #f6f6f6; } img[width="16"] { - float: right; + float: $right; } } diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index c04d9f1c1..ea85c0f13 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -78,7 +78,7 @@ h1 { .nav-wrapper { position: absolute; top:0; - left:0; + #{$left}: 0; width:100%; .nav-wrapper-2 { // position static as well so we fix lots of the z-index issues @@ -100,7 +100,7 @@ h1 { } #site-logo { top: 0.9em; - left: auto; + #{$left}: auto; position: absolute; z-index: 3; } @@ -120,8 +120,8 @@ h1 { } #nav-link, #report-cta { - right: auto; - left: -999999px; + #{$right}: auto; + #{$left}: -999999px; } #main-nav{ margin: 0 auto; @@ -131,13 +131,13 @@ h1 { list-style: none; padding: 0px; margin: 0px; - float:right; + float: $right; li{ list-style: none; display: inline; margin: 0px; padding: 0px; - float:left; + float: $left; a, span { display: block; @@ -175,7 +175,7 @@ h1 { } &#mysoc-menu{ padding: 0em 0.5em; - margin-left: 0.25em; + margin-#{$left}: 0.25em; background: $primary; @include border-radius(0 0 0.375em 0.375em); li{ @@ -184,12 +184,12 @@ h1 { color: $primary_text; text-transform: uppercase; font-size: 0.6875em; - padding: 1.3em 0.7em 1em 0.7em; + padding: 1.3em 0.7em 1em; &#mysoc-logo { width:84px; height:16px; background-size: 100px auto; - background-position: 0px 10px; + background-position: -8px 0px; opacity: 0.8; &:hover { opacity: 1; @@ -237,28 +237,28 @@ body.mappage { } .content { - float:left; + float: $left; padding: 1em 1em 10em; margin: 0; } #site-logo { - left: 12px; + #{$left}: 12px; } #main-nav { width: auto; - margin-right: 1em; + margin-#{$right}: 1em; } #main-nav ul#main-menu li a, #main-nav ul#main-menu li span { - padding: 1.4em 0.75em 1.35em 0.75em; + padding: 1.4em 0.75em 1.35em; } #main-nav ul#main-menu li a.report-a-problem-btn { padding: 0.5em; - margin:0.9em 0.25em 0.85em 0.25em; + margin: 0.9em 0.25em 0.85em; } .nav-wrapper{ @@ -278,9 +278,9 @@ body.mappage { display: block; height: auto; width: 22.2em; // 27em (.content width) - 2em (.content padding) - 6em - 0.8em - padding: 0.5em 6em 0.5em 0.8em; + padding: flip(0.5em 6em 0.5em 0.8em, 0.5em 0.8em 0.5em 6em); top: 0; - left: 0; + #{$left}: 0; z-index: 1; box-shadow: none; background: #FCEA9A; @@ -289,7 +289,7 @@ body.mappage { a { // move the "Sign out" link in and down a bit, because of extra padding on parent top: 0.8em; - right: 0.8em; + #{$right}: 0.8em; } } @@ -309,9 +309,9 @@ body.mappage { body.mappage { // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. .container { - float: left; + float: $left; width: 27em; - margin-left: 0.7em; + margin-#{$left}: 0.7em; } .nav-wrapper{ z-index:1; @@ -323,7 +323,7 @@ body.mappage { position: absolute; } #user-meta { - margin-left: 2em; + margin-#{$left}: 2em; } } } @@ -407,7 +407,7 @@ body.fullwidthpage { } #footer-mobileapps { a { - padding-left: 0.5em; + padding-#{$left}: 0.5em; } } h4 { @@ -426,7 +426,7 @@ body.fullwidthpage { text-indent: -1000%; height: 1.7em; width: 16em; - padding-right: 0.25em; + padding-#{$right}: 0.25em; } } } @@ -463,7 +463,7 @@ body.twothirdswidthpage { aside { background:#eee; position:absolute; - left:42em; + #{$left}: 42em; top:0; z-index: -1; width:13em; @@ -478,12 +478,12 @@ body.twothirdswidthpage { } .sticky-sidebar { position: absolute; - left:42em; + #{$left}: 42em; z-index: -1; aside { position: fixed; top:7em; - left:auto; + #{$left}: auto; } } } @@ -493,7 +493,7 @@ body.twothirdswidthpage { position:static; aside { position:absolute; - left:42em; + #{$left}: 42em; top:0; } } @@ -504,7 +504,7 @@ body.twothirdswidthpage { .tablewrapper { display:table; width:100%; - padding:0 0 1em 0; + padding: 0 0 1em; >div { display:table-cell; width:50%; @@ -522,7 +522,7 @@ body.twothirdswidthpage { div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div' width:48%; display:block; - float: left; + float: $left; border:none !important; } } @@ -538,7 +538,7 @@ body.twothirdswidthpage { //footer blocks #footer-mobileapps { - border-right:1em solid transparent; + border-#{$right}: 1em solid transparent; background:none; padding:0; @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); @@ -553,31 +553,31 @@ body.twothirdswidthpage { .ie6, .ie7 { #footer-mobileapps { margin:0 0.5em; - margin-right:2%; + margin-#{$right}: 2%; } } #footer-help { - border-left:1em solid transparent; + border-#{$left}: 1em solid transparent; ul { display:table; li { display:table-cell; border-bottom:none; &:last-child { - border-left:1.25em solid transparent; + border-#{$left}: 1.25em solid transparent; } } } } .ie6, .ie7 { #footer-help { - margin-left:2%; + margin-#{$left}: 2%; ul { width:100%; li { - float:left; - width:45% + float: $left; + width: 45%; } } } @@ -589,7 +589,7 @@ body.twothirdswidthpage { position: absolute; height: 29em; width: 29em; - right: 1em; + #{$right}: 1em; top: 3em; z-index:1; } @@ -609,50 +609,49 @@ body.twothirdswidthpage { // push zoom back over to right #fms_pan_zoom_zoomin { - left:auto !important; - right:30px; + #{$left}: auto !important; + #{$right}: 30px !important; top:130px !important; } #fms_pan_zoom_zoomout { - left:auto !important; - right:30px; + #{$left}: auto !important; + #{$right}: 30px !important; top:174px !important; } .olControlAttribution { bottom:0.5em !important; - left: auto !important; + #{$left}: auto !important; } #sub_map_links { - left:auto; - bottom:auto; - bottom:2em; + #{$left}: auto; + bottom: 2em; #map_links_toggle { display:block; cursor: pointer; position:absolute; - left: -0.97em; /* 1em leaves a tiny gap, font issue */ + #{$left}: -0.97em; /* 1em leaves a tiny gap, font issue */ width: 1em; height:100%; - background:#000 url($image-sprite) right -4119px no-repeat; - @include border-radius(0.25em 0 0 0.25em); + 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)); &:hover { - left:-1.5em; + #{$left}: -1.5em; //use border so we don't have to redefine the background-position - border-right:0.5em solid #000; + border-#{$right}: 0.5em solid #000; } &.closed { - background-position: right -4159px; + background-image: inline-image("../fixmystreet/images/triangle-grey-#{$left}.svg"); } } } -.ie6 #sub_map_links #map_links_toggle { - height:1.75em; - background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; - &.closed { - background-position: center -183px; - } +.iel8 #sub_map_links #map_links_toggle { + height: 1.75em; + background: #000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; + &.closed { + background-position: center -183px; + } } // log in bit, pokes above the .content div @@ -665,13 +664,13 @@ body.twothirdswidthpage { @include inline-block; position: absolute; top: 1em; - left: 1em; + #{$left}: 1em; height:2em; - padding:0.25em 6em 0.5em 0.5em; + padding: flip(0.25em 6em 0.5em 0.5em, 0.25em 0.5em 0.5em 6em); @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); a { top:0.5em; - right:0.5em; + #{$right}: 0.5em; font-size:0.6875em; padding:0.5em 0.75em; line-height:1em; @@ -712,42 +711,44 @@ body.twothirdswidthpage { a, input[type=submit] { font-size: 0.75em; color:#666; - padding: 0.5em 1.5em 0.5em 0; + 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:right -2935px; + background-position: flip(right, -337px) -2935px; } &.feed { background-image:url($image-sprite); - background-position:right -3074px; + background-position: flip(right, -337px) -3074px; } &.share { min-width: 5em; background-image: url(/cobrands/fixmystreet/images/share.png); - background-position: 90% 50%; + background-position: flip(80%, 20%) 50%; } &.chevron { - background-image:url($image-sprite); - background-position:right -3225px; + border-#{$right}: solid 1em transparent; + padding-#{$right}: 0.5em; + background-position: $right 50%; + background-size: 12px 15px; } &.hover { background-image:url($image-sprite); - background-position:right -1876px; + background-position: flip(right, -337px) -1876px; } } } &.singleton { li { - text-align:right; + text-align: $right; a { - padding-right:3em; + padding-#{$right}: 3em; } } } } &.static { - padding:0 0 1em 0; + padding: 0 0 1em; position: static; } } @@ -767,19 +768,20 @@ body.twothirdswidthpage { // pokes over the RHS with a little triangle .big-green-banner { - top:auto; - right:-1.25em; - margin-left:-2em; - font-size:1.375em; - padding:1em 3em 1em 1em; - background: $col_click_map url($image-sprite) right -2188px no-repeat; + top: auto; + #{$right}: -1.25em; + margin-#{$left}: -2em; + font-size: 1.375em; + padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em); + background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat; + background-size: 27px+36px 33px; &:before { - right:0; - left:auto; - top:-0.5em; + left: flip(auto, 0); + right: flip(0, auto); + top: -0.5em; position: absolute; border-top: 0.5em solid transparent; - border-left: 0.5em solid $col_click_map_dark; + border-#{$left}: 0.5em solid $col_click_map_dark; border-bottom:none; } span { @@ -788,8 +790,10 @@ body.twothirdswidthpage { padding-top: 0.5em; } } -.ie6 .big-green-banner { - background: $col_click_map url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat; +.iel8 { + .big-green-banner { + background-image: url(/cobrands/fixmystreet/images/chevron-white-#{$right}-on-green.gif); + } } .banner { @@ -798,8 +802,8 @@ body.twothirdswidthpage { top:-2.25em; padding:1em; &:before { - left:-0.75em; - border-left: 0.75em solid transparent; + #{$left}: -0.75em; + border-#{$left}: 0.75em solid transparent; border-bottom: 0.75em solid #888; } &#fixed { @@ -834,7 +838,7 @@ body.twothirdswidthpage { // for pulling elements fullwidth regardless // of .contents' padding .full-width{ - margin: 0 0 0em -1em; + margin: flip(0 0 0em -1em, 0 -1em 0 0); width: 29em; } @@ -859,7 +863,7 @@ textarea.form-error { #report-a-problem-sidebar { position: absolute; - left: 29em; + #{$left}: 29em; width: 15em; @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); } @@ -879,7 +883,7 @@ textarea.form-error { } .ie6, .ie7 { #report-a-problem-sidebar { - left: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. + #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. z-index: 1; } } @@ -923,8 +927,8 @@ body.frontpage { z-index:10; p { top: -4em; - left: auto; - right: 0; + #{$left}: auto; + #{$right}: 0; color:$primary; background:none; @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); @@ -982,7 +986,7 @@ body.frontpage { background:none; overflow:hidden; padding-bottom: 0; - margin-right:0.5em; + margin-#{$right}: 0.5em; label { margin:0.5em 0; } @@ -993,14 +997,14 @@ body.frontpage { overflow:hidden; input#pc { display:block; - float:left; + float: $left; padding:0.25em 0.5em; height:2em; width:17em; } input#sub { display:block; - float:right; + float: $right; width:3em; height:2.3em; padding-top:0.2em; @@ -1037,7 +1041,7 @@ body.frontpage { } #front-howto { - border-right:1em solid transparent; + border-#{$right}: 1em solid transparent; #front_stats { background:none; color: #222; @@ -1055,13 +1059,13 @@ body.frontpage { #front_stats { div { width:8em; - float:left; + float: $left; } } } #front-recently { - border-left:1em solid transparent; + border-#{$left}: 1em solid transparent; } #front-howto h2, @@ -1073,10 +1077,10 @@ body.frontpage { .ie6, .ie7 { .tablewrapper { #front-howto { - margin-right:2%; + margin-#{$right}: 2%; } #front-recently { - margin-left:2%; + margin-#{$left}: 2%; } } } @@ -1084,15 +1088,15 @@ body.frontpage { .confirmation-header { width: 25em; margin: 0 auto 1em; - text-align: left; - padding: 3em 0 3em 132px; // for tick icon - background-position: 0 2em; + text-align: $left; + padding: flip(3em 0 3em 132px, 3em 132px 3em 0); // for tick icon + background-position: $left 2em; } /* Admin interface */ .fms-admin-floated { - float: right; + float: $right; width: 25%; } @@ -1108,8 +1112,8 @@ body.frontpage { #main-nav{ width: auto; - float:right; - padding-left: 180px; + float: $right; + padding-#{$left}: 180px; } html #main-nav ul#mysoc-menu li a#mysoc-logo { @@ -1122,14 +1126,14 @@ body.frontpage { //Map becomes percentage width #map_box{ - left: 32em; + #{$left}: 32em; width:auto; } //Revert to mobile use of the .full-width class .full-width{ width: auto; - margin: 0em -1em 0 -1em; + margin: 0em -1em; } //make twothirdswidthpage nearly as small as main @@ -1138,7 +1142,7 @@ body.frontpage { .content { width:30em; .sticky-sidebar { - left:32em; + #{$left}: 32em; } } } diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index 4c7bc5af8..be274e9bb 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -1,3 +1,5 @@ +$direction: 'left' !default; + // Button reset @mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){ cursor:pointer; @@ -8,7 +10,7 @@ } text-transform:uppercase; line-height: 1.375em; - padding:0.7em 0.5em 0.5em 0.5em; + padding: 0.7em 0.5em 0.5em; margin:0; width: auto; height: auto; @@ -26,22 +28,7 @@ } } - - -// list resets -@mixin list-reset-copy { - padding-left:30px; - margin-bottom:20px; - li { - font-size:14px; - line-height:20px; - list-style:disc; - margin-bottom:10px; - background:none; - padding:0; - } -} - +// list reset @mixin list-reset-soft { list-style-type:none; padding: 0; @@ -54,19 +41,21 @@ } } -@mixin list-reset { - list-style-type:none; - padding: 0; - margin: 0; - li{ - list-style-type:none; - padding: 0; - margin: 0; - border: 0; - float:left; - a { - float:left; - display:block; +// LTR / RTL +$left: left; +@if $direction == right { + $left: right; +} + +$right: right; +@if $direction == right { + $right: left; +} + +@function flip($ltr, $rtl) { + @if $direction == left { + @return $ltr; + } @else { + @return $rtl; } - } } diff --git a/web/cobrands/sass/_report_list.scss b/web/cobrands/sass/_report_list.scss index 179a7983c..0ba69fd4b 100644 --- a/web/cobrands/sass/_report_list.scss +++ b/web/cobrands/sass/_report_list.scss @@ -2,7 +2,7 @@ // the new-style combined report list with category/status filters. .report-list-filters { - padding: 1em 1em 0 1em; + padding: 1em 1em 0; margin-bottom: 0.5em; color: #666; font-size: 0.85em; @@ -17,7 +17,7 @@ margin: 0; & + label { - margin-left: 0.2em; + margin-#{$left}: 0.2em; } } @@ -29,13 +29,13 @@ border: 1px solid #ced7c4; box-shadow: 0 1px 0 #fff; height: 2em; - margin-left: 0.2em; + margin-#{$left}: 0.2em; max-width: 13em; } } .report-list, .issue-list-a { - margin-left: 0; + margin-#{$left}: 0; li { list-style: none; @@ -46,14 +46,11 @@ a { display: block; padding: 1em; - padding-left: 4em; - background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center; + padding-#{$left}: 4em; + border-#{$left}: solid 1em transparent; + background: transparent url(/i/pin-yellow-small.png) no-repeat $left center; &:hover, &:focus { - background-color: #fff; - background-repeat: no-repeat; - background-position: 1em center; - background: transparent url(/i/pin-yellow-small.png) no-repeat 1em center; text-decoration: none; } } @@ -83,14 +80,14 @@ display: block; height: 1px; position: absolute; - left: 4em; - right: 0; + #{$left}: 4em; + #{$right}: 0; bottom: 0; background-color: #e5e5e5; } &.empty:after { - left: 0; + #{$left}: 0; } } @@ -113,7 +110,7 @@ // which removes the left padding. However, our new reports list still needs // it: .issue-list-a.full-width { - margin-left: -1em; + margin-#{$left}: -1em; } .big-green-banner { @@ -126,14 +123,15 @@ .click-the-map { color: #000; - margin: -10px -1em 0 -1em; // overlap padding on parents + margin: -10px -1em 0; // overlap padding on parents padding: 18px; border-bottom: 1px solid #e5e5e5; + // TODO This is not right-to-left enabled yet background: #fff url('/i/click-map-chevron-big.gif') 90% 12px no-repeat; h2 { font-family: inherit; - margin: 0 0 5px 0; + margin: 0 0 5px; } p { @@ -141,22 +139,23 @@ font-size: 18px; line-height: 20px; color: $primary; - padding-right: 20px; - background: transparent url('/i/click-map-chevron-small.gif') 100% center no-repeat; + padding-#{$right}: 20px; + // TODO This is not right-to-left enabled yet, image wise + background: transparent url('/i/click-map-chevron-small.gif') $right center no-repeat; display: inline-block; } img { // the little chevron icon vertical-align: -1px; - margin-left: 0.2em; + margin-#{$left}: 0.2em; } } body.frontpage { .issue-list-a, .list-a { li .text { - padding-left: 3em; + padding-#{$left}: 3em; } } } |
