mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-23 20:01:01 -05:00
9435f69a6e
We have teams who are using the dashboard every day, and being confronted with this alarming yellow banner. There’s no action they need to do since they’re only looking at the messages sent. So this commit removes that banner from the dashboard. It also removes the CSS and HTML for it from the app entirely because this is the last remaining place we were using this style of banner.
156 lines
2.2 KiB
SCSS
156 lines
2.2 KiB
SCSS
%banner,
|
|
.banner,
|
|
.banner-default {
|
|
|
|
@include bold-19;
|
|
color: $button-colour;
|
|
display: block;
|
|
padding: $gutter-half;
|
|
margin: $gutter-half 0 $gutter 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: $gutter-half ($gutter + $gutter-half);
|
|
background-image: file-url('tick.png');
|
|
@include ie-lte(8) {
|
|
background-image: file-url('tick-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: $text-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;
|
|
margin-bottom: 0;
|
|
padding: $gutter;
|
|
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: $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) + ")";
|
|
}
|
|
|
|
}
|
|
|
|
}
|