garage-doors.styl

body
  font-family: sans-serif
  background-color: #315481
  background-attachment: fixed

  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0

  padding: 0
  margin: 0

  font-size: 14px

.container
  max-width: 600px
  margin: 0 auto
  min-height: 100%
  background: white

header
  background: #d2edf4
  padding: 20px 15px 15px 15px
  position: relative

header h1
  font-size: 1.5em
  margin: 0
  margin-bottom: 10px
  display: inline-block
  margin-right: 1em
  text-align: center
  width: 100%

ul
  margin: 0
  padding: 0
  background: white
  display: flex
  height: 250px

ul > li
  flex: 1
  list-style: none
  margin: 15px
  border: #eee solid 1px
  text-align: center
  position: relative
  padding-top: 20px

  div.actions
    position: absolute
    right: 5px
    bottom: 5px

.open
  background-color: #111111
  color: white

.close
  background-color: beige

/* The starting CSS styles for the enter animation */
.open.ng-enter, .close.ng-enter
  transition: 1.5s linear all
  opacity: 0

/* The finishing CSS styles for the enter animation */
.open.ng-enter-active, .close.ng-enter-active
  opacity: 1

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}