style.styl

normalize-css()

// Material Shadows
shadow-level(l = 1)
  if l == -1
    box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
  if l == 0
    box-shadow: none;
  if l == 1
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  if l == 2
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  if l == 3
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  if l == 4
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  if l == 5
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

// Common Transition
trans($sec = 0.3s)
  transition: all $sec ease
// Grid
$xsmall = 340px
$small = 500px
$med = 700px
$large = 960px
$wide = 1200px

// Colors
black = #222
grey = #D8D8D8
light-grey = #EEE
purp = #524763
dark-purp = #373142
red = #E54B4B
teal = #82D8D8
dark-teal = #66A6A6
green = #CBE56C
blue = #16528E
bright-blue = #0082C8
maroon = #6A2140
light-red = #CA5765
pink = #CF256D
orange = #E8846B

z = {
    neg: -7,
    lowest: 1,
    low: 4,
    mid: 5,
    video: 6,
    header: 7,
    nav: 8,
    mini: 9,
    modal: 10,
    highest: 11
}

social = {
    twitter: #00aced,
    facebook: #3b5998,
    google: #dd4b39,
    youtube: #bb0000
}

$side-nav = 100px
$side-nav-large = 200px

html
  box-sizing: border-box

*, *:before, *:after
  box-sizing: inherit

body
  background light-grey
  padding: 70px 0 150px
  font-family: 'Open Sans', sans-serif

header
  color #FFF
  background: purp
  padding 20px 5%
  fixed top left
  width 100%
  height 70px
  z-index: z.header
  shadow-level(2)
  clearfix()
  h2
    margin 0
    font-weight 100
    font-size 1.6em
    float left
  nav
    float right
    a
      color: #FFF
      text-decoration: none
      line-height: 36px
      font-size: 1.2em
      display: inline-block
      border-bottom 4px solid transparent
      trans()
      + a
        margin-left: 30px
      &:hover
        border-color teal


p
  color #333

.page-title
  text-transform uppercase
  font-weight 800
  margin-bottom 30px

.main-layout
  lost-center 90%
  margin-top 20px
  +above($large)
    lost-center 70%
    margin-top 40px

.btn, button
  display inline-block
  cursor pointer
  background purp
  color #FFF
  text-decoration none
  text-transform uppercase
  padding 5px 15px
  border solid 3px purp
  border-radius 2px
  font-weight 800
  shadow-level(1)
  trans()
  &:hover
    background @background - 20
    border-color @background
    shadow-level(2)
  &.btn-primary
    background teal
    border-color teal
    color dark-purp
    &:hover
      background @background - 40
      border-color @background
  &.btn-deny
    background red
    border solid 3px @background
    &:hover
      background @background - 20
      border-color @background
  &.btn-text
    color purp
    background transparent
    border solid 2px purp
    shadow-level(0)
    &:hover
      background teal
      border-color @background
      shadow-level(1)
  &.btn-text-dark
    color #FFF
    background transparent
    border solid 2px #FFF
    shadow-level(0)
    &:hover
      background #FFF
      color dark-purp
      border-color @background
      shadow-level(1)
  &.btn-confirmation
    color black
    background green
    border solid 2px @background
    &:hover
      background @background - 20
      border-color dark-purp
  &.btn-cancel
    color #FFF
    background transparent
    border solid 2px #FFF
    opacity 0.4
    shadow-level(-1)
    &:hover
      background red
      color #FFF
      opacity 1
      shadow-level(2)
      border-color @background

input, select, textarea
  color purp
  background #FFF
  border solid 2px light-grey
  border-radius 2px
  font-weight 800
  padding 6px 10px
  margin-bottom 10px

input::-webkit-input-placeholder
  color: #ddd
input:-moz-placeholder
  color: #ddd
input::-moz-placeholder
  color: #ddd
input:-ms-input-placeholder
  color: #ddd

.new-resolution
  transition all 0.3s cubic-bezier(0.86, 0, 0.07, 1)
  shadow-level(3)
  &:hover
    shadow-level(5)
  label
    background dark-purp
    text-transform uppercase
    font-weight 800
    color #FFF
    font-size 1.2em
    padding 10px
    display block
    text-align center
    letter-spacing 2px
  input
    width 100%
    margin 0
    font-size 2em
    font-weight 800
    color #333
    border none
    padding 30px

.resolutions
  list-style none
  padding 0
  margin 40px 0
  lost-center 700px
  li
    font-size 2em
    margin-bottom 8px
    trans()
    label
      display inline-block
      vertical-align middle
    input
      display inline-block
      vertical-align 2px
      margin-right 10px
    &.checked
      color #CCC
    button
      padding 10px
      margin-left 40px
      line-height 0.5
      float right

.panel-body
  .form-group
    lost-column 1/2

.side-nav
  fixed bottom left
  height 100px
  width 100%
  overflow hidden
  background dark-purp
  color #FFF
  z-index: z.header
  shadow-level(2)
  ul
    margin 0
    padding 0
    display flex
    justify-content space-between
    list-style none
  a
    color #FFF
    text-decoration none
    padding 20px 20px
    display block
    text-align center
    trans()
    &:hover, &.active
      background purp
  i
    display block
    font-size 2em
    margin-bottom 10px
  +above($med)
    height 100%
    z-index: z.mid
    padding 120px 0
    fixed top left
    width $side-nav
    ul
      display block
    shadow-level(-1)
    a
      padding 20px 10px
      &:hover, &.active
        border-left 4px solid teal
  +above($large)
    width $side-nav-large
    a
      padding 20px 20px
      &:hover, &.active
        border-left 10px solid teal

.completed
  color #FFF
  background teal
  border-radius 5px
  padding 5px
  margin-left 20px
  animation complete 0.6s ease
  font-size 0.6em
  display inline-block
  vertical-align middle

#login-dropdown-list
  right -1px
  left auto

#login-sign-in-link, #login-name-link
  margin-left: 30px


@keyframes complete
  0%
    opacity 0
    transform translate3d(0,-30px,0)
  100%
    opacity 1
    transform translate3d(0, 0,0)

.resolutionLoad-enter
  animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)

.resolutionLoad-leave
  animation: slideOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)

@keyframes slideIn
  0%
    opacity 0
    transform translate3d(-50px, 0, 0)
  100%
    opacity 1
    transform translate3d(0, 0, 0)

@keyframes slideOut
  0%
    opacity 1
    transform translate3d(0, 0, 0)
  100%
    opacity 0
    transform translate3d(50px, 0, 0)

@keyframes slideUp
  0%
    opacity 0
    transform translate3d(0, 60px, 0)
  100%
    opacity 1
    transform translate3d(0, 0, 0)

.route-enter, .route-appear
  opacity: 0
  animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)

.route-leave
  animation: slideOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
  opacity: 1.0

.route-appear
  opacity: 0
  animation: slideUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)