mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-04 18:38:25 -04:00
9e5529bea5
We grey-out the non-current step in the tour so the user knows whether they’re at step 1, 2, or 3. This is done using CSS opacity. IE8 doesn’t support the standard CSS opacity syntax. But it does support the weird, old, Microsoft-specific `filter:` syntax. So this commit: - makes the greying out a class rather than an inline style, to reduce duplication - adds the filter syntax so the greying out works in IE8
210 lines
2.9 KiB
SCSS
210 lines
2.9 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;
|
|
}
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $error-colour;
|
|
}
|
|
|
|
&:hover {
|
|
color: $mellow-red;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.banner-mode {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin: 0 0 $gutter 0;
|
|
padding: $gutter-half;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
a {
|
|
|
|
&:link,
|
|
&:visited {
|
|
color: $white;
|
|
}
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: $light-blue-25;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: $yellow;
|
|
color: $govuk-blue;
|
|
}
|
|
|
|
}
|
|
|
|
&-action {
|
|
display: block;
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|