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 {
background-color: #157c62;
.arrow {
.text {
color: #FFF;
......
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
......@@ -5,7 +5,7 @@
color: #FFF;
.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%);
$dashboard-widget-color: $brand-primary;
$help-icon-color: darken(#22C49C, 5%);
$rss-icon-color: #FE6500;
\ No newline at end of file
$rss-icon-color: #FE6500;
......@@ -4,6 +4,8 @@
@import "../layout/panel/panel-heading";
@import "../layout/panel/panel-secondary";
@import "../layout/nav/navbar";
@import "../form/form";
@import "../components/arrow-bar";
......
......@@ -8,4 +8,4 @@ $theme-text-color: #545B5D;
$theme-text-lighttone-color: #888;
$theme-text-midtone-color: #888;
$theme-accent-color: #1EAE8B;
$theme-accent-color: #178569;
.arrow-bar {
background-color: #0a4f66;
// to theme the Résumé nav blue
&.resume {
.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%);
// Navbar links
$navbar-default-link-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-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-bg: transparent;
......
......@@ -2,6 +2,7 @@
@import "../layout/layout"; // Custom layout (color)
@import "../layout/header"; // Custom header
@import "../layout/nav/main-nav"; // Custom navigation
@import "../layout/nav/navbar"; // Custom navigation
@import "../layout/panel/panel-heading"; // Custom panel header
@import "../features/dashboard-widget"; // Custom dashboard
@import "../features/collection-navigation"; // Custom collection navigation
......
.arrow-bar {
// to theme the Résumé nav red
background-color: #026BB6;
// to theme the Résumé nav green
&.resume {
background-color: lighten($arrow-link-color, 5%);
background-color: #5B6E1C;
.arrow {
background-color: $arrow-link-color;
......@@ -29,7 +31,7 @@
// to theme the Groups nav green
&.group {
background-color: lighten($arrow-link-group-color, 5%);
background-color: #5B6E1C;
.arrow {
background-color: $arrow-link-group-color;
......
......@@ -33,7 +33,7 @@ $logged-in-height-phone: 120px;
}
.widget {
background-color: #f29907;
background-color: #A66700;
border-left: 10px solid #FFFFFF;
height: $logged-in-height;
......@@ -87,10 +87,10 @@ $logged-in-height-phone: 120px;
&.last {
.widget {
background-color: #799323;
background-color: #5B6E1C;
.puzzle {
background-color: #f29907;
background-color: #A66700;
border: 10px solid #FFFFFF;
border-left: 0;
}
......@@ -132,7 +132,7 @@ $logged-in-height-phone: 120px;
}
.puzzle {
background-color: #799323;
background-color: #5B6E1C;
border: 10px solid #FFFFFF;
border-left: 0;
width: 50px;
......
......@@ -16,10 +16,10 @@
// color values specified in Primary theme bootstrap-variable.scss
// To change section color, simply change color value.
$home-color: #0591ce;
$home-color: #047DB1;
$content-color: #ca0238;
$myportfolio-color: #f29907;
$groups-color: #799323;
$myportfolio-color: #A66700;
$groups-color: #5B6E1C;
// Menue section variable array
// 1) Section name
......@@ -28,10 +28,10 @@ $groups-color: #799323;
// 4) Lighter shade (can be specified in hex,rgba value)
// 5) Darker shade (can be specified in hex,rgba value)
$menu-styles: (
("home", $home-color, lighten($home-color, 5%), darken($home-color, 5%)),
("create", $content-color, lighten($content-color, 5%), darken($content-color, 5%)),
("engage", $myportfolio-color, lighten($myportfolio-color, 5%), darken($myportfolio-color, 5%)),
("manage", $groups-color, lighten($groups-color, 5%), darken($groups-color, 5%))
("home", $home-color, darken($home-color, 2%), darken($home-color, 5%)),
("create", $content-color, darken($content-color, 2%), darken($content-color, 5%)),
("engage", $myportfolio-color, darken($myportfolio-color, 2%), darken($myportfolio-color, 5%)),
("manage", $groups-color, darken($groups-color, 2%), darken($groups-color, 5%))
);
.nav-main .navbar-nav {
......
/*
* Modification to bootstraps default navbar components
*/
// Header messagebox form
.navbar-messages {
&:hover,
&:focus {
color: #FFF;
}
}
......@@ -16,12 +16,12 @@
}
// custom block heading
// custom block heading
.column-layout {
&:nth-child(3n+1) {
.panel-secondary {
&:nth-child(5n+1) > .panel-heading, .panel-heading-nested {
background-color: #0591ce;
background-color: #047DB1;
color: #FFFFFF;
}
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
......@@ -29,11 +29,11 @@
color: #FFFFFF;
}
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
background-color: #f29907;
background-color: #A66700;
color: #FFFFFF;
}
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #799323;
background-color: #5B6E1C;
color: #FFFFFF;
}
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
......@@ -45,11 +45,11 @@
&:nth-child(3n+2) {
.panel-secondary {
&:nth-child(5n+1) > .panel-heading, .panel-heading-nested {
background-color: #f29907;
background-color: #A66700;
color: #FFFFFF;
}
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
background-color: #799323;
background-color: #5B6E1C;
color: #FFFFFF;
}
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
......@@ -57,7 +57,7 @@
color: #FFFFFF;
}
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #0591ce;
background-color: #047DB1;
color: #FFFFFF;
}
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
......@@ -73,7 +73,7 @@
color: #FFFFFF;
}
&:nth-child(5n+2) > .panel-heading, .panel-heading-nested {
background-color: #0591ce;
background-color: #047DB1;
color: #FFFFFF;
}
&:nth-child(5n+3) > .panel-heading, .panel-heading-nested {
......@@ -81,11 +81,11 @@
color: #FFFFFF;
}
&:nth-child(5n+4) > .panel-heading, .panel-heading-nested {
background-color: #f29907;
background-color: #A66700;
color: #FFFFFF;
}
&:nth-child(5n+5) > .panel-heading, .panel-heading-nested {
background-color: #799323;
background-color: #5B6E1C;
color: #FFFFFF;
}
}
......@@ -317,4 +317,4 @@
font-weight: 300;
color: rgba(255, 255, 255, 0.6);
padding-right: 5px;
}
\ No newline at end of file
}
......@@ -11,7 +11,7 @@
> .panel-heading, .panel-heading-nested {
border-bottom: 0;
background-color: #0591ce;
background-color: #047DB1;
color: #FFFFFF;
a {
......
......@@ -61,7 +61,7 @@ $text-color: $theme-text-color;
//** Global textual link color.
$link-color: #0162a7;
//** 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: underline;
......@@ -393,7 +393,7 @@ $navbar-default-border: transparent;
// Navbar links
$navbar-default-link-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-bg: #F1F1F1;
$navbar-default-link-disabled-color: #ccc;
......
......@@ -3,11 +3,11 @@
//Arrow component variables
$arrow-color: $brand-primary;
$arrow-text-color: #fff;
$arrow-link-color: #ca0238;
$arrow-link-color: #677D1E;
$arrow-link-hover-color: $text-color;
$arrow-link-active-color: $brand-primary;
$arrow-link-background-color: #fff;
$arrow-link-group-color: #799323;
$arrow-link-group-color: #677D1E;
// color for the secondary title in sections (cf. groups)
$section-heading-color: #999;
......@@ -18,5 +18,5 @@ $admin-title-bg: transparent;
$dashboard-widget-bg: darken(#f9f9f9, 2%);
$dashboard-widget-color: #FFFFFF;
$help-icon-color: #53add4;
$help-icon-color: #047DB1;
$rss-icon-color: #FE6500;
......@@ -15,6 +15,7 @@
// Navigation
@import "../layout/nav/main-nav";
@import "../layout/nav/nav-tabs";
@import "../layout/nav/navbar";
// Forms
@import "../form/form-group";
......
......@@ -2,7 +2,7 @@
* 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-text-color: #333;
$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