kdf/docs/src/styl/main.styl

KD: a non-document focused UI Framework for web applications.

@import '../../../src/themes/default/kdfn.styl'

body
  font-family               'Open Sans', 'sans-serif'

section.home-section
  position                  relative
  overflow                  visible


.inner-wrapper
  rel()
  max-width                 1290px
  padding                   0 45px
  margin                    0px auto
  overflow                  visible
  border-top                1px solid transparent
  borderBox()


.kdtabview
  .kdtabhandlecontainer
    bg                      color, transparent
    border                  none
    height                  36px
    overflow                visible

    .kdtabhandle-tabs
      overflow              visible

    .kdtabhandle
      height                36px
      line-height           36px
      rounded               4px 4px 0 0
      margin-right          3px
      border                none
      padding               0 24px
      color                 #858585
      font-size             14px
      background            #ececec

      &.active
        background          #333
        color               #f1f1f1

  pre.kdtabpaneview
    rounded                 0 4px 4px 4px
    background              #333
    padding                 20px
    borderBox()

    &:before
    &:after
      display               none

    code
      font-family           'Courier New','Courier',monospace, sans-serif
      width                 auto
      background            transparent
      borderBox()


header.main-header
  bg                        color, #333
  bg                        image, url('data:image/png;base64,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')
  bg                        repeat, repeat
  bg                        scroll, no-scroll
  size                      100%, 100px
  top                       0px
  left                      0px
  z-index                   8
  fix()

  figure.logo
    size                    64px 50px
    abs                     23px 0 0 30%
    background              url('../src/img/logo.svg') no-repeat center
    background-size         contain
    opacity                 0
    margin-left             45px
    vendor                  transition, left .3s ease \,\
                                        opacity .3s ease

  nav
    abs                     29px 50% 0 0
    vendor                  transform, translateX(50%)
    width                   auto
    -webkit-transition      -webkit-transform .3s ease \,
                            right .3s ease

    -moz-transition         -moz-transform .3s ease \,
                            right .3s ease

    a
      color                 #979797
      font-size             14px
      display               inline-block
      line-height           36px
      vertical-align        middle
      noTextDeco()

      &~a
        margin              0 0 0 9px

      &:hover
        text-decoration     underline

      &#fork-us
        border              2px solid #525252
        rounded             6px
        padding             0 25px 0 0
        font-weight         600
        margin-left         23px
        width               189px
        white-space         nowrap
        overflow            hidden
        vendor              transition, color .2s .1s ease \,
                                        width .2s .1s ease

        &:hover
          bg                color, rgba(255, 255, 255, .07)
          noTextDeco()

        &:before
          content           ''
          display           block
          size              19px, 16px
          bg                image, url('../src/img/fork.svg')
          bg                position, center center
          bg                repeat, no-repeat
          bg                size, 19px 16px
          margin            10px 14px 0
          fl()

      &.download-button
        bg                  image, url('../src/img/download-grey.svg')
        bg                  position, 18px 9px
        bg                  repeat, no-repeat
        bg                  size, 17px 17px
        border              2px solid #525252
        rounded             6px
        height              36px
        width               53px
        margin-right        -53px
        opacity             0
        vendor              transition, opacity .3s ease

        &:hover
          bg                color, rgba(255, 255, 255, .07)
          vendor            animation, downloadIcon .4s 1 ease


.main-view.collapse-header
.page-view
  .main-header
    shadow                  0 4px 12px rgba(0, 0, 0, .3)

    .download-button
      opacity               1

    figure.logo
      left                  0%
      opacity               1

    nav
      right                 98px
      vendor                transform, translateX(0)

      a#fork-us
        width               24px
        color               transparent


