openstack
/
openstack-manuals
Code Issues Proposed changes

Use white'ish text for "eol", "obsolete" deprecated badges 

The deprecated badge (which should really be called version banner or
something, given that it's not really a "badge" and appears for
non-deprecated releases too) is a simple div with some text, a close
button, and a Bootstrap dropdowns [1] to switch between versions.
This div has three classes, 'deprecated-badge', 'fixed', and
'deprecated-badge-X', where 'X' is the series status (i.e.
'deprecated-badge-current').

We were setting the background color of the div using the
'.deprecated-badge' selector and then overriding this using the
version-specific class selector. This background color was inherited by
the dropdown.

This had the end result of giving a unique color to the overall div for
different releases but the dropdown, which wasn't being overridden on a
per-version basis, stayed the same, yielding a consistent blue dropdown
regardless of the background.

We fix this by setting the background-color attributes on the dropdown
buttons explicitly, removing the background-color from the
'deprecated-badge' class. While we're at it, we also fix the text color
for the main div, so that we're not trying to read dark blue text on a
dark red background.

[1] https://getbootstrap.com/docs/4.0/components/dropdowns/

Change-Id: I8dbf54ff90164b2c2945ba74fee4bcf51eaecabb
Signed-off-by: Stephen Finucane <sfinucan@redhat.com>
This commit is contained in:
Stephen Finucane 2019-02-21 14:42:40 +00:00
parent 206a92cf35
commit 48a16b0b4b
1 changed files with 38 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
www/static/common/css/deprecated-badge.css
View File

@ -1,7 +1,6 @@
/* deprecated badge css */
.deprecated-badge {
background: #2A4E68;
padding: 5px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.46);
-webkit-font-smoothing: subpixel-antialiased;
@ -60,41 +59,51 @@ a.deprecated-badge-right {
margin-top: 50px !important;
}
.deprecated-badge-obsolete {
background: #b33a3a !important;
}
.deprecated-badge-obsolete,
.deprecated-badge-eol {
background: #b33a3a !important;
background: #b33a3a;
}
.deprecated-badge-current {
background: #30739C !important;
}
.deprecated-badge-maintained {
background: #eaeaea !important;
}
.deprecated-badge-development {
background: #eaeaea !important;
}
.deprecated-badge-development a, .deprecated-badge-development p {
}
.deprecated-badge-maintained a, .deprecated-badge-maintained p {
}
.deprecated-badge-current a, .deprecated-badge-current p {
.deprecated-badge-obsolete a,
.deprecated-badge-obsolete p,
.deprecated-badge-eol a,
.deprecated-badge-eol p {
color: #edf2f7;
}
.deprecated-badge .container
{
.deprecated-badge-obsolete .docs-dropdown,
.deprecated-badge-eol .docs-dropdown {
background: #922f2f;
}
.deprecated-badge-maintained,
.deprecated-badge-development {
background: #eaeaea;
}
.deprecated-badge-maintained .docs-dropdown,
.deprecated-badge-development .docs-dropdown {
background: #cfcfcf;
}
.deprecated-badge-development a,
.deprecated-badge-development p,
.deprecated-badge-maintained a,
.deprecated-badge-maintained p {
/* use default */
}
.deprecated-badge-current {
background: #30739c;
}
.deprecated-badge-current .docs-dropdown {
background: #2a4e68;
}
.deprecated-badge-current a,
.deprecated-badge-current p {
color: #edf2f7;
}
.deprecated-badge .deprecated-badge-close-button{