kss.css.sass

// Colors
// ---------------
$blue:              hsl(210, 53%, 51%)
$red:               hsl(27, 85%, 45%)

$white-grey:        hsl(0, 0%, 98%)
$light-grey:        hsl(0, 0%, 80%)
$grey:              hsl(0, 0%, 55%)
$dark-grey:         hsl(0, 0%, 22%)

$link-color:        $blue
$link-hover-color:  lighten($blue, 10%)


// Global
// ---------------

html, body
  height: 100%

body
  font-family: Helvetica, Arial, sans-serif
  font-size: 13px

#styleguide  
  a
    outline: none
    color: $link-color
    text-decoration: none
    img
      border: none
    &:hover
      color: $link-hover-color
      text-decoration: underline

  pre
    padding: 10px
    border: 1px solid $light-grey
    margin: 10px 0
    line-height: 1.2em
    color: $dark-grey
    background-color: $white-grey

  .clear
    clear: both
    height: 0
    font-size: 0
    line-height: 0
    overflow: hidden

  .clearfix
    display: inline-block
    height: 1%
    &:after
      content: "."
      display: block
      height: 0
      clear: both
      visibility: hidden

  .access
    display: none

// Layout
// ---------------
#styleguide
  height: 100%
  padding: 30px 20%
  background: white

#styleguide-header
  padding: 10px 20%
  font-size: 16px
  color: #666
  background: #f1f1f1
  border-bottom: 1px solid #ddd

#styleguide-sections
  float: left
  width: 10%
  margin:
    top: 20px
    right: 5%
  ol
    padding: 0
    margin: 40px 0
    list-style-type: decimal
    list-style-position: inside
  li
    color: $grey
  a
    display: block
    margin-bottom: 10px
    color: $grey
    &.selected
      color: black
      font-weight: bold

#styleguide-content
  float: left
  width: 85%


// Elements
//----------------------
h1.styleguide
  margin: 0 0 -5px 0
  font-size: 24px
  color: #000

.styleguide-example
  margin: 15px 0
  background: rgba(255, 255, 255, 0.5)
  border: 1px solid #ddd
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)
  > h3
    margin: 0
    padding: 5px
    color: #fff
    font-size: 12px
    text-transform: uppercase
    background: #333
    border-top: 1px solid #000
    em
      float: right
      text-transform: none
      font-style: normal
      font-weight: normal
      color: #999

.styleguide-description
  padding: 10px 5px
  background: #f1f1f1
  border-bottom: 1px solid #ddd
  p
    &:first-child
      margin-top: 0
    &:last-child
      margin-bottom: 0

.styleguide-element
  position: relative
  padding: 20px
  + .styleguide-element
    margin-top: -5px
    padding-top: 15px
    border-top: 1px solid #eee

.styleguide-modifier-name
  display: block
  position: absolute
  top: 0
  right: 0
  padding: 5px 8px
  font-size: 11px
  color: #999
  background: #f9f9f9
  border: 1px solid #eee
  border-top: none

.styleguide-html
  padding: 5px 10px
  background: #edf6f8
  border-top: 1px solid #dde7ea
  overflow: auto
  .highlight
    background: none

.styleguide-modifiers
  margin: 0 0 0 10px
  li
    list-style-type: none
    margin-left: 0
    strong
      font-family: Monaco, monospace
      font-size: 12px
      font-weight: normal
      color: #222

ul.styleguide-modifier
  padding-left: 20px

//= require application