spectacular/docs/css/page.styl

Advanced BDD framework for CoffeeScript and JavaScript

dark_blue_const = #0b1d26

dark_blue(op)
  rgba(22,58,76,op)

success(op)
  rgba(100,180,50,op)

pending(op)
  rgba(255,200,90,op)

error(op)
  rgba(255,150,20,op)

failure(op)
  rgba(255,40,20,op)

skipped(op)
  rgba(255,20,220,op)

blue_gray(op)
  rgba(86,122,120,op)

light_gray(op)
  rgba(207,231,230,op)

light_blue(op)
  rgba(56,147,193,op)

green = success(1)
red = failure(1)
blue = light_blue(1)
magenta = skipped(1)
yellow = pending(1)

opacity()
  opacity arguments
  -webkit-opacity arguments
  -moz-opacity arguments
  -o-opacity arguments

transition()
  transition arguments
  -webkit-transition arguments
  -moz-transition arguments
  -o-transition arguments

transform()
  transform arguments
  -webkit-transform arguments
  -moz-transform arguments
  -o-transform arguments

box-sizing()
  box-sizing arguments
  -webkit-box-sizing arguments
  -moz-box-sizing arguments
  -o-box-sizing arguments


border-radius()
  border-radius arguments
  -webkit-border-radius arguments
  -moz-border-radius arguments
  -o-border-radius arguments

box-shadow()
  box-shadow arguments
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  -o-box-shadow arguments

text-shadow()
  text-shadow arguments
  -webkit-text-shadow arguments
  -moz-text-shadow arguments
  -o-text-shadow arguments

text-overflow()
  text-overflow arguments
  -webkit-text-overflow arguments
  -moz-text-overflow arguments
  -o-text-overflow arguments

body
  color #333

a
  text-decoration none
  color #1b98f8


#layout
  padding-left 450px
  position relative


#nav, #list
  position fixed
  top 0
  bottom 0
  overflow auto

#nav
  margin-left -450px
  width 200px
  background dark_blue_const
  // background rgb(37, 42, 58)
  text-align center
  padding 2em 0

[class^="icon"]
  margin-right 4px

#list
  margin-left -250px
  width 250px
  border-right 1px solid #ddd

.primary-button
.secondary-button
  box-shadow none

.primary-button, #download a
  color #fff
  background #1b98f8
  margin 1em 0

.secondary-button
  background #fff
  border 1px solid #ddd
  color #666
  padding 0.5em 2em
  font-size 80%

#nav

  .pure-menu
    background transparent
    border none
    text-align left

  .pure-menu a:hover,
  .pure-menu a:focus
    background dark_blue(1)

  .pure-menu a
    color light_gray(1)
    margin-left 0.5em

  .pure-menu-heading
    border-bottom none
    font-size 110%
    color rgb(75, 113, 151)

  .badges
    margin-top 40px
    text-align left
    margin-left 0.5em
    padding-left 20px
    a
      display block
      margin 6px 0

  hr
    height 0
    border none
    border-bottom 1px solid blue

#nav .nav-menu-button
  display none


#main > *, #list > *
  margin-left 10px
  margin-right 10px

#list
  padding 2em 0
  h2
    margin-top 0
    font-size 1.4em

#main
  padding 1.2em 0
  h1
    margin-top 0


roboto = 'Roboto', sans-serif

body
  font-family roboto
  font-weight 300


#download
  text-align center

  a.download
    display inline-block
    border-radius 6px
    width auto
    padding 16px 24px
    font-size 30px
    margin auto
    margin-top 11px
    margin-bottom 14px
    font-weight 100

#main aside
  background error(0.2)
  border 1px solid error(0.4)
  padding 8px 8px 8px 38px
  border-radius 3px
  position relative
  margin-top 20px

  p
    &:first-child
      margin-top 0
    &:last-child
      margin-bottom 0

  &:before
    position absolute
    left 8px
    top 8px
    display inline-block
    content "\f0eb"
    font-family FontAwesome
    color error(0.5)
    font-size 38px

