spectacular/css/examples.styl

Advanced BDD framework for CoffeeScript and JavaScript

#examples
  position absolute
  z-index 2
  background light_gray
  top 0
  left 0
  right 0
  bottom 0
  box-shadow 0 0 5px 4px black
  border-radius 5px
  transition all 0.3s

  inner-div()
  counters()

  .all
    padding-left 8px
    font-size 30px
    line-height 36px
    text-shadow -1.5px -1.5px 0px very_dark_blue, 1.5px 1.5px 0px lighten(dark_blue, 5)
    display block
    position absolute
    left 48px
    top 4px

    span
      font-size 30px
      line-height 36px

  & > div
    overflow auto
    padding-top 48px
    height 100%
    border 1px solid transparentize(dark_blue, 0.8)

  & > header
    position absolute
    padding 0
    top 5px

  .header
    position absolute
    left 0
    right 0
    top 0
    height 48px
    z-index 2
    background-image linear-gradient(to bottom, dark_blue 0%, very_dark_blue 100%)
    border-radius 3px
    box-shadow 0 1px 3px transparentize(very_dark_blue, 0.5)

    #search
      position absolute
      height 36px
      top 4px
      left 54px
      text-align right
      right 102px

      input
        font-family Roboto, Helvetica Neue, sans
        min-width 200px
        width 200px
        height 100%
        padding 5px 36px 3px 8px
        border-top 1px solid very_dark_blue
        border-left 1px solid very_dark_blue
        border-right 1px solid dark_blue
        border-bottom 1px solid dark_blue
        color light_gray
        overflow hidden
        white-space nowrap
        text-overflow ellipsis
        font-size 20px
        font-weight 100
        border-radius 4px
        box-sizing border-box
        box-shadow inset 0 1px 3px rgba(0, 0, 0, .5)
        background-image linear-gradient(to bottom, very_dark_blue 0%, dark_blue 100%)
        transition all 0.3s

        &:focus
          min-width 164px
          width 50%

      button
        border none
        width 30px
        height 30px
        position absolute
        font-size 15px
        right 0
        top 3px
        color medium_gray
        text-shadow 0 1px 2px rgba(0, 0, 0, .5)
        transition all 0.3s


    button
      color light_gray
      background transparent
      border none
      border-left 1px solid dark_blue
      border-right 1px solid very_dark_blue
      height 48px
      width 48px
      position relative
      font-size 32px
      cursor pointer

      &:active
        background dark_blue

      &.btn-open-left:after
        content ''
        display block
        position absolute
        margin-left 1px
        left 100%
        top 0
        height 100%
        border-left 1px solid dark_blue

      &.btn-open-right
        position absolute
        right 0px

      &.btn-collapse
        position absolute
        right 48px

        &:before
          content ''
          display block
          position absolute
          margin-left -2px
          left 0
          top 0
          height 100%
          border-left 1px solid very_dark_blue

  .value
    font-weight 400

  .example-group
    position relative
    color dark_blue

    & + .example-group
      border-top 1px solid transparentize(dark_blue, 0.9)

    for i in 0..20
      &.level{i}
        header
          padding-left (i + 1) * 20px + 8px

        article
          padding-left (i + 2) * 20px + 8px

    &:before
      position absolute
      content '\f13a'
      font-family FontAwesome
      display block
      width 20px
      height 20px
      top 8px
      left 5px
      transition all 0.2s
      opacity 0

    &:hover:before
      opacity 0.4

    &.success
      background transparentize(success, 0.8)

    &.failure
      background transparentize(failure, 0.8)

    &.collapse
      section
      article
        display none

      &:before
        content '\f138'

      header:after
        opacity 1


    header:after
      display inline-block
      background pending
      line-height 8px
      padding 2px 3px
      content '•••'
      border-radius 3px
      opacity 0
      transition all 0.3s

    header
    article
      cursor pointer
      margin 0
      font-weight 300
      padding 5px 8px

  .example
    & + .example, & + .example-group
      border-top 1px solid transparentize(dark_blue, 0.9)

for state in states
  .hide-{state[0]}
    #examples .{state[0]}
      display none

  #examples .example.{state[0]}
    background transparentize(state[1], 0.8)

    &.active
      background transparentize(light_blue, 0.7)

+for_small_phone()
  #examples
    .header
      #search
        overflow hidden


        input
          min-width 0px
          width 0px
          padding-right 20px
          &:focus
            min-width 100%

            & + button
              right 0

              i:after
                opacity 0

        button
          right -30px

          i:after
            content '\f002'
            font-family FontAwesome
            color medium_gray
            position absolute
            display block
            right 37px
            top 8px
            opacity 0.5
            transition all 0.3s

            z-index 2
            pointer-events: none

+greater_than(breakpoint_tablet)
  #examples
    width 66%

    .all
      display none

    .header
      button.btn-open-left
      button.btn-open-right
        display none

      button.btn-collapse
        right 0px

      #search
        right 54px
        left 6px

        input:focus
          width 100%


  .view-expanded #examples
    width 34%