utilities.sass

@import compass/reset.sass
@import compass/utilities.sass
@import yui/modules/base.sass
@import blueprint/modules/grid.sass
@import blueprint/modules/scaffolding.sass
@import compass/utilities/text/ellipsis.sass

html
  +yui-base

h2
  :margin-top 0
  :border-bottom 2px solid #777

#utilities
  +container

.example
  :border 2px solid #ccc
  :padding 4px

#links
  +column(8)

  .hover a
    +hover-link
  .colored a
    +link-colors(#C00, #C0C, #700, #707, #777)
  .unstyled
    :color #333
    a
      +unstyled-link
.mixin
  :font-family monospace
  :border
    :width 1px
    :style solid
  :border-color #ccc
  :border-color -moz-use-text-color
  :padding 2px
  :line-height 22px
  :white-space nowrap

#tag-cloud
  +column(8)
  ol
    :margin 0
    +inline-list
    +tag-cloud(1em)
    li
      +no-bullets

#lists
  +column(8, true)
  ul.inline
    +inline-list
  ul.comma-delimited
    +comma-delimited-list
  ol.pretty
    +pretty-bullets("blue_arrow.gif", 5px, 7px, 18px)

#tables
  +column(16)
  table.alternating
    :width 100%
    +alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
    +table-scaffolding
    +outer-table-borders(2px, #151A99)
    +inner-table-borders(1px, #151A99)

#ellipsis
  +column(8, true)
  td
    width: 50%
    +ellipsis

#floats
  +column(16)
  .clearfix-example
    :background #ddd
    :border 2px solid black
    :text-align center
    +clearfix
  .float-left-example, .float-right-example
    :border 1px solid black
    :padding 10px
    :margin 0 20px
    :width 25%
    :background #F9E5A7
  .float-left-example
    +float-left
  .float-right-example
    +float-right
  .pie-clearfix-example
    :background #ddd
    :border 2px solid black
    :text-align center
    :position relative
    +pie-clearfix
    .positioned-example
      :display block
      :position absolute
      :left -10px
      :top -10px
      :font-size 10px
      :width 10em
      :background #ccf
      :border 1px solid black