#reporter
  margin-left 210px !important
  aside:before
    content inherit

.gutter
  max-width 800px

.fork
  font-variant small-caps

table
  border 1px solid #e4e4e4
  border-radius 3px
  margin-top 16px
  max-width 800px

  tr
    background white
    transition background 1s ease-out

    &.deprecated
      td:last-child div:before
        content 'deprecated'
        text-transform uppercase
        font-size 0.7em
        background failure(0.4)
        line-height 10px
        padding 3px
        border-radius 3px
        margin-right 4px
        font-weight bold
        display inline-block
        vertical-align middle
        color white

    &:hover
      transition background 0.2s ease-in
      background #fafafa


  tr.no-padding
    td
      padding 0px
      cursor pointer

      & > div
        padding 3px 8px


      &:last-child div
        padding 3px 40px 3px 8px

        &.ellipsis:after
          content: '•••'
          position absolute
          right 54px
          top 8px
          font-family monospace
          background #efefef
          border 1px solid #e4e4e4
          padding 2px
          border-radius 2px
          font-size 10px
          line-height 12px
          opacity 1
          transition all 0.2s ease-out

  tr.open td:last-child div.ellipsis:after
    opacity 0


  td
    border-bottom 1px solid #e4e4e4
    vertical-align top
    padding 8px
    line-height 1.6em

    code
      display inline-block
      vertical-align middle
      line-height 1em
      white-space normal
      word-wrap break-word

  td:first-child
    text-align right

    code
      background error(0.2)
      border 1px solid error(0.4)

  tr:last-child td
    border none

code
  background #efefef
  border 1px solid #e4e4e4
  padding 2px
  border-radius 2px
  line-height 1em
  display inline-block
  font-size 14px
  white-space pre
  vertical-align baseline

#nav header
  padding 0 0 20px
  position relative
  text-align left
  padding-left 10px

  h1
  h2
    margin 0
    display inline-block
    font-size: 1.4em

  h1
    color #ababab

  & + h1 + p a
    border none

  h2
    position relative
    color blue
    font-weight 300

  nav
    position absolute
    top 24px
    right 0
    ul
      li
        list-style none
        display inline-block

        a
          border none
          padding 6px 8px
          transition background 0.2s linear
          background white
          border-radius 4px
          &:hover
            background #e4e4e4

.online-test-tool #nav header
  h2:after
    font-family FontAwesome
    content: ''
    background url(../img/waiting.gif) no-repeat 2px 6px
    display block
    position absolute
    top 0
    left 100%
    width 40px
    height 40px

html.success #nav header
  h2
    color green

  h2:after
    content "\f00c"
    color green
    background none

html.failure #nav header
  h2
    color: red

  h2:after
    content "\f00d"
    color: red
    background none

p
ul
  line-height 1.6em

h1
  font-weight 100
  font-size 3em
h2
  font-weight 100
  font-size 2.35em
h3
  font-weight 300
  font-size 1.6em

h4
  font-weight 100
  font-size 1.4em

.code
  position relative
  overflow hidden
  background #f8f8f8
  border 1px solid #e4e4e4
  transition height 0.3s ease-in
  max-width 800px

  &:hover .toggle
    margin-top 0

  pre
    transition left 0.5s ease-out
    border none
    position absolute
    width 100%



  .toggle
    overflow hidden
    position absolute
    top 0
    right 0
    cursor pointer
    display block
    line-height 15px
    width 100px
    height 21px
    margin-top -21px
    z-index 10
    background #e4e4e4
    font-size 10px
    text-transform uppercase
    border-radius 0 0 0 4px
    box-shadow 0 1px 3px rgba(0,0,0,1)
    transition margin-top 0.2s ease-in

    span
      padding 4px 8px
      display block
      text-align center
      position relative
      transition all 0.2s ease-in

      &:after
        background success(0.3)
        width 100%
        height 100%
        left 100%
        top 0
        padding 4px 8px
        display block
        position absolute
        content attr(data-text)
        transition all 0.2s ease-in
        box-sizing border-box

    &:hover
      span
        transform translate(-100%,0)


  .lang-coffeescript
    left 0
  .lang-javascript
    left 100%


  &.compiled
    .toggle span:first-child
      margin-top -23px

    .lang-javascript
      display block
      left 0

    .lang-coffeescript
      left -100%

