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

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

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

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

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

  &__image{
    display: block;
    margin: 0 auto;
  }

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

  &__content{
    position: relative;

    &--vertical-center{
     @include breakpoint(large){
       @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;
    }
  }

  &--pushed-fixed{
    left: 300px;
    width: calc(100% - 300px);
    position: fixed;
    z-index: 1;
  }
}

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
ama_layout-4.10.1	app/assets/stylesheets/ama_layout/layout_components/banners.scss
ama_layout-4.10.0	app/assets/stylesheets/ama_layout/layout_components/banners.scss
ama_layout-4.9.0	app/assets/stylesheets/ama_layout/layout_components/banners.scss