_bubbles.sass

// CSS Speech Bubbles
// Based on the work of David DeSandro: http://desandro.com/resources/css-speech-bubble-icon/
// Compass Extension by Eric Meyer: http://www.oddbird.net/


// the color of the bubble
!default_bubble_color ||= #00f
// the color of any text in a text-bubble
!default_bubble_text_color ||= #fff
// the padding around any text in a text-bubble
!default_bubble_h_padding ||= .5em
// the size of the bubble nib
!default_bubble_point_size ||= .5em
// the radius of the bubble corners
!default_bubble_radius ||= .25em

// EXTRA MARKUP NEEDED FOR IE //
!markup ||= "false"
!bubble_point_markup ||= ".point"
!bubble_markup ||= ".bubble"
!default_bubble_background_color ||= #fff

// creates the actual nib for the bubble
=bubble-point(!point-size = !default_bubble_point_size, !bubble-padding = !default_bubble_h_padding, !bubble-color = !default_bubble_color)
  display: block
  position: absolute
  left= !bubble-padding
  bottom= 0 - !point_size*.95
  width: 0
  height: 0
  border:
    left= !point_size "solid" !bubble-color
    bottom= !point_size "solid" !default_bubble_background_color
    bottom= !point_size "solid" rgba(0,0,0,0) 
  overflow: hidden

// creates the actual speech bubbles in non-text situations
=create-speech-bubble(!bubble-color = !default_bubble_color, !width = 3em, !height = "auto", !top = 0, !left = 0)
  display: block
  position: absolute
  top= !top
  left= !left
  width= !width
  height= !height
  background-color= !bubble-color
  text-align: center
  +border-radius(!default_bubble_radius)


// add a speech bubble around some text
=text-speech-bubble(!bubble-color = !default_bubble_color, !text-color = !default_bubble_text_color, !point-size = !default_bubble_point_size, !point-push = !default_bubble_h_padding)
  +inline-block
  position: relative
  padding= 0 !default_bubble_h_padding
  background-color= !bubble_color
  color= !text-color
  +border-radius(!default_bubble_radius)
  
  @if !markup == "true"
    > #{!bubble_point_markup}
      +bubble-point(!point-size, !point-push, !bubble-color)
  @else
    &:after
      content: " "
      +bubble-point(!point-size, !point-push, !bubble-color)


// add a speech bubble outside the text, and position it absolutely from the top left
=outside-speech-bubble(!top, !left, !width, !height, !bubble-color = !default_bubble_color, !point-size = !default_bubble_point_size, !point-push = !point-size)
  position: relative
  
  @if !markup == "true"
    > #{!bubble_markup}
      content: " _ "
      +create-speech-bubble(!bubble-color, !width, !height, !top, !left)
      color= !bubble-color
      color= rgba(0,0,0,0)
      
    > #{!bubble_point_markup}
      +bubble-point(!point-size, !point-push, !bubble-color)
      bottom: auto
      top= !top + !height
      left= !left
      margin-left= !point-push
      
  @else
    &:before
      content: " _ "
      +create-speech-bubble(!bubble-color, !width, !height, !top, !left)
      color= !bubble-color
      color= rgba(0,0,0,0)
      
    &:after
      content: " "
      +bubble-point(!point-size, !point-push, !bubble-color)
      bottom: auto
      top= !top + !height
      left= !left
      margin-left= !point-push


// add a speech bubble inline with the text
=inline-speech-bubble(!bubble-color = !default_bubble_color, !width = 3em, !height = 1em, !point-size = !default_bubble_point_size, !point-push = !point-size)
  +inline-block
  padding-left= !width*1.1
  
  +outside-speech-bubble(0,0,!width,!height,!bubble-color,!point-size,!point-push)


// adjust the colors on any bubble
=bubble-color(!bubble-color, !type = "text", !text-color = "false")
  @if !type == "text"
    background-color= !bubble-color
    @if !text-color != "false"
      color = !text-color
    @if !markup == "true"
      > #{!bubble_point_markup}
        border-left-color= !bubble-color
    @else
      &:after
        border-left-color= !bubble-color
  @else
    @if !markup == "true"
      > #{!bubble_markup}
        background-color= !bubble-color
      > #{!bubble_point_markup}
        border-left-color= !bubble-color
    @else
      &:before
        background-color= !bubble-color
      &:after
        border-left-color= !bubble-color
  

// alternatives for adjusting bubble colors
=text-bubble-color(!bubble-color, !text-color = "false")
  +bubble-color(!bubble-color, "text", !text-color)
  
=empty-bubble-color(!bubble-color)
  +bubble-color(!bubble-color, "empty")

=inline-bubble-color(!bubble-color)
  +empty-bubble-color(!bubble-color)
  
=outside-bubble-color(!bubble-color)
  +empty-bubble-color(!bubble-color)


// adjust the corner radius on any bubble
=bubble-radius(!radius, !type = "text")
  @if !type == "text"
    +border-radius(!radius)
  @else
    @if !markup == "true"
      > #{!bubble_markup}
        +border-radius(!radius)
    @else
      &:before
        +border-radius(!radius)


// alternatives for adjusting bubble radius
=text-bubble-radius(!radius)
  +bubble-radius(!radius)

=empty-bubble-radius(!radius)
  +bubble-radius(!radius, "empty")

=inline-bubble-radius(!radius)
  +empty-bubble-radius(!radius)

