Files
notifications-admin/app/assets/stylesheets/components/banner.scss
Chris Hill-Scott cc713b4057 Remove code specific to IE8 and below
Our usage for these browsers in the last month is down to 0.2% of all
users, or 14 individual users, according to Google Analytics.

These users also visit about half the number of pages per sessions,
suggesting that they’re not signed in.
2019-09-03 10:10:27 +01:00

145 lines
2.0 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');
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;
}
}