Bug 30952: (follow-up) Use variables for primary and secondary greens

_variables.scss currently contains a variable,
$background-color-primary, which isn't used. I think we should use that
variable anywhere the color is used, and use SASS color calculation to
generate the secondary color.

The two colors can be compared in the search header: primary for the
background, secondary for the submit button color.

To test, apply the patch and rebuild the staff interface CSS.

Test various pages in the staff interface to confirm that the colors
look the same as before: Search header, tab colors, "Last patron"
button, etc.

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2022-09-27 18:08:16 +00:00 committed by Tomas Cohen Arazi
parent 7ae2978dcb
commit af0b2fb847
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
3 changed files with 6 additions and 5 deletions

View file

@ -180,7 +180,7 @@ a.navbar-toggle {
input[type="submit"], button[type="submit"] {
height: 31px;
background-color: #71B443;
background-color: $background-color-secondary;
color: white;
border: 0;
text-shadow: unset;

View file

@ -1,5 +1,6 @@
$green-text-color: #006100;
$background-color-primary: #408540;
$background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9);
// Copied from Bootstrap 5 without system-ui because of
// https://infinnie.github.io/blog/2017/systemui.html

View file

@ -78,7 +78,7 @@ a {
i, img {
text-align: center;
color: $green-text-color;
border: solid 3px #71B443;
border: solid 3px $background-color-secondary;
border-radius: 50%;
background-color: transparent;
width: 40px;
@ -2794,7 +2794,7 @@ td.bundle {
}
.ui-tabs-nav {
li {
background: #71B443;
background: $background-color-secondary;
border: 0;
margin-right: .4em;
border-radius: 4px 4px 0 0;
@ -2940,7 +2940,7 @@ td.bundle {
position: relative;
top: 1px;
white-space: nowrap;
background: #71B443;
background: $background-color-secondary;
&.active, &:hover {
font-weight: normal;
@ -3554,7 +3554,7 @@ code {
.nav-tabs {
> li {
> a {
background-color: #71B443;
background-color: $background-color-secondary;
color: #111;
line-height: 1.42857143;
margin-right: .4em;