mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-03 10:18:46 -04:00
b549b98108
We should (and do) keep exact copies of SCSS files that have come from elsewhere so that we can easily upgrade them. But sometimes they don’t always pass our linting rules, or throw a lot of warnings, which is noisy. This commit: - moves such files into their own subdirectory - tells SCSS Lint to ignore files in this directory
165 lines
2.3 KiB
SCSS
165 lines
2.3 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include core-19;
|
|
background: $turquoise;
|
|
color: $white;
|
|
display: block;
|
|
padding: $gutter-half;
|
|
margin: $gutter-half 0 $gutter 0;
|
|
text-align: left;
|
|
position: relative;
|
|
clear: both;
|
|
|
|
&-title {
|
|
@include bold-24;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
.list-bullet {
|
|
@include copy-19;
|
|
}
|
|
|
|
}
|
|
|
|
%banner-with-tick,
|
|
.banner-with-tick {
|
|
padding: $gutter-half ($gutter + $gutter-half);
|
|
background-image: file-url('tick-white.png');
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: $gutter-half $gutter-half;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.banner-default-with-tick {
|
|
@extend %banner;
|
|
@extend %banner-with-tick;
|
|
}
|
|
|
|
.banner-dangerous {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background: $white;
|
|
color: $error-colour;
|
|
border: 5px solid $error-colour;
|
|
margin: 15px 0;
|
|
text-align: left;
|
|
|
|
.button {
|
|
@include button($error-colour);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-mode {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: $gutter;
|
|
padding: $gutter-half;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
&-action {
|
|
|
|
display: block;
|
|
text-align: right;
|
|
float: right;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: $yellow;
|
|
color: $govuk-blue;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tour {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: $gutter;
|
|
padding: $gutter * 2;
|
|
|
|
.heading-large {
|
|
margin: 0 0 $gutter 0;
|
|
}
|
|
|
|
p {
|
|
|
|
margin-bottom: $gutter;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -$gutter-half;
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
@include bold-24;
|
|
display: inline-block;
|
|
background-image: file-url('tour-next.png');
|
|
background-size: auto 24px;
|
|
padding: 0 23px 0 0;
|
|
background-position: right 3px;
|
|
background-repeat: no-repeat;
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
background-color: $link-hover-colour;
|
|
outline: 10px solid $link-hover-colour;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: $yellow;
|
|
outline: 10px solid $yellow;
|
|
}
|
|
|
|
}
|
|
|
|
img,
|
|
source {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&-image-flush-bottom {
|
|
margin: 40px 0 -60px 0;
|
|
}
|
|
|
|
}
|