_common.styl

@import "_settings"
@import "_syntax"
@import "_ad"

body
  font-family: $body-font
  font-size: $body-font-size
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  color: $medium
  background-color: white
  margin: 0
  &.docs
    padding-top: $header-height

@media screen and (max-width: 900px)
  body.docs
    padding-top: 0

a
  text-decoration: none
  color: $medium

img
  border: none

h1, h2, h3, h4, strong
  font-weight: 600
  color: $dark

code, pre
  font-family: $code-font
  font-size: $code-font-size
  background-color: $codebg
  -webkit-font-smoothing: initial
  -moz-osx-font-smoothing: initial

code
  color: #d63200
  padding: 3px 5px
  margin: 0 2px
  border-radius: 2px
  white-space: nowrap

em
  color: $light

p
  word-spacing: 0.05em

a.button,
input.button
  padding: 0.75em 2em
  border-radius: 2em
  display: inline-block
  color: #fff
  background-color: lighten($green, 8%)
  transition: all .15s ease
  box-sizing: border-box
  border: 1px solid lighten($green, 8%)
  &.has-icon
    position: relative
    text-indent: 1.4em;
    > svg
      position: absolute
      left: 0.4em
      top: 0.4em
      width: 2em
  &.white
    background-color: #fff
    color: $green
  &.gray
    background-color: #f6f6f6
    color: $light
    border-color: #f6f6f6

#main
  position: relative
  z-index: $z-base
  padding: 0 60px 30px
  overflow-x: hidden

#nav
  .nav-link
    cursor: pointer
  .nav-dropdown-container
    .nav-link
      &:hover:not(.current)
        border-bottom: none
    &:hover
      .nav-dropdown
        display: block
    .arrow
      pointer-events: none
  .nav-dropdown
    display: none
    box-sizing: border-box
    max-height: "calc(100vh - %s)" % $header-height
    overflow-y: auto
    position: absolute
    top: 100%
    right: -15px
    background-color: #fff
    padding: 10px 0
    border: 1px solid #ddd
    border-bottom-color: #ccc
    text-align: left
    border-radius: 4px
    white-space: nowrap
    li
      line-height: 1.8em
      margin: 0
      display: block
      > ul
        padding-left: 0
      &:first-child
        h4
          margin-top: 0
          padding-top: 0
          border-top: 0
    a, h4
      padding: 0 24px 0 20px
    h4
      // text-transform: uppercase
      margin: .45em 0 0
      padding-top: .45em
      border-top: 1px solid #eee
    a
      color: lighten($dark, 10%)
      display: block
      &:hover
        color: $green
  .arrow
    display: inline-block
    vertical-align: middle
    margin-top: -1px
    margin-left: 6px
    margin-right: -14px
    width: 0
    height: 0
    border-left: 4px solid transparent
    border-right: 4px solid transparent
    border-top: 5px solid $light

sup.beta.beta
  font-size: .6em
  margin-left: .7em
  text-transform: uppercase
  opacity: .6

@media print
  body
    color: rgb(0,0,0)
  .highlight
    padding: 0
    page-break-inside: avoid
    .code
      pre
        color: rgb(0,0,0)
        background-color: rgb(255,255,255)
        border-style: solid
        border-width: 2px 2px 2px 2px
        border-color: #e8e8e8
        page-break-inside: avoid
  h1,h2,h3,h4,h5
    color: rgb(0,0,0)
    page-break-after: avoid
    page-break-before: avoid
  img
    page-break-inside: avoid
  h2+p
    page-break-before: avoid
  a:link:after, a:visited:after { content:" [" attr(href) "] "; }