hr
  height 0px
  border none
  border-top 1px solid #ccc

pre
  background dark_blue(1)
  border 1px solid #e4e4e4
  color light_gray(1)
  background dark-blue
  overflow auto
  margin 0
  box-shadow inset 0 1px 3px rgba(0,0,0,1)

  code
    background none
    border none
    padding 8px
    padding-left 56px
    display block
    line-height 19px
    font-size 14px
    word-wrap initial

  ol
    box-shadow 1px 1px 3px rgba(0,0,0,1)
    padding 8px
    margin 0
    float left
    top 0
    left 0
    border 0
    background #efefef
    border-right 1px solid #e4e4e4
    height 100%

  li
    width 22px
    color dark_blue(1)
    margin 0
    padding 3px 4px
    text-align right
    height 1em
    font-size 13px
    display block
    list-style none
    position relative

  .subst
    color light_gray(1)

  .keyword
  .operators
  .function
    color greenyellow

  .punctuation
  .hash_begin
  .hash_end
  .params_begin
  .params_end
  .property_end
  .class
  .group_begin
  .group_end
    color light-grey

  // .params
  // .subst
  // .hash
  // .text
  //   color code_color

  .string
  .heredocs
  .value
    color yellowgreen

  .string_begin
  .string_end
  .heredocs_begin
  .heredocs_end
  .embedded_begin
  .embedded_end
    color red

  .number
    color DeepPink

  .literal
  .top_level
  .constant
  .char_range_begin
  .char_range_end
  .range_begin
  .range_end
  .regexp_operators
    color orange

  .title
  .property
  .class_end
  .attribute
    color DeepSkyBlue

  .regexp
  .hereregexp
  .subst_begin
  .subst_end
    color red

  .comment
  .embedded
  .string_quote
    color #999

  .global
  .escaped
  .char_range
    color

  .char_range > .escaped
    color pink

#toc
  for i in 2..6
    .level{i}
      margin-left (i - 2) * 20px
  ul
    padding-left 10px
  a:hover
    text-decoration underline

@media (max-width: 1151px)
  table
    width auto
    display block
    thead, tbody, tr, td
      display block

    td
      &:last-child
        padding-left 20px
      &:first-child
        text-align left
        border-bottom none

@media (max-width: 867px)
  #list
  #main
    width 100%
    position static
    margin-left 200px
    display block
    width auto

  #nav
    margin-left 0

  #layout
    padding-left 0px

  #list
    height auto
    border-right 0
    border-bottom 1px solid #ddd

  #main
    // position fixed
    // top 33%
    // right 0
    // bottom 0
    // left 200px
    // overflow auto

    pre, .code
      margin-left 0
      margin-right 0



@media (max-width: 480px)
  #nav
    padding 0
    header
      padding-top 0.2em
      padding-bottom 0

  #layout, #nav, #list, #main
    position static
    margin-left 0
    padding-left 0

  #nav
    width 100%
    height 40px
    position fixed
    z-index 100
    transition height 0.2s ease-out

  #list
    margin-top 40px

  #nav .nav-menu-button
    display block
    z-index 1
    top 0.5em
    right 0.5em
    position absolute

  #nav.active
    height 100%

  .nav-inner
    display none

  #nav.active .nav-inner
    display block

  .email-avatar
    width 40px
    height 40px