Files
notifications-admin/app/assets/stylesheets/components/banner.scss
2016-02-08 12:02:22 +00:00

105 lines
1.5 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;
}
.banner-with-tick,
.banner-default-with-tick {
@extend %banner;
padding: $gutter-half ($gutter + $gutter-half);
&:before {
@include core-24;
content: '';
position: absolute;
top: $gutter-half;
left: $gutter-half;
margin-top: -2px;
}
}
.banner-info {
@extend %banner;
background: $govuk-blue;
color: $white;
a {
&:link,
&:visited {
color: $white;
text-decoration: underline;
}
&:hover {
color: $light-blue-25;
}
}
}
.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 {
@extend %banner;
background: $yellow;
color: $text-colour;
text-align: left;
font-weight: bold;
a {
&:link,
&:visited {
color: $text-colour;
text-decoration: underline;
}
}
ol {
list-style-type: decimal;
}
}
.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;
}