Contents

.banner{
  position: relative; /* This is needed for the positioning of the close icon on the blue banners*/
  margin-bottom: $base-margin;

  &>:last-child{
    margin-bottom: 0;
  }

  &--blue{
    @extend .banner;
    background: $brand-blue-insurance;
    padding: $base-padding;
  }

  &--red{
    @extend .banner;
    background: $brand-red;
    padding: $base-padding;
  }

  &__title,
  &__text{
    color: $white;
  }

  &__container{
    @include grid-row;
    @include clearfix;
  }

  &__image{
    @include large-2;
    @include small-12;
  }

  &__content-container{
    @include large-10;
    @include small-12;
  }

  &__content{
      @include vertical-center;
  }

  &__link{
    @extend .link--white;
  }

  &__close{
    @extend .fa;
    @extend .fa-times-circle;
    position: absolute;
    top: 15px;
    right: 15px;

    &--white{
      @extend .banner__close;
      color: $white;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
ama_layout-4.6.4	app/assets/stylesheets/ama_layout/layout_components/banners.scss