index.styl

@import '../vars'
@import '../mixins/*'
global-reset()
@import '../theme/*'

DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif

html, body
  width 100%
  height 100%
  overflow hidden

body
  font-family DEFAULT_FONTS
  color textColor
  font-size fontSize
  font-weight 400

body[data-modal="open"]
  #content *
    overflow hidden !important

button, input, select, textarea
  font-family DEFAULT_FONTS

div, span, a, button, input, textarea
  box-sizing border-box

a
  color brandColor
  &:hover
    color lighten(brandColor, 5%)
  &:visited
    color brandColor

hr
  border-top none
  border-bottom solid 1px borderColor
  margin 15px 0

button
  font-weight 400
  cursor pointer
  &:focus, &.focus
    outline none

.noSelect
  noSelect()

.text-center
  text-align center

.form-group
  margin-bottom 15px
  &>label
    display block
    margin-bottom 5px

.block-input, .inline-input
  border solid 1px borderColor
  padding 0 10px
  font-size 1em
  height 33px
  border-radius 5px
  box-sizing border-box
  &:focus, &.focus
    border solid 1px brandBorderColor
    outline none
  &.circleInput
    border-radius 16.5px

.block-input
  display block
  width 100%

.inline-input
  display inline-block
  margin-right 5px

.relative
  position relative

textarea.block-input
  resize vertical
  height 125px
  border-radius 5px
  padding 5px 10px

#content
  fullsize()

modalZIndex= 1000
modalBackColor = transparentify(black, 65%)

.ModalBase
  fixed top left bottom right
  z-index modalZIndex
  &.hide
    display none
  .modalBack
    absolute top left bottom right
    background-color modalBackColor
    z-index modalZIndex + 1
  .modal
    position relative
    width 650px
    margin 50px auto 0
    z-index modalZIndex + 2
    background-color white
    padding 15px
    color #666666
    border-radius 5px