=outside-bubble-radius(!radius)
  +empty-bubble-radius(!radius)


// add a vertical gradient to any bubble
// the final color in your gradient must be delared as !end-color
// and will be used as fallback for browsers that don't support gradients.
=bubble-gradient(!stops, !end-color, !type = "text")
  @if !type == "text"
    background-color= !end-color
    +linear-gradient(!stops)
    @if !markup == "true"
      > #{!bubble_point_markup}
        border-left-color= !end-color
    @else
      &:after
        border-left-color= !end-color
  @else
    @if !markup == "true"
      > #{!bubble_markup}
        background-color= !end-color
        +linear-gradient(!stops)
      > #{!bubble_point_markup}
        border-left-color= !end-color
    @else
      &:before
        background-color= !end-color
        +linear-gradient(!stops)
      &:after
        border-left-color= !end-color

// alternatives for adding bubble gradients
=text-bubble-gradient(!stops, !end-color)
  +bubble-gradient(!stops, !end-color)

=empty-bubble-gradient(!stops, !end-color)
  +bubble-gradient(!stops, !end-color, "empty")

=inline-bubble-gradient(!stops, !end-color)
  +empty-bubble-gradient(!stops, !end-color)

=outside-bubble-gradient(!stops, !end-color)
  +empty-bubble-gradient(!stops, !end-color)

ie.html

    <section id="inside">
      <span class="point"></span>
      <span class="bubble"></span>
      <p>
        There are 
        <em>
          <span class="point"></span>
          35
        </em> 
        comments on this item.
      </p>
      
      <p>
        There are 
        <a href="#">
          <span class="point"></span>
          35 comments
        </a> 
        on this item.
      </p>
      
      <p class="comment">
        <span class="point"></span>
        There are 35 comments on this item.
      </p>
    </section>
    
    <section id="inline">
      <span class="point"></span>
      <span class="bubble"></span>
      <p>
        There are 
        <em>
          <span class="point"></span>
          <span class="bubble"></span>
          35
        </em> 
        comments on this item.
      </p>
      
      <p>
        There are 
        <a href="#">
          <span class="point"></span>
          <span class="bubble"></span>
          35 comments
        </a> 
        on this item.
      </p>
      
      <p class="comment">
        <span class="point"></span>
        <span class="bubble"></span>
        There are 35 comments on this item.
      </p>
    </section>

ie.sass

!markup = "true"
@import compass.sass
@import bubbles.sass

section
  padding: 0 20em
  margin: 3em 0

#inside
  +outside-speech-bubble(0, 8.5em, 10em, 4.5em, #99f, 1em)
  em
    +text-speech-bubble
    font-style: normal
  a
    &:link, &:visited
      +text-speech-bubble("green", "white")
    &:hover, &:active, &:focus
      +text-bubble-color("red")
  .comment
    +text-speech-bubble(#f00,#fff,1em,1.5em)
    text-align: center
    padding: 1.5em

#inline
  +outside-speech-bubble(0, 41.5em, 18.5em, 4.5em, #9cc, 1em)
  +empty-bubble-radius(1em)
  +bubble-gradient(color_stops(red, blue), "blue", "empty")
  &:hover
    +empty-bubble-color(darken(#9cc,50))
    +empty-bubble-gradient(color_stops(blue, green), "green")
  em
    +inline-block
    padding-left: 3.4em
    +inline-speech-bubble("blue", 3em, 1.5em)
  a
    &:link, &:visited
      +inline-speech-bubble("green",4em)
      color: green
    &:hover, &:focus, &:active
      +inline-bubble-color("red")
      color: red
  .comment
    +inline-speech-bubble("red",3em,1.5em)
    display: block

index.html

    <section id="inside">
      <p>There are <em>35</em> comments on this item.</p>
      <p>There are <a href="#">35 comments</a> on this item.</p>
      <p class="comment">There are 35 comments on this item.</p>
    </section>
    
    <section id="inline">
      <p>There are <em>35</em> comments on this item.</p>
      <p>There are <a href="#">35 comments</a> on this item.</p>
      <p class="comment">There are 35 comments on this item.</p>
    </section>

index.sass

@import compass.sass
@import bubbles.sass

section
  padding: 0 20em
  margin: 3em 0

#inside
  +outside-speech-bubble(0, 8.5em, 10em, 4.5em, #99f, 1em)
  em
    +text-speech-bubble
    font-style: normal
  a
    &:link, &:visited
      +text-speech-bubble("green", "white")
    &:hover, &:active, &:focus
      +bubble-color("red")
  .comment
    +text-speech-bubble(#f00,#fff,1em,1.5em)
    text-align: center
    padding: 1.5em

#inline
  +outside-speech-bubble(0, 41.5em, 18.5em, 4.5em, #9cc, 1em)
  +empty-bubble-radius(1em)
  +bubble-gradient(color_stops(red, blue), "blue", "empty")
  &:hover
    +empty-bubble-color(darken(#9cc,50))
    +empty-bubble-gradient(color_stops(blue, green), "green")
  em
    +inline-block
    padding-left: 3.4em
    +inline-speech-bubble("blue", 3em, 1.5em)
  a
    &:link, &:visited
      +inline-speech-bubble("green",4em)
      color: green
    &:hover, &:focus, &:active
      +inline-bubble-color("red")
      color: red
  .comment
    +inline-speech-bubble("red",3em,1.5em)
    display: block