Commit 87b12033 authored by Evonne Cheung's avatar Evonne Cheung Committed by Robert Lyon

Bug 1800389 Color contrast issues for navigation arrow bar

Fixed color contrast issues

behatnotneeded

Change-Id: I6d4b465d15d042e7ee516d84b842d63043b42dc3
(cherry picked from commit fc770e30)
parent 2a5964e7
.arrow-bar { .arrow-bar {
background-color: #157c62;
.arrow { .arrow {
.text { .text {
color: #FFF; color: #FFF;
......
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
color: #FFF; color: #FFF;
.text-midtone { .text-midtone {
color: desaturate(lighten($accent-color, 30), 10); color: #FFF;
} }
} }
} }
\ No newline at end of file
...@@ -18,4 +18,4 @@ $dashboard-widget-bg: darken(#f9f9f9, 2%); ...@@ -18,4 +18,4 @@ $dashboard-widget-bg: darken(#f9f9f9, 2%);
$dashboard-widget-color: $brand-primary; $dashboard-widget-color: $brand-primary;
$help-icon-color: darken(#22C49C, 5%); $help-icon-color: darken(#22C49C, 5%);
$rss-icon-color: #FE6500; $rss-icon-color: #FE6500;
\ No newline at end of file
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
@import "../layout/panel/panel-heading"; @import "../layout/panel/panel-heading";
@import "../layout/panel/panel-secondary"; @import "../layout/panel/panel-secondary";
@import "../layout/nav/navbar";
@import "../form/form"; @import "../form/form";
@import "../components/arrow-bar"; @import "../components/arrow-bar";
......
...@@ -8,4 +8,4 @@ $theme-text-color: #545B5D; ...@@ -8,4 +8,4 @@ $theme-text-color: #545B5D;
$theme-text-lighttone-color: #888; $theme-text-lighttone-color: #888;
$theme-text-midtone-color: #888; $theme-text-midtone-color: #888;
$theme-accent-color: #1EAE8B; $theme-accent-color: #178569;
.arrow-bar { .arrow-bar {
background-color: #0a4f66;
// to theme the Résumé nav blue // to theme the Résumé nav blue
&.resume { &.resume {
.nav-inpage { .nav-inpage {
......
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
...@@ -394,9 +394,9 @@ $navbar-default-border: lighten($navbar-default-bg, 5%); ...@@ -394,9 +394,9 @@ $navbar-default-border: lighten($navbar-default-bg, 5%);
// Navbar links // Navbar links
$navbar-default-link-color: #FFF; $navbar-default-link-color: #FFF;
$navbar-default-link-hover-color: #FFF; $navbar-default-link-hover-color: #FFF;
$navbar-default-link-hover-bg: lighten($navbar-default-bg, 5%); $navbar-default-link-hover-bg: darken($navbar-default-bg, 2%);
$navbar-default-link-active-color: #FFF; $navbar-default-link-active-color: #FFF;
$navbar-default-link-active-bg: lighten($navbar-default-bg, 5%); $navbar-default-link-active-bg: darken($navbar-default-bg, 5%);
$navbar-default-link-disabled-color: #ccc; $navbar-default-link-disabled-color: #ccc;
$navbar-default-link-disabled-bg: transparent; $navbar-default-link-disabled-bg: transparent;
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
@import "../layout/layout"; // Custom layout (color) @import "../layout/layout"; // Custom layout (color)
@import "../layout/header"; // Custom header @import "../layout/header"; // Custom header
@import "../layout/nav/main-nav"; // Custom navigation @import "../layout/nav/main-nav"; // Custom navigation
@import "../layout/nav/navbar"; // Custom navigation
@import "../layout/panel/panel-heading"; // Custom panel header @import "../layout/panel/panel-heading"; // Custom panel header
@import "../features/dashboard-widget"; // Custom dashboard @import "../features/dashboard-widget"; // Custom dashboard
@import "../features/collection-navigation"; // Custom collection navigation @import "../features/collection-navigation"; // Custom collection navigation
......
.arrow-bar { .arrow-bar {
// to theme the Résumé nav red background-color: #026BB6;
// to theme the Résumé nav green
&.resume { &.resume {
background-color: lighten($arrow-link-color, 5%); background-color: #5B6E1C;
.arrow { .arrow {
background-color: $arrow-link-color; background-color: $arrow-link-color;
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
// to theme the Groups nav green // to theme the Groups nav green
&.group { &.group {
background-color: lighten($arrow-link-group-color, 5%); background-color: #5B6E1C;
.arrow { .arrow {
background-color: $arrow-link-group-color; background-color: $arrow-link-group-color;
......
...@@ -33,7 +33,7 @@ $logged-in-height-phone: 120px; ...@@ -33,7 +33,7 @@ $logged-in-height-phone: 120px;
} }
.widget { .widget {
background-color: #f29907; background-color: #A66700;
border-left: 10px solid #FFFFFF; border-left: 10px solid #FFFFFF;
height: $logged-in-height; height: $logged-in-height;
...@@ -87,10 +87,10 @@ $logged-in-height-phone: 120px; ...@@ -87,10 +87,10 @@ $logged-in-height-phone: 120px;
&.last { &.last {
.widget { .widget {
background-color: #799323; background-color: #5B6E1C;
.puzzle { .puzzle {
background-color: #f29907; background-color: #A66700;
border: 10px solid #FFFFFF; border: 10px solid #FFFFFF;
border-left: 0; border-left: 0;
} }
...@@ -132,7 +132,7 @@ $logged-in-height-phone: 120px; ...@@ -132,7 +132,7 @@ $logged-in-height-phone: 120px;
} }
.puzzle { .puzzle {
background-color: #799323; background-color: #5B6E1C;
border: 10px solid #FFFFFF; border: 10px solid #FFFFFF;
border-left: 0; border-left: 0;
width: 50px; width: 50px;
......
...@@ -16,10 +16,10 @@ ...@@ -16,10 +16,10 @@
// color values specified in Primary theme bootstrap-variable.scss // color values specified in Primary theme bootstrap-variable.scss
// To change section color, simply change color value. // To change section color, simply change color value.
$home-color: #0591ce; $home-color: #047DB1;
$content-color: #ca0238; $content-color: #ca0238;
$myportfolio-color: #f29907; $myportfolio-color: #A66700;
$groups-color: #799323; $groups-color: #5B6E1C;
// Menue section variable array // Menue section variable array
// 1) Section name // 1) Section name
...@@ -28,10 +28,10 @@ $groups-color: #799323; ...@@ -28,10 +28,10 @@ $groups-color: #799323;
// 4) Lighter shade (can be specified in hex,rgba value) // 4) Lighter shade (can be specified in hex,rgba value)
// 5) Darker shade (can be specified in hex,rgba value) // 5) Darker shade (can be specified in hex,rgba value)
$menu-styles: ( $menu-styles: (
("home", $home-color, lighten($home-color, 5%), darken($home-color, 5%)), ("home", $home-color, darken($home-color, 2%), darken($home-color, 5%)),
("create", $content-color, lighten($content-color, 5%), darken($content-color, 5%)), ("create", $content-color, darken($content-color, 2%), darken($content-color, 5%)),
("engage", $myportfolio-color, lighten($myportfolio-color, 5%), darken($myportfolio-color, 5%)), ("engage", $myportfolio-color, darken($myportfolio-color, 2%), darken($myportfolio-color, 5%)),
("manage", $groups-color, lighten($groups-color, 5%), darken($groups-color, 5%)) ("manage", $groups-color, darken($groups-color, 2%), darken($groups-color, 5%))
); );
.nav-main .navbar-nav { .nav-main .navbar-nav {
......
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
...@@ -16,12 +16,12 @@ ...@@ -16,12 +16,12 @@
} }
// custom block heading // custom block heading
.column-layout { .column-layout {
&:nth-child(3n+1) { &:nth-child(3n+1) {
.panel-secondary { .panel-secondary {
&:nth-child(5n+1) > .panel-heading, .panel-heading-nested { &:nth-child(5n+1) > .panel-heading, .panel-heading-nested {
background-color: #0591ce; background-color: #047DB1;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested { &:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
...@@ -29,11 +29,11 @@ ...@@ -29,11 +29,11 @@
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested { &:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
background-color: #f29907; background-color: #A66700;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested { &:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #799323; background-color: #5B6E1C;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested { &:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
...@@ -45,11 +45,11 @@ ...@@ -45,11 +45,11 @@
&:nth-child(3n+2) { &:nth-child(3n+2) {
.panel-secondary { .panel-secondary {
&:nth-child(5n+1) > .panel-heading, .panel-heading-nested { &:nth-child(5n+1) > .panel-heading, .panel-heading-nested {
background-color: #f29907; background-color: #A66700;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested { &:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
background-color: #799323; background-color: #5B6E1C;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested { &:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested { &:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #0591ce; background-color: #047DB1;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested { &:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested { &:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
background-color: #0591ce; background-color: #047DB1;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested { &:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
...@@ -81,11 +81,11 @@ ...@@ -81,11 +81,11 @@
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested { &:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #f29907; background-color: #A66700;
color: #FFFFFF; color: #FFFFFF;
} }
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested { &:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
background-color: #799323; background-color: #5B6E1C;
color: #FFFFFF; color: #FFFFFF;
} }
} }
...@@ -317,4 +317,4 @@ ...@@ -317,4 +317,4 @@
font-weight: 300; font-weight: 300;
color: rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6);
padding-right: 5px; padding-right: 5px;
} }
\ No newline at end of file
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
> .panel-heading, .panel-heading-nested { > .panel-heading, .panel-heading-nested {
border-bottom: 0; border-bottom: 0;
background-color: #0591ce; background-color: #047DB1;
color: #FFFFFF; color: #FFFFFF;
a { a {
......
...@@ -61,7 +61,7 @@ $text-color: $theme-text-color; ...@@ -61,7 +61,7 @@ $text-color: $theme-text-color;
//** Global textual link color. //** Global textual link color.
$link-color: #0162a7; $link-color: #0162a7;
//** Link hover color set via `darken()` or `lighten()` function. //** Link hover color set via `darken()` or `lighten()` function.
$link-hover-color: lighten($link-color, 15%); $link-hover-color: darken($link-color, 15%);
//** Link hover decoration. //** Link hover decoration.
$link-hover-decoration: underline; $link-hover-decoration: underline;
...@@ -393,7 +393,7 @@ $navbar-default-border: transparent; ...@@ -393,7 +393,7 @@ $navbar-default-border: transparent;
// Navbar links // Navbar links
$navbar-default-link-color: #FFFFFF; $navbar-default-link-color: #FFFFFF;
$navbar-default-link-hover-color: #FFFFFF; $navbar-default-link-hover-color: #FFFFFF;
$navbar-default-link-hover-bg: #0591ce; $navbar-default-link-hover-bg: #047DB1;
$navbar-default-link-active-color: #555; $navbar-default-link-active-color: #555;
$navbar-default-link-active-bg: #F1F1F1; $navbar-default-link-active-bg: #F1F1F1;
$navbar-default-link-disabled-color: #ccc; $navbar-default-link-disabled-color: #ccc;
......
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
//Arrow component variables //Arrow component variables
$arrow-color: $brand-primary; $arrow-color: $brand-primary;
$arrow-text-color: #fff; $arrow-text-color: #fff;
$arrow-link-color: #ca0238; $arrow-link-color: #677D1E;
$arrow-link-hover-color: $text-color; $arrow-link-hover-color: $text-color;
$arrow-link-active-color: $brand-primary; $arrow-link-active-color: $brand-primary;
$arrow-link-background-color: #fff; $arrow-link-background-color: #fff;
$arrow-link-group-color: #799323; $arrow-link-group-color: #677D1E;
// color for the secondary title in sections (cf. groups) // color for the secondary title in sections (cf. groups)
$section-heading-color: #999; $section-heading-color: #999;
...@@ -18,5 +18,5 @@ $admin-title-bg: transparent; ...@@ -18,5 +18,5 @@ $admin-title-bg: transparent;
$dashboard-widget-bg: darken(#f9f9f9, 2%); $dashboard-widget-bg: darken(#f9f9f9, 2%);
$dashboard-widget-color: #FFFFFF; $dashboard-widget-color: #FFFFFF;
$help-icon-color: #53add4; $help-icon-color: #047DB1;
$rss-icon-color: #FE6500; $rss-icon-color: #FE6500;
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
// Navigation // Navigation
@import "../layout/nav/main-nav"; @import "../layout/nav/main-nav";
@import "../layout/nav/nav-tabs"; @import "../layout/nav/nav-tabs";
@import "../layout/nav/navbar";
// Forms // Forms
@import "../form/form-group"; @import "../form/form-group";
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* Theme colours should be defined here, and (ideally) used only in the global variables files (bootstrap-variables, custom-variables) * Theme colours should be defined here, and (ideally) used only in the global variables files (bootstrap-variables, custom-variables)
*/ */
$theme-primary-color: #0591ce; $theme-primary-color: #047DB1;
$theme-primary-color-dark: #417005; $theme-primary-color-dark: #417005;
$theme-text-color: #333; $theme-text-color: #333;
$theme-accent-color: #211c00; // note this currently isn't used anywhere in raw $theme-accent-color: #211c00; // note this currently isn't used anywhere in raw
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment