mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-19 01:44:45 -05:00
The details of each notification were not being hidden on page load in
Firefox.
Firefox does not natively support the `<details>` element, so we
polyfill it.
Because of the way the polyfill is written[1]
1. There can’t be any `<div>` elements inside the `<summary>` (this
commit changes them to be `<span>`s instead, and adds CSS to make
sure they wrap as before)
2. The contents to be shown/hidden must be wrapped in a `<div>` (which
this commit adds)
***
1. 48fde82c72/public/javascripts/govuk/details.polyfill.js (L90)
50 lines
692 B
SCSS
50 lines
692 B
SCSS
.api-notifications {
|
|
|
|
font-family: monospace;
|
|
border-bottom: 1px solid $border-colour;
|
|
|
|
&-item {
|
|
|
|
border-top: 1px solid $border-colour;
|
|
padding: 10px 0 0 0;
|
|
|
|
&-title {
|
|
color: $link-colour;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
&-recipient {
|
|
display: inline;
|
|
}
|
|
|
|
&-meta {
|
|
display: block;
|
|
color: $secondary-text-colour;
|
|
}
|
|
|
|
&-time {
|
|
text-align: right;
|
|
}
|
|
|
|
&-key {
|
|
display: inline-block;
|
|
padding-left: 46px;
|
|
}
|
|
|
|
&-data {
|
|
|
|
padding-left: 31px;
|
|
color: $secondary-text-colour;
|
|
|
|
&-item {
|
|
padding-bottom: 15px;
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|