mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-15 02:39:36 -04:00
7578bbcf0b
Since these two paragraphs sit on a blue background, they should have white text. But this was getting overridden when the `govuk-body` class was added in a previous commit, and the paragraphs appeared with black text. Previously these paragraphs were inheriting their colour from a parent element. But a class applied directly to the element is more specific. So this commit fixes the problem by being more specific again, by applying the colour to the element, in the context of it’s parent’s class.
183 lines
3.2 KiB
SCSS
183 lines
3.2 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include bold-19;
|
|
color: $button-colour;
|
|
display: block;
|
|
padding: govuk-spacing(3);
|
|
margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
|
|
text-align: left;
|
|
position: relative;
|
|
clear: both;
|
|
border: 5px solid $button-colour;
|
|
|
|
&-title {
|
|
@include bold-24;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.list-bullet {
|
|
@include copy-19;
|
|
}
|
|
|
|
}
|
|
|
|
%banner-with-tick,
|
|
.banner-with-tick {
|
|
padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
|
|
background-image: file-url('tick.png');
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: govuk-spacing(3) govuk-spacing(3);
|
|
|
|
}
|
|
|
|
.banner-default-with-tick {
|
|
@extend %banner;
|
|
@extend %banner-with-tick;
|
|
}
|
|
|
|
.banner-dangerous {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background: $white;
|
|
color: $text-colour;
|
|
border: 5px solid $error-colour;
|
|
margin: 15px 0;
|
|
text-align: left;
|
|
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.list {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tour {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: 10px;
|
|
margin-bottom: 0;
|
|
padding: govuk-spacing(6);
|
|
height: 425px;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
|
|
border: 0;
|
|
|
|
.heading-medium {
|
|
@include core-24;
|
|
}
|
|
|
|
p {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: govuk-spacing(6);
|
|
color: $white;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -1 * govuk-spacing(3);
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
font-weight: bold;
|
|
display: block;
|
|
padding: 0 ;
|
|
margin: 0 0 govuk-spacing(6) 0;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:focus,
|
|
&:active {
|
|
color: $govuk-focus-text-colour;
|
|
outline: 10px solid $yellow;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: $link-hover-colour;
|
|
outline: 10px solid $link-hover-colour;
|
|
}
|
|
|
|
}
|
|
|
|
.greyed-out-step {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-dashboard {
|
|
|
|
$baseline-shift: 5px;
|
|
|
|
display: block; // for browsers that don't support flexbox
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
|
|
border-top: 1px solid $border-colour;
|
|
border-bottom: 1px solid $border-colour;
|
|
margin-bottom: govuk-spacing(6);
|
|
text-decoration: none;
|
|
|
|
&:focus {
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
}
|
|
|
|
&-count,
|
|
&-meta {
|
|
float: left; // for browsers that don't support flexbox
|
|
}
|
|
|
|
&-count {
|
|
@include govuk-font(36, $weight: bold, $tabular: true);
|
|
padding-right: 8px;
|
|
position: relative;
|
|
// remove the top of the extra line-height this introduces
|
|
top: $baseline-shift;
|
|
margin-top: -$baseline-shift;
|
|
flex: 0 1 0.85ch;
|
|
}
|
|
|
|
&-count-label {
|
|
@include govuk-font(24, $weight: bold);
|
|
text-decoration: underline;
|
|
padding-right: govuk-spacing(6);
|
|
margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
|
|
flex: 2 1 auto;
|
|
}
|
|
|
|
&-meta {
|
|
@include govuk-font(19);
|
|
float: right;
|
|
text-align: right;
|
|
flex: initial;
|
|
}
|
|
|
|
& + .banner-dashboard {
|
|
margin-top: -1 * govuk-spacing(6);
|
|
border-top: none;
|
|
}
|
|
}
|