Contents

//
// BLURBS
//

//
// Structure
//
// <div class="rf-blurb rf-blurb--[modifier]">
//   <p>Body</p>
// </div>
//

.rf-blurb {
  @extend %p;

  background-color: $prewhite;
  border-radius: $border-radius;
  padding: $list-padding;
  position: relative;
  width: 100%;

  &:before {
    background-color: $white;
    border-radius: 10px;
    content: '';
    display: block;
    font-family: $font-icon-f5;
    font-size: 18px;
    left: -11px;
    line-height: 19px;
    height: 18px;
    position: absolute;
    top: 14px;
    width: 18px;
  }

  p:last-child {
    margin-bottom: 0;
  }
}

//
// BLURB TYPES
//

// INFO

.rf-blurb--info {
  border-left: 4px solid $blue-bright;

  &:before {
    color: $blue-bright;
    content: "\f05a";
  }
}

// SUCCESS

.rf-blurb--success {
  border-left: 4px solid $green;

  &:before {
    color: $green;
    content: "\f058";
  }
}

// WARNING

.rf-blurb--warning {
  border-left: 4px solid $gold;

  &:before {
    color: $gold;
    content: "\f071";
    left: -12px;
  }
}

// ERROR

.rf-blurb--error {
  border-left: 4px solid $red;

  &:before {
    color: $red;
    content: "\f06a";
  }
}

// HIGHLIGHT

.rf-blurb--highlight {
  background-color: $baby-blue;

  &:before {
    display: none;
  }
}

// PLAIN (NO ICON)

.rf-blurb--plain:before {
  display: none;
}

// CONDENSED

.rf-blurb--condensed {
  padding-bottom: 10px;
  padding-top: 10px;

  // Moves blurb icon up to account for different margins
  &:before {
    top: 10px;
  }
}

// LARGE

.rf-blurb--large {
  @extend .rf-p--lead;
  padding: $list-padding * 2;

  &:before {
    top: 28px;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
ethosstyles-0.1.17	app/assets/stylesheets/components/_blurbs.scss
ethosstyles-0.1.16	app/assets/stylesheets/components/_blurbs.scss