mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-25 02:19:12 -04:00
f561bfe603
The polyfill we use for details/summary only renders the arrow if the browser doesn’t natively support the feature. The latest versions of Firefox _do_ now support the feature (after 5 years), but for some reason they don’t draw the arrow. So this commit forces the arrow to be polyfilled in all browsers, and hides the browser default one, for those browsers that do render it.
217 lines
2.5 KiB
SCSS
217 lines
2.5 KiB
SCSS
// Extra CSS overlaying elements
|
|
|
|
#global-header-bar {
|
|
background-color: $govuk-blue;
|
|
}
|
|
|
|
#global-header {
|
|
|
|
#logo {
|
|
|
|
white-space: nowrap;
|
|
font-size: 27px;
|
|
line-height: 32px;
|
|
|
|
img {
|
|
padding-right: 8px;
|
|
}
|
|
|
|
}
|
|
|
|
.header-proposition {
|
|
#proposition-links {
|
|
li {
|
|
padding: 0 0 0 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
@include media(desktop) {
|
|
#proposition-menu {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
a {
|
|
&:visited {
|
|
color: $link-colour;
|
|
}
|
|
}
|
|
|
|
.form-control-1-1 {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-control-5em {
|
|
|
|
width: 100%;
|
|
|
|
@include media(tablet) {
|
|
width: 5em;
|
|
}
|
|
|
|
}
|
|
|
|
.column-main {
|
|
|
|
> .heading-large {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
> .grid-row {
|
|
|
|
.heading-large {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.highlight {
|
|
font-family: monospace;
|
|
overflow-x: scroll;
|
|
padding: 10px 0 10px 10px;
|
|
}
|
|
|
|
.inline {
|
|
|
|
.block-label {
|
|
|
|
@include media(tablet) {
|
|
float: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.heading-xlarge {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.heading-medium {
|
|
margin-top: $gutter;
|
|
}
|
|
|
|
#footer {
|
|
|
|
.footer-categories {
|
|
|
|
@extend %site-width-container;
|
|
|
|
&-wrapper {
|
|
padding: 0 0 $gutter * 2;
|
|
margin: 0 0 $gutter;
|
|
border-bottom: 1px solid $border-colour;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0 0 $gutter-two-thirds;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.form-label {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
a[rel='external'] {
|
|
@include external-link-default;
|
|
@include external-link-16;
|
|
@include media(tablet) {
|
|
@include external-link-19;
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
color: $secondary-text-colour;
|
|
}
|
|
|
|
.button {
|
|
padding: 0.3em 0.6em 0.2em 0.6em;
|
|
}
|
|
|
|
.list-bullet {
|
|
|
|
.list-bullet {
|
|
list-style: circle;
|
|
}
|
|
|
|
}
|
|
|
|
details summary {
|
|
text-decoration: underline;
|
|
margin-bottom: $gutter-half;
|
|
}
|
|
|
|
.spreadsheet {
|
|
|
|
th,
|
|
.table-field-index {
|
|
background: $grey-4;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
th, td {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
border: 1px solid $border-colour;
|
|
}
|
|
|
|
td {
|
|
border-top: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.phase-banner-beta {
|
|
border: 0;
|
|
margin-bottom: -$gutter + 2px;
|
|
}
|
|
|
|
.body-copy-table {
|
|
|
|
table th,
|
|
table td {
|
|
font-size: 19px;
|
|
}
|
|
|
|
}
|
|
|
|
.tabular-numbers {
|
|
@include core-19($tabular-numbers: true);
|
|
}
|
|
|
|
summary::-moz-details-marker {
|
|
display: none;
|
|
}
|
|
summary::-ms-details-marker {
|
|
display: none;
|
|
}
|
|
summary::-o-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
summary::details-marker {
|
|
display: none;
|
|
}
|
|
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
details .arrow {
|
|
font-size: 16px;
|
|
}
|