styles.styl

/* CSS declarations go here */
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

header
  color #FFF
  background: purp
  padding 20px
  fixed top left
  width 100%
  height 70px
  z-index: z.header
  shadow-level(2)
  clearfix()
  h1
    margin 0
    font-size 1.6em
    float left
  .login-buttons-dropdown-align-
    float right
    a
      color #FFF
      text-decoration none

p
  color #333

.page-title
  text-transform uppercase
  text-align center
  margin-bottom 30px

.billboard
  background dark-purp
  color #FFF
  font-size 2em
  text-align center
  padding 60px
  h2
    margin 0

.main-layout
  lost-center 90%
  margin-top 20px
  +above($med)
    lost-center 90%
    padding-left $side-nav
  +above($large)
    lost-center 80%
    margin-top 40px
    padding-left $side-nav-large

.new-recipe
  margin-bottom 20px

.new-recipe-container
  position relative
  background #FFF
  padding 20px
  margin-bottom 20px
  shadow-level(2)
  .fa-close
    position absolute
    top 0
    right 0
    padding 20px
  label
    display block
    margin-bottom 10px
  textarea, input
    width 100%

.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
  width 100%
  padding 6px 10px
  margin-bottom 10px
  &.static-input
    border none
    background transparent

.list-group
  list-style none
  padding 0

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

.autoform-remove-item.btn
  background light-grey
  box-shadow none
  border none
  border-radius 50%
  font-size 1em
  height: 25px
  width: 25px
  text-align: center
  display: block
  padding: 0

.autoform-add-item.btn
  width 100%
  border-radius 0
  border none
  box-shadow none
  background light-grey

.autoform-remove-item-wrap
  vertical-align middle

.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

.recipe
  background #FFF
  padding 0 20px 20px
  margin-bottom 20px
  position relative
  z-index 1
  shadow-level(1)
  trans()
  .btn-primary, .btn-deny
    display block
  &.in-menu
    background teal
    color #FFF
    h3
      border-bottom: rgba(255, 255, 255, 0.6) solid 3px
  h3
    font-size: 3em;
    opacity: 0.3;
    border-bottom: rgba(0, 0, 0, 0.3) solid 3px
    margin-top 0
    margin-bottom 10px
  button
    margin-top 20px
  .fa-trash, .fa-pencil, .fa-ambulance
    opacity 0.3
    cursor pointer
    position absolute
    top 0
    right 0
    font-size 1.6em
    display block
    padding 20px
    color black
    trans()
    &:hover
      color red
      opacity 0.6
  .fa-pencil
    right 40px
    &:hover
      color purple
  .ingredient
    display inline-block
    margin-right 10px
    font-size 1.2em
  &:hover
    shadow-level(3)

// animation card 0.6s ease 1 forwards

@keyframes card
  0%
    transform translate3d(0, 0, 0)
  50%
    transform translate3d(0, -135px, 0)
  51%
    z-index 10
    transform translate3d(0, -135px, 0)
  100%
    z-index 10
    transform translate3d(0, 0, 0)

.menu-item
  @extend .recipe

.shopping-list
  @extend .recipe
  padding 50px 5%
  list-style none
  li
    font-size 2em
    padding 20px
    border-bottom 1px solid light-grey
    border-top 1px solid light-grey
    & + li
      border-top none

.login-buttons-dropdown-align-
  #login-dropdown-list
    right 0
    left auto
    a
      color dark-purp