panino/skins/original/assets/stylesheets/docblock.styl

API documentation generator with a strict grammar and testing tools

.docblock
  margin-bottom 70px

  header
    margin-bottom baseLineHeight

.breadcrumbs
  font-size: 12px
  font-family baseNarrowFontFamily
  white-space: nowrap
  margin-left 0
  color: grayLighter
  a
    color: grayLight
    border 0
    &:hover
      text-decoration underline
  li
    display: inline
    margin-right 4px
    & + li:before
      content: "»"
      margin-right 4px


// Docblock header
///////////////////////////

header
  > .type
    color grayLight
    text-transform lowercase
    font-weight bold
    font-style italic
    font-family baseNarrowFontFamily
  .name_prefix
    opacity: 0.5
  > .source
      line-height 1em
      margin-bottom (baseLineHeight/4)
      a
        font-size: 10px
        color: grayLighter
        margin-left: 10px
        text-decoration: none
        border 0
        &:hover
          text-decoration underline
// header labels
.labels span
  border-radius: 3px 3px 3px 3px
  color: white
  font-size: 12px
  font-weight: bold
  padding: 2px 5px 3px
  text-transform: lower
  white-space: nowrap
  margin-right: 10px
  &.read-only
    background-color: grayLight
  &.internal
    background-color: grayLight
  &.chainable
    background-color: grayLight
.deprecated-note
  color: #F00


// Document section
//////////////////////////////

.section
  position: relative
  // section header
  h3
    font-family baseNarrowFontFamily
    background-position right 3px
    background-repeat no-repeat
    display block
    position absolute
    left -145px
    top 0
    width 110px
    line-height 14px
    padding-right 20px
    padding-top 4px
    padding-bottom 4px
    margin 0
    text-align right
    font-weight normal
    font-size 14px;
    color: #888
  // section type icons
  &.classes h3
    background-image: url(asset_data_uri("class.png"))
    line-height 25px
    background-position right 8px
  &.class_methods h3
    background-image: url(asset_data_uri("class_method.png"))
  &.class_properties h3
    background-image: url(asset_data_uri("class_property.png"))
  &.constants h3
    background-image: url(asset_data_uri("constant.png"))
  &.constructor h3
    background-image: url(asset_data_uri("constructor.png"))
  &.description h3
    background-image: url(asset_data_uri("description.png"))
  &.events h3
    background-image: url(asset_data_uri("event.png"))
  &.instance_methods h3
    background-image: url(asset_data_uri("instance_method.png"))
  &.instance_properties h3
    background-image: url(asset_data_uri("instance_property.png"))
  &.mixins h3
    background-image: url(asset_data_uri("mixin.png"))
  &.namespaces h3
    background-image: url(asset_data_uri("namespace.png"))
    line-height 25px
    background-position right 8px
  &.subclasses h3
    background-image: url(asset_data_uri("subclass.png"))
  &.superclass h3
    background-image: url(asset_data_uri("superclass.png"))
  &.utilities h3
    background-image: url(asset_data_uri("utility.png"))

  &.sections h3
    background-image: url(asset_data_uri("section.png"))
    line-height 25px
    background-position right 8px

// typical section content for all, except description
.method-list
  margin-left: 0
  list-style: none;
  > li
    display inline-block
    &:after
      content: ","
      margin: 0 10px 0 2px
    &:last-child:after
      content ''
    > a
      border-bottom: 1px solid #888
      text-decoration: none
.method-details-list
  margin-left: 0
  list-style: none;
.method-description > h4 > a
  border-style: none none solid

// Main docblock content
////////////////////////


// External links are dashed
.section, .readme
  a
    border-style: none none dashed

a.link-short
.superclass a
  border-style: none none solid

// Inline `code`
p, li
  code
    background-color: #f8f8f8
    border: 1px solid #ddd
    border-radius: 3px
    box-shadow 0 0 2px #eee
    padding: 0 3px
    font-size: 13px


// Footer notes/relations/aliases
/////////////////////////////////

.note
  background-color: #eef
  border: 1px solid #69c
  box-shadow 0 0 3px #eef
.related-to
  background-color #fff6de
  border 1px solid #cccc99
  box-shadow 0 0 3px #fff6de
  > a
    margin-left 25px
.alias
  background-color #fff6de
  border 1px solid #cccc99
  box-shadow 0 0 3px #fff6de
  > ul
    display: inline
    padding: 0
    > li
      display: inline
      &:after
        content: ","
        margin: 0 5px 0 2px
      &:last-child:after
        content: ""
        margin: 0

.note, .related-to, .alias
  border-radius: 3px
  font-size: 12px
  padding: 3px 30px
  margin-bottom (baseLineHeight/2)
  a
    border-style: none none solid