diff options
33 files changed, 91 insertions, 80 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b7342f92..28009a2bd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ - Add cobrand hook for dashboard viewing permission. #2285 - Have body.url work in hashref lookup. #2284 - OSM based map types can now override zoom levels #2288 + - Clearer name for navigation colours in SCSS. #2080 - Internal things: - Move send-comments code to package for testing. #2109 #2170 diff --git a/docs/customising/css.md b/docs/customising/css.md index c41d5b411..e444bb778 100644 --- a/docs/customising/css.md +++ b/docs/customising/css.md @@ -200,8 +200,8 @@ stylesheet: </tr> <tr> <td> - <code>$map_nav_bg</code><br> - <code>$nav_fg</code> + <code>$nav_background_colour</code><br> + <code>$nav_colour</code> </td> <td> Mobile width, the header's colours; large width, the navigation's diff --git a/web/cobrands/bathnes/_colours.scss b/web/cobrands/bathnes/_colours.scss index 18497f45b..2d58682fa 100644 --- a/web/cobrands/bathnes/_colours.scss +++ b/web/cobrands/bathnes/_colours.scss @@ -25,9 +25,9 @@ $primary_text: #0b0c0c; $base_bg: white; $base_fg: #0b0c0c; -$map_nav_bg: #fff; -$nav_fg: #000; -$nav_fg_hover: #eee; +$nav_background_colour: #fff; +$nav_colour: #000; +$nav_hover_background_colour: #eee; // Colour used for front page 'how to report a problem' steps $col_big_numbers: $bathnes-primary; diff --git a/web/cobrands/borsetshire/_colours.scss b/web/cobrands/borsetshire/_colours.scss index 78f06e1c8..66845a2a0 100644 --- a/web/cobrands/borsetshire/_colours.scss +++ b/web/cobrands/borsetshire/_colours.scss @@ -19,9 +19,9 @@ $primary_text: #fff; // text colour wherever $primary is the background $base_bg: white; // background on body and .tablewrapper on desktop $base_fg: #000; // text color on body and .tablewrapper on desktop -$map_nav_bg: $color-borsetshire-blue; // background for #site-header on mobile, and `.mappage #site-header` on desktop -$nav_fg: #fff; // text color for `.nav-menu a` on desktop -$nav_fg_hover: $color-borsetshire-blue; // hover text color for `.nav-menu a` +$nav_background_colour: $color-borsetshire-blue; // background for #site-header on mobile, and `.mappage #site-header` on desktop +$nav_colour: #fff; // text color for `.nav-menu a` on desktop +$nav_hover_background_colour: $color-borsetshire-blue; // hover text color for `.nav-menu a` $col_big_numbers: #ccc; // text color for ol.big-numbers list item counters on homepage @@ -36,4 +36,4 @@ $mappage-header-height: 5em; // 3em #site-logo plus 1em padding top and bottom $body-font: Cabin, "Calibri", "Gill Sans", "Gill Sans MT", sans-serif; $meta-font: $body-font; -$heading-font: $body-font;
\ No newline at end of file +$heading-font: $body-font; diff --git a/web/cobrands/bristol/_colours.scss b/web/cobrands/bristol/_colours.scss index 02764ab43..7451305a8 100644 --- a/web/cobrands/bristol/_colours.scss +++ b/web/cobrands/bristol/_colours.scss @@ -22,9 +22,9 @@ $primary_text: $g1; $base_bg: white; $base_fg: $g1; -$map_nav_bg: $g1; -$nav_fg: #fff; -$nav_fg_hover: $primary; +$nav_background_colour: $g1; +$nav_colour: #fff; +$nav_hover_background_colour: $primary; $header-top-border: false; diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index 53dfcfc8a..df8e86ddb 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -13,9 +13,9 @@ $primary_text: #000000; $base_bg: #f4f4f4; $base_fg: #1a1a1a; -$map_nav_bg: #f4f4f4; -$nav_fg: #fff; -$nav_fg_hover: #444; +$nav_background_colour: #f4f4f4; +$nav_colour: #fff; +$nav_hover_background_colour: #444; $col_click_map: $bromley_blue; $col_fixed_label: $bromley_blue; diff --git a/web/cobrands/bromley/_fonts.scss b/web/cobrands/bromley/_fonts.scss index ca0b89983..b54d10542 100644 --- a/web/cobrands/bromley/_fonts.scss +++ b/web/cobrands/bromley/_fonts.scss @@ -7,4 +7,4 @@ } $body-font: Arial,'Helvetica Neue',Helvetica,sans-serif; $meta-font: $body-font; -$heading-font: 'Gill Sans condensed', 'Gill Sans','Trebuchet MS',Calibri,sans-serif;
\ No newline at end of file +$heading-font: 'Gill Sans condensed', 'Gill Sans','Trebuchet MS',Calibri,sans-serif; diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index d53ff351a..f2e6c41c8 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -36,19 +36,19 @@ body.mappage { // Bromley doesn't have a special styling for the report button in the nav a.report-a-problem-btn { - color: $nav_fg; + color: $nav_colour; background: none; padding: 0.75em; margin: 0; @include border-radius(0); &:hover { - background: $nav_fg_hover; + background: $nav_hover_background_colour; } } } .nav-menu--main span { - color: $nav_fg; - background-color: $nav_fg_hover; + color: $nav_colour; + background-color: $nav_hover_background_colour; } // Fix bad margin on local alerts form diff --git a/web/cobrands/buckinghamshire/_colours.scss b/web/cobrands/buckinghamshire/_colours.scss index 4525989ad..685773382 100644 --- a/web/cobrands/buckinghamshire/_colours.scss +++ b/web/cobrands/buckinghamshire/_colours.scss @@ -25,9 +25,9 @@ $primary_text: $g1; $base_bg: white; $base_fg: $g1; -$map_nav_bg: #fff; -$nav_fg: #000; -$nav_fg_hover: #eee; +$nav_background_colour: #fff; +$nav_colour: #000; +$nav_hover_background_colour: #eee; $col_click_map: $g1; $col_click_map_dark: darken($g1, 10%); diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss index 72f9607cd..83a646869 100644 --- a/web/cobrands/default/_colours.scss +++ b/web/cobrands/default/_colours.scss @@ -15,9 +15,9 @@ $primary_text: #222222; $base_bg: $bluey; $base_fg: #000; -$map_nav_bg: $bluey; -$nav_fg: #000; -$nav_fg_hover: $primary; +$nav_background_colour: $bluey; +$nav_colour: #000; +$nav_hover_background_colour: $primary; // Colour used for front page 'how to report a problem' steps $col_big_numbers: #ccc; diff --git a/web/cobrands/eastherts/_colours.scss b/web/cobrands/eastherts/_colours.scss index 2854c01bd..6233591d3 100644 --- a/web/cobrands/eastherts/_colours.scss +++ b/web/cobrands/eastherts/_colours.scss @@ -10,9 +10,9 @@ $primary_text: #fff; $base_bg: white; $base_fg: $eh_dark_grey; -$map_nav_bg: #000; -$nav_fg: #fff; -$nav_fg_hover: $eh_green; +$nav_background_colour: #000; +$nav_colour: #fff; +$nav_hover_background_colour: $eh_green; $header-top-border: false; diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss index c7fb8b127..c78a15b05 100644 --- a/web/cobrands/fiksgatami/_colours.scss +++ b/web/cobrands/fiksgatami/_colours.scss @@ -11,9 +11,9 @@ $primary_text: #222222; $base_bg: $bg; $base_fg: #fff; -$map_nav_bg: $bg; -$nav_fg: #fff; -$nav_fg_hover: $primary; +$nav_background_colour: $bg; +$nav_colour: #fff; +$nav_hover_background_colour: $primary; $col_click_map: $bg; diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss index 555c2d7ae..0ec24d1ff 100644 --- a/web/cobrands/fixamingata/_colours.scss +++ b/web/cobrands/fixamingata/_colours.scss @@ -9,9 +9,9 @@ $primary_text: #222; $base_bg: #eee url(images/tile.jpg) 0 0 repeat; $base_fg: $primary_text; -$map_nav_bg: #eee; -$nav_fg: $primary_text; -$nav_fg_hover: #444; +$nav_background_colour: #eee; +$nav_colour: $primary_text; +$nav_hover_background_colour: #444; $header-top-border: false; diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss index 3e0a999a3..60e72859b 100644 --- a/web/cobrands/fixamingata/layout.scss +++ b/web/cobrands/fixamingata/layout.scss @@ -72,7 +72,7 @@ body.mappage { } #site-header { - background: $map_nav_bg; + background: $nav_background_colour; padding: 1em 0; } diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss index b43c96791..1a6bb7ff1 100644 --- a/web/cobrands/fixmystreet.com/_colours.scss +++ b/web/cobrands/fixmystreet.com/_colours.scss @@ -8,9 +8,9 @@ $primary_text: #222; $base_bg: #272727 url(images/tile.jpg) 0 0 repeat; $base_fg: #fff; -$map_nav_bg: #222; -$nav_fg: #fff; -$nav_fg_hover: #444; +$nav_background_colour: #222; +$nav_colour: #fff; +$nav_hover_background_colour: #444; // The "Click map" box on /around $col_click_map: #00BD08; diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index f49d4f32f..c2bbd2d14 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -429,4 +429,4 @@ footer { margin-top: 1em; margin-bottom: 1em; } -}
\ No newline at end of file +} diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss index 447b5a134..0e6046efb 100644 --- a/web/cobrands/greenwich/_colours.scss +++ b/web/cobrands/greenwich/_colours.scss @@ -13,9 +13,9 @@ $primary_text: #222222; $base_bg: #fff; $base_fg: #000; -$map_nav_bg: #fff; -$nav_fg: #fff; -$nav_fg_hover: transparent; +$nav_background_colour: #fff; +$nav_colour: #fff; +$nav_hover_background_colour: transparent; $header-top-border: false; diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss index 48c5c642d..f46ab9a19 100644 --- a/web/cobrands/greenwich/base.scss +++ b/web/cobrands/greenwich/base.scss @@ -33,7 +33,7 @@ label[for=pc] { } #front_stats { - color: $nav_fg; + color: $nav_colour; } #greenwich-menu-desktop, #fms-menu-desktop, #greenwich-breadcrumb { diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index 6c59dc123..7e6706c90 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -103,7 +103,7 @@ body.frontpage { li { span, a { - color: $nav_fg; + color: $nav_colour; } } } @@ -176,7 +176,7 @@ body.mappage { } .nav-menu--main a.report-a-problem-btn { - color: $nav_fg; + color: $nav_colour; } .nav-menu { diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss index 3dce0d9b1..209a971e5 100644 --- a/web/cobrands/hart/_colours.scss +++ b/web/cobrands/hart/_colours.scss @@ -14,10 +14,10 @@ $base_bg: #ffffff; $base_fg: #1a1a1a; /* Unused here */ -$nav_fg: #fff; -$nav_fg_hover: #444; +$nav_colour: #fff; +$nav_hover_background_colour: #444; -$map_nav_bg: $primary; +$nav_background_colour: $primary; $mappage-header-height: 173px + 32px; $header-top-border: false; diff --git a/web/cobrands/lincolnshire/_colours.scss b/web/cobrands/lincolnshire/_colours.scss index 21b67628c..e53d0cfcf 100644 --- a/web/cobrands/lincolnshire/_colours.scss +++ b/web/cobrands/lincolnshire/_colours.scss @@ -30,9 +30,9 @@ $primary_text: $lincs-text; $base_bg: $lincs-page; $base_fg: #000; -$map_nav_bg: #eee; -$nav_fg: #000; -$nav_fg_hover: $primary; +$nav_background_colour: #eee; +$nav_colour: #000; +$nav_hover_background_colour: $primary; // Colour used for front page 'how to report a problem' steps $col_big_numbers: $lincs-text-2nd; diff --git a/web/cobrands/lincolnshire/base.scss b/web/cobrands/lincolnshire/base.scss index 1d045f4ea..33ae1f3ce 100644 --- a/web/cobrands/lincolnshire/base.scss +++ b/web/cobrands/lincolnshire/base.scss @@ -167,4 +167,4 @@ body.mappage .big-green-banner { .admin-hint { background-color: $lincs-link-focus; -}
\ No newline at end of file +} diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index bb38e1ff5..b55727f79 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -18,9 +18,9 @@ $primary_text: #fff; $base_bg: #cfcfcf; $base_fg: #333; -$map_nav_bg: $color-oxfordshire-dark-green; -$nav_fg: #000; -$nav_fg_hover: $nav_fg; +$nav_background_colour: $color-oxfordshire-dark-green; +$nav_colour: #000; +$nav_hover_background_colour: $nav_colour; $col_click_map: $color-oxfordshire-bright-green; diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index 6d4bad117..9a098c439 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -52,7 +52,7 @@ a { #site-logo { @include svg-background-image("images/site-logo-mobile"); - background-color: $map_nav_bg; + background-color: $nav_background_colour; background-size: 175px 38px; background-repeat: no-repeat; background-position: 50% 50%; diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 9a831dd69..8fc66aac4 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -52,7 +52,7 @@ $mappage-header-height: 10em; a, a:hover, a:focus { - color: $nav_fg; + color: $nav_colour; background-color: transparent; } diff --git a/web/cobrands/rutland/_colours.scss b/web/cobrands/rutland/_colours.scss index c3666ca17..5cbd005e8 100755 --- a/web/cobrands/rutland/_colours.scss +++ b/web/cobrands/rutland/_colours.scss @@ -18,9 +18,9 @@ $primary_text: #222222; $base_bg: $RCCbg; $base_fg: #000; -$map_nav_bg: $RCCbg; -$nav_fg: #000; -$nav_fg_hover: $primary; +$nav_background_colour: $RCCbg; +$nav_colour: #000; +$nav_hover_background_colour: $primary; // Colour used for front page 'how to report a problem' steps $col_big_numbers: #ccc; diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 587ff59f3..c17790176 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -506,8 +506,8 @@ ul.error { @if ($header-top-border) { border-top: $header-top-border; } - color: $nav_fg; - background-color: $map_nav_bg; + color: $nav_colour; + background-color: $nav_background_colour; position: relative; } @@ -548,13 +548,13 @@ ul.error { font-size: 0.9em; line-height: 1em; border: 1px solid #666; - color: $nav_fg; + color: $nav_colour; padding: 0.4em; border-radius: 0.3em; &:hover, &:focus { text-decoration: none; - background-color: $nav_fg_hover; + background-color: $nav_hover_background_colour; } } diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 7a6f7ba02..2c641f30c 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -112,12 +112,12 @@ h1 { } a, span { display: block; - color: $nav_fg; + color: $nav_colour; background-color: transparent; border-bottom: none; } a:visited { - color: $nav_fg; + color: $nav_colour; } } .nav-menu--main { @@ -126,7 +126,7 @@ h1 { font-size: 0.9em; } a:hover { - background-color: $nav_fg_hover; + background-color: $nav_hover_background_colour; } a.report-a-problem-btn { color: $primary_text; diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index 392739db8..b78a699fe 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -1,5 +1,15 @@ $direction: 'left' !default; +@if (variable-exists(nav_fg)) { + $nav_colour: $nav_fg !global; +} +@if (variable-exists(nav_fg_hover)) { + $nav_hover_background_colour: $nav_fg_hover !global; +} +@if (variable-exists(map_nav_bg)) { + $nav_background_colour: $nav_fg_hover !global; +} + // Button reset // Uses !important a few times to quickly reset // styles from a:link, a:hover, a:visited etc. diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss index 42718421a..0211b6d57 100644 --- a/web/cobrands/stevenage/_colours.scss +++ b/web/cobrands/stevenage/_colours.scss @@ -9,9 +9,9 @@ $primary_text: #fff; $base_bg: #dddddb; $base_fg: #222; -$map_nav_bg: #eee; -$nav_fg: #fff; -$nav_fg_hover: #444; +$nav_background_colour: #eee; +$nav_colour: #fff; +$nav_hover_background_colour: #444; $col_click_map: #00BD08; $col_fixed_label: #00BD08; diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss index 154cf1bef..8480841a1 100644 --- a/web/cobrands/warwickshire/_colours.scss +++ b/web/cobrands/warwickshire/_colours.scss @@ -10,9 +10,9 @@ $primary_text: #222222; $base_bg: #F9FFF8; $base_fg: #000; -$map_nav_bg: #fff; -$nav_fg: #000; -$nav_fg_hover: $primary; +$nav_background_colour: #fff; +$nav_colour: #000; +$nav_hover_background_colour: $primary; $col_click_map: $purple; diff --git a/web/cobrands/whitelabel/_colours.scss b/web/cobrands/whitelabel/_colours.scss index 1392663d5..f7e6e63c7 100644 --- a/web/cobrands/whitelabel/_colours.scss +++ b/web/cobrands/whitelabel/_colours.scss @@ -12,9 +12,9 @@ $primary_text: #222222; $base_bg: white; $base_fg: #000; -$map_nav_bg: #eee; -$nav_fg: #000; -$nav_fg_hover: $primary; +$nav_background_colour: #eee; +$nav_colour: #000; +$nav_hover_background_colour: $primary; // Colour used for front page 'how to report a problem' steps $col_big_numbers: #ccc; diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss index 3bdbd7447..5f4416015 100644 --- a/web/cobrands/zurich/_colours.scss +++ b/web/cobrands/zurich/_colours.scss @@ -10,10 +10,10 @@ $primary_text: #fff; $base_bg: #fff; $base_fg: #3c3c3c; -$map_nav_bg: #366AB6; +$nav_background_colour: #366AB6; /* Unused here, main-nav is mobile only */ -$nav_fg: $primary_text; -$nav_fg_hover: $primary/1.1; +$nav_colour: $primary_text; +$nav_hover_background_colour: $primary/1.1; $col_click_map: $zurich_blue; |