section.home-section
  background                #fff
  z-index                   3

  h2
  h3
    border                  none
    overflow                visible

  &.intro
    padding                 29px 0 168px 0
    bg                      color, #333
    bg                      image, url('data:image/png;base64,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')
    bg                      repeat, repeat
    bg                      scroll, no-scroll
    text-align              center
    size                    100%, auto
    z-index                 2
    shadow                  0 0 0 rgba(0,0,0,.4)
    fix()

    figure.logo
      size                  188px 148px
      margin                122px auto 0
      display               block
      background            url('../src/img/logo.svg') no-repeat center
      background-size       contain

    h2
      text-align            center
      margin                35px 0 93px 0

      span
        font-size           36px
        color               #fff
        font-weight         300

    .download-button
      display               inline-block
      height                60px
      line-height           60px
      background            #ff5a27
      rounded               30px
      font-size             20px
      color                 #effee5
      padding               0 0 0 27px
      overflow              hidden
      width                 354px
      noTextDeco()

      &:after
        content             ''
        display             block
        size                72px, 60px
        bg                  color, #c3431c
        bg                  image, url('../src/img/download-white.svg')
        bg                  position, 16px 18px
        bg                  repeat, no-repeat
        bg                  size, 32px 24px
        margin-left         27px
        fr()

  &.features
    margin-top              630px
    shadow                  0 -12px 38px rgba(0,0,0, .75)

    &:before
      content               ''
      display               block
      size                  50%, 12px
      background            #fff
      abs                   -12px 0 0 50%
      vendor                transform, skewX(-45deg)
      margin-left           6px

    &:after
      content               ''
      display               block
      size                  50%, 12px
      background            #fff
      abs                   -12px 0 0 0px
      vendor                transform, skewX(45deg)
      margin-left           -6px

    .inner-wrapper
      vertical-align        top
      padding               102px 45px 82px
      border-bottom         2px solid #f6f6f6

    .feature
      display               inline-block
      width                 33%
      padding               0 55px 0 0
      color                 #555
      borderBox()

      figure
        background-size     contain

        &.chrome
          margin            7px 0 68px 0
          background        url('../src/img/chrome.svg') no-repeat center
          size              54px, 46px

        &.king
          margin            10px 0 67px 0
          background        url('../src/img/king.svg') no-repeat center
          size              54px, 45px

        &.box
          margin            0 0 68px 0
          background        url('../src/img/box.svg') no-repeat center
          size              47px, 54px

      h3
        font-size           16px
        font-weight         700

      p
        font-size           16px
        line-height         22px
        letter-spacing      0.02em
        padding             23px 0

  &.examples
    margin-bottom           163px

    .inner-wrapper
      padding               69px 45px 72px

    h2
      font-size             30px
      font-weight           600
      color                 #464646

    h3
      font-size             22px
      font-weight           300
      color                 #6b6b6b
      margin                8px 0 0

    .kdtabview
      width                 66%
      margin                60px 0 74px

    .go-to-doc
      font-size             22px
      color                 #6b6b6b

      a
        color               inherit


footer.kdview
  size                      100%, 163px
  background                #333333
  bottom                    0px
  left                      0px
  z-index                   1
  fix()

  .about-kd
    padding                 58px 0 0 0
    font-size               16px
    color                   #858585
    font-weight             300
    line-height             24px
    fl()

  nav
    line-height             163px
    fr()

    a
      color                 #858585
      font-weight           300
      font-size             16px
      display               inline-block
      line-height           36px
      margin-left           16px
      noTextDeco()


.guide-page.inner-wrapper
  padding-top               146px


aside.main-sidebar
  size                      252px, auto
  borderBox()
  fl()

  ul.kdlistview
    margin-bottom           24px

    .arrow
      hidden()

    >li
      cursor               pointer

    >li.has-sub-items
      display               block
      font-size             16px
      font-weight           700
      color                 #555
      line-height           17px
      margin                0 0 20px 0
      padding               0 0 0 10px
      border-left           4px solid transparent
      borderBox()

      &.expanded
        border-left-color   #ff5a27

    li:not(.has-sub-items)
      display               block
      font-size             14px
      color                 #777
      height                24px
      line-height           24px
      margin                2px 0 0 14px
      padding               0 0 0 12px
      noTextDeco()
      borderBox()

      &.selected
        background          #eeeeee
        rounded             3px

  .nav-main-item
    margin-bottom           24px

    >span
      display               block
      font-size             16px
      font-weight           700
      color                 #555555
      line-height           17px
      margin                0 0 20px 0
      padding               0 0 0 10px
      cursor                pointer
      border-left           4px solid transparent
      borderBox()

    a.nav-sub-item
      display               block
      font-size             14px
      color                 #777777
      height                24px
      line-height           24px
      margin                2px 0 0 14px
      padding               0 0 0 12px
      display               none
      noTextDeco()
      borderBox()

    &.active
      >span
        border-left-color   #ff5a27

      a.nav-sub-item
        display             block

        &.active
          background        #eee
          rounded           3px


section.content-section
  size                      auto, auto
  margin-left               252px
  borderBox()

  article
    section
      padding               0 0 42px 40px
      borderBox()

    h3
      color                 #555555
      font-size             18px
      font-weight           600
      margin                0 0 22px 0

    p
      line-height           22px
      letter-spacing        .025em
      color                 #555555
      margin                0 0 24px 0

      &:last-of-type
        margin-bottom       0

        &+.kdtabview
          margin-top        22px


@keyframes downloadIcon
  0%
    bg                      position, 18px 9px

  49%
    bg                      position, 18px 36px

  49.1%
    bg                      position, 18px -24px

  100
    bg                      position, 18px 9px