mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-20 14:29:51 -04:00
9569521142
Works similarly to the delete template flow, because it’s a destructive, one-way action. Not on the edit template page, because it’s not something you want to be considering every time you’re editing a template. And we saw that people couldn’t find the delete button when it was on this page. Adds a bit more CSS for the `dangerous` banner type, because the content here is quite complicated. Breaking it into a list helps, but the spacing didn’t look right, so needed some tweaking. Can ship independently of the code that shows the redaction, but needs the API first.
181 lines
2.6 KiB
SCSS
181 lines
2.6 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include core-19;
|
|
background: $govuk-blue;
|
|
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');
|
|
@include ie-lte(8) {
|
|
background-image: file-url('tick-white-16px.png');
|
|
}
|
|
background-size: 19px;
|
|
background-repeat: no-repeat;
|
|
background-position: $gutter-half $gutter-half;
|
|
|
|
}
|
|
|
|
.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;
|
|
|
|
&:focus {
|
|
outline: 3px solid $yellow;
|
|
}
|
|
|
|
.button {
|
|
@include button($error-colour);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $error-colour;
|
|
}
|
|
|
|
&:hover {
|
|
color: $mellow-red;
|
|
}
|
|
|
|
}
|
|
|
|
.list {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tour {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: 10px;
|
|
padding: $gutter;
|
|
height: 475px;
|
|
overflow: hidden;
|
|
box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
|
|
|
|
.heading-medium {
|
|
@include core-24;
|
|
}
|
|
|
|
p {
|
|
|
|
margin-top: 0;
|
|
margin-bottom: $gutter;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& + p {
|
|
margin-top: -$gutter-half;
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
@include bold-19;
|
|
display: block;
|
|
padding: 0 ;
|
|
margin: 0 0 $gutter 0;
|
|
|
|
&: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;
|
|
}
|
|
|
|
}
|
|
|
|
.greyed-out-step {
|
|
|
|
$opacity: 0.6;
|
|
|
|
opacity: $opacity;
|
|
|
|
@include ie-lte(8) {
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.banner-warning {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background: $yellow;
|
|
color: $text-colour;
|
|
border: 5px solid $text-colour;
|
|
margin: $gutter 0 $gutter 0;
|
|
text-align: left;
|
|
padding: 20px;
|
|
|
|
.heading-medium {
|
|
@include bold-24;
|
|
margin: 0 0 $gutter-half 0;
|
|
}
|
|
|
|
.list {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
a:link,
|
|
a:visited {
|
|
color: $text-colour;
|
|
}
|
|
|
|
}
|