notifications-admin/app/assets/stylesheets/components/banner.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-intro {

  margin: $gutter 0 0 0;
  padding: $gutter-half $gutter;
  background: $govuk-blue;
  color: $white;
  overflow: hidden;

  .heading-medium {
    @include core-24;
  }

  a {
    &:link,
    &:visited {
      color: $white;
    }

    &:hover,
    &:active {
      color: $light-blue-25;
    }
  }

  .button-block {
    line-height: 3.68em;
  }

  .button {

    @include core-19;
    background: $white;
    padding: 0.3684210526em 0.8421052632em 0.2105263158em 0.7421052632em;
    display: inline-block;
    margin-top: $gutter-half;
    margin-right: 0.3em;
    box-shadow: 0 2px 0 mix($govuk-blue, $text-colour);

    &:link,
    &:visited,
    &:hover {
      color: $govuk-blue;
    }

    &:hover {
      background: $light-blue-25;
      outline: none;
    }

  }

}

.banner-tour {

  @extend %banner;
  background: $govuk-blue;
  color: $white;
  margin-top: $gutter;
  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;
    }

  }

}

.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;
  }

}