mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-24 16:24:08 -04:00
eaa72074db
This commit makes the ‘how to do placeholders’ box part of the tour, with the same blue background. It also adds some Javascript enhancement so that: - it responds to the contents of the message template - has a ‘show me’ link which inserts ‘Dear ((name))’ into the template contents textbox We’ve found that this has helped people understnad what placeholders are, and how to do them.
195 lines
2.9 KiB
SCSS
195 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;
|
|
}
|
|
|
|
}
|
|
|
|
%banner-tip,
|
|
.banner-tip {
|
|
|
|
@extend %banner;
|
|
@include bold-19;
|
|
background-color: $yellow;
|
|
color: $text-colour;
|
|
text-align: left;
|
|
margin-top: 0;
|
|
|
|
a {
|
|
&:link,
|
|
&:visited {
|
|
padding: $gutter-half;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
p {
|
|
@include core-19;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
}
|
|
|
|
.banner-tip-with-tick {
|
|
@extend %banner-with-tick;
|
|
@extend %banner-tip;
|
|
background-image: file-url('tick-black.png');
|
|
}
|
|
|
|
.banner-info,
|
|
.banner-important {
|
|
@extend %banner;
|
|
background: $white;
|
|
color: $text-colour;
|
|
background-image: file-url('icon-important-2x.png');
|
|
background-size: 34px 34px;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
padding: 7px 0 5px 50px;
|
|
}
|
|
|
|
.banner-info {
|
|
background-image: file-url('icon-information-2x.png');
|
|
}
|
|
|
|
.banner-mode {
|
|
|
|
@extend %banner;
|
|
background: $govuk-blue;
|
|
color: $white;
|
|
margin-top: $gutter;
|
|
padding: $gutter-half;
|
|
|
|
p {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
&-action {
|
|
text-align: right;
|
|
}
|
|
|
|
}
|
|
|
|
.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 {
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
&-image-flush-bottom {
|
|
margin: 40px 0 -60px 0;
|
|
}
|
|
|
|
}
|