Merge https://github.com/kanboard/kanboard

54 files changed, 1778 insertions, 0 deletions

diff --git a/assets/sass/_accordion.sass b/assets/sass/_accordion.sass
new file mode 100644
index 00000000..25be776f
--- /dev/null
+++ b/assets/sass/_accordion.sass
@@ -0,0 +1,29 @@
+@import variables
+
+.accordion-title
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEQ5RDgxQzc2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEQ5RDgxQzg2RjQ5MTFFMjhEMUNENzFGRUMwRjhBRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0RDlEODFDNTZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0RDlEODFDNjZGNDkxMUUyOEQxQ0Q3MUZFQzBGOEFFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvXFWFAAAAAYSURBVHjaYvj//z8D0/Pnz/8zgFgAAQYAS5UJscReGMIAAAAASUVORK5CYII=) repeat-x scroll 0 10px
+  h3
+    display: inline
+    padding-right: 5px
+    background: #fff
+
+.accordion-content
+  margin-top: 15px
+  margin-bottom: 25px
+
+.accordion-toggle
+  color: color('primary')
+  text-decoration: none
+  &:focus
+    color: color('primary')
+  &:hover
+    color: color('light')
+  &:before
+    content: "\f0d7"
+
+.accordion-collapsed
+  margin-bottom: 25px
+  .accordion-toggle:before
+    content: "\f0da"
+  .accordion-content
+    display: none
diff --git a/assets/sass/_activity_stream.sass b/assets/sass/_activity_stream.sass
new file mode 100644
index 00000000..3ec201e6
--- /dev/null
+++ b/assets/sass/_activity_stream.sass
@@ -0,0 +1,32 @@
+@import variables
+@import mixins
+
+.activity-event
+  margin-bottom: 15px
+  padding: 10px
+  &:hover
+    background: #fafafa
+
+.activity-date
+  margin-left: 10px
+  font-weight: normal
+  color: color('light')
+
+.activity-content
+  margin-left: 55px
+
+.activity-title
+  font-weight: bold
+  color: color('dark')
+  border-bottom: 1px dotted #efefef
+
+.activity-description
+  color: color('medium')
+  margin-top: 10px
+  @include xs-device
+    overflow: auto
+  li
+    list-style-type: circle
+  ul
+    margin-top: 10px
+    margin-left: 20px
diff --git a/assets/sass/_alert.sass b/assets/sass/_alert.sass
new file mode 100644
index 00000000..5a90c825
--- /dev/null
+++ b/assets/sass/_alert.sass
@@ -0,0 +1,50 @@
+@import variables
+
+.alert
+  padding: 8px 35px 8px 14px
+  margin-top: 5px
+  margin-bottom: 5px
+  color: alert-color('default')
+  background-color: alert-bg-color('default')
+  border: 1px solid alert-border-color('default')
+  border-radius: 4px
+
+.alert-success
+  color: alert-color('success')
+  background-color: alert-bg-color('success')
+  border-color: alert-border-color('success')
+
+.alert-error
+  color: alert-color('error')
+  background-color: alert-bg-color('error')
+  border-color: alert-border-color('error')
+
+.alert-info
+  color: alert-color('info')
+  background-color: alert-bg-color('info')
+  border-color: alert-border-color('info')
+
+.alert-normal
+  color: alert-color('normal')
+  background-color: alert-bg-color('normal')
+  border-color: alert-border-color('normal')
+
+.alert
+  ul
+    margin-top: 10px
+    margin-bottom: 10px
+  li
+    margin-left: 25px
+
+.alert-fade-out
+  text-align: center
+  position: fixed
+  bottom: 0
+  left: 20%
+  width: 60%
+  padding-top: 5px
+  padding-bottom: 5px
+  margin-bottom: 0
+  border-width: 1px 0 0
+  border-radius: 4px 4px 0 0
+  z-index: 9999
diff --git a/assets/sass/_avatar.sass b/assets/sass/_avatar.sass
new file mode 100644
index 00000000..2041c326
--- /dev/null
+++ b/assets/sass/_avatar.sass
@@ -0,0 +1,32 @@
+@import variables
+
+.avatar img
+  vertical-align: bottom
+
+.avatar-left
+  float: left
+  margin-right: 10px
+
+.avatar-inline
+  display: inline-block
+  margin-right: 3px
+
+.avatar-48
+  img, div
+    border-radius: 30px
+  .avatar-letter
+    line-height: 48px
+    width: 48px
+    font-size: 25px
+
+.avatar-20
+  img, div
+    border-radius: 10px
+  .avatar-letter
+    line-height: 20px
+    width: 20px
+    font-size: 11px
+
+.avatar-letter
+  color: #fff
+  text-align: center
diff --git a/assets/sass/_base.sass b/assets/sass/_base.sass
new file mode 100644
index 00000000..064f5149
--- /dev/null
+++ b/assets/sass/_base.sass
@@ -0,0 +1,17 @@
+.pull-right
+  text-align: right
+
+ul.no-bullet li
+  list-style-type: none
+  margin-left: 0
+
+.chosen-select
+  min-height: 27px
+
+#app-loading-icon
+  position: fixed
+  right: 3px
+  bottom: 3px
+
+.assign-me
+  vertical-align: bottom
diff --git a/assets/sass/_board.sass b/assets/sass/_board.sass
new file mode 100644
index 00000000..c94879bc
--- /dev/null
+++ b/assets/sass/_board.sass
@@ -0,0 +1,111 @@
+@import variables
+
+.public-board
+  margin-top: 5px
+
+.public-task
+  max-width: 800px
+  margin: 5px auto 0
+
+#board-container
+  overflow-x: auto
+
+#board
+  table-layout: fixed
+  margin-bottom: 0
+  th.board-column-header
+    width: 240px
+  td
+    vertical-align: top
+
+.board-container-compact
+  overflow-x: initial
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  .board-container-compact #board
+    table-layout: auto
+
+#board th.board-column-header.board-column-compact
+  width: initial
+
+.board-column-collapsed
+  display: none
+
+td.board-column-task-collapsed
+  font-weight: bold
+  background-color: bg-color('primary')
+
+#board th.board-column-header-collapsed
+  width: 28px
+  min-width: 28px
+  text-align: center
+  overflow: hidden
+
+.board-rotation-wrapper
+  position: relative
+  padding: 8px 4px
+  min-height: 150px
+  overflow: hidden
+
+.board-rotation
+  white-space: nowrap
+  -webkit-backface-visibility: hidden
+  -webkit-transform: rotate(90deg)
+  -moz-transform: rotate(90deg)
+  -ms-transform: rotate(90deg)
+  transform: rotate(90deg)
+  -webkit-transform-origin: 0 100%
+  -moz-transform-origin: 0 100%
+  -ms-transform-origin: 0 100%
+  transform-origin: 0 100%
+
+.board-column-title .dropdown-menu
+  text-decoration: none
+
+.board-add-icon
+  float: left
+  padding: 0 5px
+  a
+    text-decoration: none
+    color: link-color('primary')
+    font-size: size('xlarge')
+    line-height: 70%
+    &:focus, &:hover
+      text-decoration: none
+      color: red
+
+.board-column-header-task-count
+  color: color('light')
+  font-weight: normal
+
+a.board-swimlane-toggle
+  text-decoration: none
+  &:hover, &:focus
+    color: color('dark')
+    text-decoration: none
+    border: none
+
+.board-task-list
+  min-height: 60px
+
+.board-task-list-limit
+  background-color: $board-task-limit-color
+
+.draggable-item
+  cursor: pointer
+  user-select: none
+  -webkit-user-select: none
+  -moz-user-select: none
+
+.draggable-placeholder
+  border: 2px dashed #000
+  background: #fafafa
+  height: 70px
+  margin-bottom: 10px
+
+div.draggable-item-selected
+  border: 1px solid #000
+
+.task-board-sort-handle
+  float: left
+  padding-right: 5px
diff --git a/assets/sass/_button.sass b/assets/sass/_button.sass
new file mode 100644
index 00000000..d9a6db3d
--- /dev/null
+++ b/assets/sass/_button.sass
@@ -0,0 +1,50 @@
+@import variables
+@import mixins
+
+a.btn
+  text-decoration: none
+
+.btn
+  +appearance
+  font-size: size('medium')
+  font-weight: normal
+  cursor: pointer
+  display: inline-block
+  border-radius: 2px
+  padding: 3px 10px
+  margin: 0
+  border: 1px solid button-border-color('default')
+  background: button-bg-color('default')
+  color: button-color('default')
+  &:hover, &:focus
+    border-color: button-hover-border-color('default')
+    background: button-hover-bg-color('default')
+    color: button-hover-color('default')
+
+.btn-red
+  border-color: button-border-color('red')
+  background: button-bg-color('red')
+  color: button-color('red')
+  &:hover, &:focus
+    border-color: button-hover-border-color('red')
+    background: button-hover-bg-color('red')
+    color: button-hover-color('red')
+
+.btn-blue
+  border-color: button-border-color('blue')
+  background: button-bg-color('blue')
+  color: button-color('blue')
+  &:hover, &:focus
+    border-color: button-hover-border-color('blue')
+    background: button-hover-bg-color('blue')
+    color: button-hover-color('blue')
+
+.btn:disabled
+  color: button-color('disabled')
+  border-color: button-border-color('disabled')
+  background: button-bg-color('disabled')
+
+.buttons-header
+  font-size: size('small')
+  margin-top: 5px
+  margin-bottom: 15px
diff --git a/assets/sass/_color_picker.sass b/assets/sass/_color_picker.sass
new file mode 100644
index 00000000..d3134d2d
--- /dev/null
+++ b/assets/sass/_color_picker.sass
@@ -0,0 +1,17 @@
+.color-picker
+  width: 180px
+
+.color-picker-option
+  height: 25px
+
+.color-picker-square
+  display: inline-block
+  width: 18px
+  height: 18px
+  margin-right: 5px
+  border: 1px solid #000
+
+.color-picker-label
+  display: inline-block
+  vertical-align: bottom
+  padding-bottom: 3px
diff --git a/assets/sass/_comment.sass b/assets/sass/_comment.sass
new file mode 100644
index 00000000..fdc38eaf
--- /dev/null
+++ b/assets/sass/_comment.sass
@@ -0,0 +1,41 @@
+@import variables
+
+.comment-sorting
+  text-align: right
+  a
+    color: color('medium')
+    font-weight: normal
+    text-decoration: none
+    &:hover
+      color: color('light')
+
+.comment
+  padding: 5px
+  margin-bottom: 15px
+  &:hover
+    background: #fafafa
+
+.comment-title
+  border-bottom: 1px dotted #eee
+  margin-left: 55px
+  margin-bottom: 10px
+
+.comment-date
+  color: color('light')
+  font-weight: 200
+
+.comment-actions
+  font-size: size('small')
+  margin-left: 55px
+  margin-top: 8px
+  li
+    display: inline
+  a
+    color: color('light')
+    text-decoration: none
+    &:focus, &:hover
+      color: color('primary')
+      text-decoration: underline
+
+.comment-content
+  margin-left: 55px
diff --git a/assets/sass/_dashboard.sass b/assets/sass/_dashboard.sass
new file mode 100644
index 00000000..4c19d084
--- /dev/null
+++ b/assets/sass/_dashboard.sass
@@ -0,0 +1,13 @@
+@import variables
+
+.dashboard-project-stats
+  small
+    margin-right: 10px
+    color: color('light')
+
+.dashboard-table-link
+  font-weight: bold
+  color: color('dark')
+  text-decoration: none
+  &:focus, &:hover
+    color: color('light')
diff --git a/assets/sass/_dialog_box.sass b/assets/sass/_dialog_box.sass
new file mode 100644
index 00000000..38364230
--- /dev/null
+++ b/assets/sass/_dialog_box.sass
@@ -0,0 +1,4 @@
+@import variables
+
+#main .confirm
+  max-width: 700px
diff --git a/assets/sass/_documentation.sass b/assets/sass/_documentation.sass
new file mode 100644
index 00000000..72cc2abc
--- /dev/null
+++ b/assets/sass/_documentation.sass
@@ -0,0 +1,21 @@
+@import variables
+
+.documentation
+  margin: 0 auto
+  padding: 20px
+  max-width: 850px
+  background: #fefefe
+  border: 1px solid #ccc
+  border-radius: 5px
+  color: color('medium')
+  img
+    border: 1px solid #333
+  h1
+    text-decoration: none
+    margin-bottom: 30px
+  h2
+    text-decoration: none
+    border-bottom: 1px solid #ccc
+    margin-bottom: 25px
+  li
+    line-height: 30px
diff --git a/assets/sass/_dropdown.sass b/assets/sass/_dropdown.sass
new file mode 100644
index 00000000..8e7eb24b
--- /dev/null
+++ b/assets/sass/_dropdown.sass
@@ -0,0 +1,53 @@
+@import variables
+
+.dropdown
+  display: inline
+  position: relative
+  ul
+    display: none
+
+ul.dropdown-submenu-open
+  display: block
+  position: absolute
+  z-index: 1000
+  min-width: 285px
+  list-style: none
+  margin: 3px 0 0 1px
+  padding: 6px 0
+  background-color: #fff
+  border: 1px solid #b2b2b2
+  border-radius: 3px
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15)
+
+.dropdown-submenu-open li
+  display: block
+  margin: 0
+  padding: 8px 10px
+  font-size: size('compact')
+  border-bottom: 1px solid #f8f8f8
+  cursor: pointer
+  &.no-hover
+    cursor: default
+
+.dropdown-submenu-open li:last-child
+  border: none
+
+.dropdown-submenu-open li:not(.no-hover):hover
+  background: #4078C0
+  color: #fff
+
+.dropdown-submenu-open li:hover a
+  color: #fff
+
+.dropdown-submenu-open a
+  text-decoration: none
+  color: color('primary')
+  &:focus
+    text-decoration: underline
+
+.dropdown-menu-link-text, .dropdown-menu-link-icon
+  color: color('primary')
+  text-decoration: none
+
+.dropdown-menu-link-text:hover
+  text-decoration: underline
diff --git a/assets/sass/_file_upload.sass b/assets/sass/_file_upload.sass
new file mode 100644
index 00000000..b258620e
--- /dev/null
+++ b/assets/sass/_file_upload.sass
@@ -0,0 +1,31 @@
+@import variables
+
+#file-dropzone, #screenshot-zone
+  position: relative
+  border: 2px dashed #ccc
+  width: 99%
+  height: 250px
+  overflow: auto
+
+#file-dropzone-inner, #screenshot-inner
+  position: absolute
+  left: 0
+  bottom: 48%
+  width: 100%
+  text-align: center
+  color: #aaa
+
+#screenshot-zone.screenshot-pasted
+  border: 2px solid #333
+
+#file-list
+  margin: 20px
+  li
+    list-style-type: none
+    padding-top: 8px
+    padding-bottom: 8px
+    border-bottom: 1px dotted #ddd
+    width: 95%
+    &.file-error
+      font-weight: bold
+      color: color('error')
diff --git a/assets/sass/_filter_box.sass b/assets/sass/_filter_box.sass
new file mode 100644
index 00000000..33a09696
--- /dev/null
+++ b/assets/sass/_filter_box.sass
@@ -0,0 +1,2 @@
+.filter-box
+  max-width: 800px
diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass
new file mode 100644
index 00000000..df680a18
--- /dev/null
+++ b/assets/sass/_form.sass
@@ -0,0 +1,136 @@
+@import variables
+@import mixins
+
+form
+  margin-bottom: 20px
+
+label
+  cursor: pointer
+  display: block
+  margin-top: 10px
+
+input
+  &[type="number"], &[type="date"], &[type="email"], &[type="password"], &[type="text"]:not(.input-addon-field)
+    color: color('light')
+    border: 1px solid #ccc
+    width: 300px
+    max-width: 95%
+    font-size: size('normal')
+    height: 25px
+    padding-bottom: 0
+    font-family: sans-serif
+    margin-top: 10px
+    +appearance
+    @include placeholder
+      color: color('lighter')
+  &[type="number"]:focus, &[type="date"]:focus, &[type="email"]:focus, &[type="password"]:focus, &[type="text"]:focus
+    color: color('dark')
+    border-color: rgba(82, 168, 236, 0.8)
+    outline: 0
+    box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
+
+input[type="number"]
+  width: 70px
+
+input[type="text"]:not(.input-addon-field)
+  &.form-numeric
+    width: 70px
+  &.form-datetime, &.form-date
+    width: 150px
+  &.form-input-large
+    width: 400px
+  &.form-input-small
+    width: 150px
+
+textarea:focus
+  color: color('dark')
+  border-color: rgba(82, 168, 236, 0.8)
+  outline: 0
+  box-shadow: 0 0 8px rgba(82, 168, 236, 0.6)
+
+textarea
+  border: 1px solid #ccc
+  width: 400px
+  max-width: 99%
+  height: 200px
+  font-family: sans-serif
+
+select
+  max-width: 95%
+  &:focus
+    outline: 0
+
+.tag-autocomplete
+  width: 400px
+
+span.select2-container
+  margin-top: 2px
+
+.form-actions
+  padding-top: 20px
+  clear: both
+
+.form-required
+  color: red
+  padding-left: 5px
+  font-weight: bold
+
+  @include xs-device
+    display: none
+
+input.form-error, textarea.form-error
+  border: 2px solid #b94a48
+
+input.form-error:focus, textarea.form-error:focus
+  box-shadow: none
+  border: 2px solid #b94a48
+
+.form-errors
+  color: color('error')
+  list-style-type: none
+
+ul.form-errors li
+  margin-left: 0
+
+.form-help
+  font-size: size('small')
+  color: brown
+  margin-bottom: 15px
+
+.form-inline
+  padding: 0
+  margin: 0
+  border: none
+  label
+    display: inline
+  input, select
+    margin: 0 15px 0 0
+  .form-required
+    display: none
+
+.form-inline-group
+  display: inline
+
+.form-columns
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +justify-content(flex-start)
+
+  .form-column
+    margin-right: 25px
+
+.form-login
+  max-width: 350px
+  margin: 8% auto 0
+  li
+    margin-left: 25px
+    line-height: 25px
+  h2
+    margin-bottom: 30px
+    font-weight: bold
+
+.reset-password
+  margin-top: 20px
+  a
+    color: color('light')
diff --git a/assets/sass/_gantt_chart.sass b/assets/sass/_gantt_chart.sass
new file mode 100644
index 00000000..eb6124d8
--- /dev/null
+++ b/assets/sass/_gantt_chart.sass
@@ -0,0 +1,87 @@
+@import variables
+
+div
+  &.ganttview-hzheader-month, &.ganttview-hzheader-day, &.ganttview-vtheader, &.ganttview-vtheader-item-name, &.ganttview-vtheader-series, &.ganttview-grid, &.ganttview-grid-row-cell
+    float: left
+  &.ganttview-hzheader-month, &.ganttview-hzheader-day
+    text-align: center
+  &.ganttview-grid-row-cell.last, &.ganttview-hzheader-day.last, &.ganttview-hzheader-month.last
+    border-right: none
+  &.ganttview
+    border: 1px solid #999
+  &.ganttview-hzheader-month
+    width: 60px
+    height: 20px
+    border-right: 1px solid #d0d0d0
+    line-height: 20px
+    overflow: hidden
+  &.ganttview-hzheader-day
+    width: 20px
+    height: 20px
+    border-right: 1px solid #f0f0f0
+    border-top: 1px solid #d0d0d0
+    line-height: 20px
+    color: color('medium')
+  &.ganttview-vtheader
+    margin-top: 41px
+    width: 400px
+    overflow: hidden
+    background-color: #fff
+  &.ganttview-vtheader-item
+    color: color('medium')
+  &.ganttview-vtheader-series-name
+    width: 400px
+    height: 31px
+    line-height: 31px
+    padding-left: 3px
+    border-top: 1px solid #d0d0d0
+    text-overflow: ellipsis
+    overflow: hidden
+    white-space: nowrap
+    a
+      color: color('medium')
+      text-decoration: none
+      &:hover
+        color: color('primary')
+        text-decoration: underline
+      i
+        color: color('dark')
+      &:hover i
+        color: color('medium')
+  &.ganttview-slide-container
+    overflow: auto
+    border-left: 1px solid #999
+  &.ganttview-grid-row-cell
+    width: 20px
+    height: 31px
+    border-right: 1px solid #f0f0f0
+    border-top: 1px solid #f0f0f0
+    &.ganttview-weekend
+      background-color: #fafafa
+  &.ganttview-blocks
+    margin-top: 40px
+  &.ganttview-block-container
+    height: 28px
+    padding-top: 4px
+  &.ganttview-block
+    position: relative
+    height: 25px
+    background-color: #E5ECF9
+    border: 1px solid #c0c0c0
+    border-radius: 3px
+
+.ganttview-block-movable
+  cursor: move
+
+div
+  &.ganttview-block-not-defined
+    border-color: #000
+    background-color: #000
+  &.ganttview-block-text
+    position: absolute
+    height: 12px
+    font-size: size('tiny')
+    color: color('light')
+    padding: 2px 3px
+  &.ganttview-block div.ui-resizable-handle.ui-resizable-s
+    bottom: -0
diff --git a/assets/sass/_header.sass b/assets/sass/_header.sass
new file mode 100644
index 00000000..c2bcb90e
--- /dev/null
+++ b/assets/sass/_header.sass
@@ -0,0 +1,44 @@
+@import variables
+@import mixins
+
+header
+  @include grid(100)
+  margin-top: 5px
+  margin-bottom: 5px
+  border-bottom: 1px solid #dedede
+
+  .menus-container
+    @include grid_width(10/100)
+    @include md-device
+      @include grid_width(15/100)
+    @include sm-device
+      @include grid_width(65/100)
+      order: 2
+
+  .board-selector-container
+    @include grid_width(15/100)
+    @include md-device
+      @include grid_width(20/100)
+    @include sm-device
+      @include grid_width(35/100)
+      order: 1
+      margin-bottom: 5px
+
+  .title-container
+    @include grid_width(75/100)
+    @include md-device
+      @include grid_width(65/100)
+    @include sm-device
+      @include grid_width(1)
+      order: 3
+
+  h1
+    font-size: size('title')
+    .tooltip
+      opacity: 0.3
+      font-size: size('tiny')
+
+.web-notification-icon
+  color: link-color('primary')
+  &:focus, &:hover
+    color: color('dark')
diff --git a/assets/sass/_input_addon.sass b/assets/sass/_input_addon.sass
new file mode 100644
index 00000000..6be78fdf
--- /dev/null
+++ b/assets/sass/_input_addon.sass
@@ -0,0 +1,35 @@
+@import mixins
+
+.input-addon
+  display: flex
+
+.input-addon-field
+  flex: 1
+  font-size: size('normal')
+  color: color('light')
+  margin: 0
+  +appearance
+
+.input-addon-item
+  background-color: rgba(147, 128, 108, 0.1)
+  color: #666
+  font: inherit
+  font-weight: normal
+
+  @include xs-device
+    .dropdown
+      .fa-caret-down
+        display: none
+
+.input-addon-field, .input-addon-item
+  border: 1px solid rgba(147, 128, 108, 0.25)
+  padding: 4px 0.75em
+
+  &:not(:first-child)
+    border-left: 0
+
+.input-addon-field:first-child, .input-addon-item:first-child
+  border-radius: 5px 0 0 5px
+
+.input-addon-field:last-child, .input-addon-item:last-child
+  border-radius: 0 5px 5px 0
diff --git a/assets/sass/_links.sass b/assets/sass/_links.sass
new file mode 100644
index 00000000..d4544391
--- /dev/null
+++ b/assets/sass/_links.sass
@@ -0,0 +1,12 @@
+@import variables
+
+a
+  color: link-color('primary')
+  border: none
+  &:focus
+    outline: 0
+    color: link-color('focus')
+    text-decoration: none
+  &:hover
+    color: link-color('hover')
+    text-decoration: none
diff --git a/assets/sass/_listing.sass b/assets/sass/_listing.sass
new file mode 100644
index 00000000..64ff4adc
--- /dev/null
+++ b/assets/sass/_listing.sass
@@ -0,0 +1,17 @@
+@import variables
+
+.listing
+  border-radius: 4px
+  padding: 8px 35px 8px 14px
+  margin-bottom: 20px
+  border: 1px solid #ddd
+  color: color('primary')
+  background-color: bg-color('light')
+  overflow: auto
+  li
+    list-style-type: square
+    margin-left: 20px
+    margin-bottom: 3px
+  ul
+    margin-top: 15px
+    margin-bottom: 15px
diff --git a/assets/sass/_logo.sass b/assets/sass/_logo.sass
new file mode 100644
index 00000000..200b4447
--- /dev/null
+++ b/assets/sass/_logo.sass
@@ -0,0 +1,15 @@
+@import variables
+
+.logo
+  a
+    opacity: 0.5
+    color: #d40000
+    text-decoration: none
+  span
+    color: color('primary')
+  a
+    &:hover
+      opacity: 0.8
+      color: color('primary')
+    &:focus span, &:hover span
+      color: #d40000
diff --git a/assets/sass/_markdown_editor.sass b/assets/sass/_markdown_editor.sass
new file mode 100644
index 00000000..5bf77a99
--- /dev/null
+++ b/assets/sass/_markdown_editor.sass
@@ -0,0 +1,15 @@
+.markdown-editor-container
+  max-width: 400px
+
+div
+  &.CodeMirror, &.CodeMirror-scroll
+    max-height: 250px
+    min-height: 200px
+
+.markdown-editor-small div
+  &.CodeMirror, &.CodeMirror-scroll
+    min-height: 100px
+    max-height: 180px
+
+.form-column div.CodeMirror
+  margin-bottom: 10px
diff --git a/assets/sass/_markdown_rendering.sass b/assets/sass/_markdown_rendering.sass
new file mode 100644
index 00000000..cc1f977a
--- /dev/null
+++ b/assets/sass/_markdown_rendering.sass
@@ -0,0 +1,33 @@
+@import variables
+
+.markdown
+  line-height: 1.4em
+  h1
+    margin-top: 5px
+    margin-bottom: 10px
+    font-weight: bold
+  h2
+    font-weight: bold
+  p
+    margin-bottom: 10px
+  ol, ul
+    margin-left: 25px
+    margin-top: 10px
+    margin-bottom: 10px
+  pre
+    background: #fbfbfb
+    padding: 10px
+    border-radius: 5px
+    border: 1px solid #ddd
+    overflow: auto
+    color: color('medium')
+  blockquote
+    font-style: italic
+    border-left: 3px solid #ddd
+    padding-left: 10px
+    margin-bottom: 10px
+    margin-left: 20px
+  img
+    display: block
+    max-width: 80%
+    margin-top: 10px
diff --git a/assets/sass/_mixins.sass b/assets/sass/_mixins.sass
new file mode 100644
index 00000000..23301a82
--- /dev/null
+++ b/assets/sass/_mixins.sass
@@ -0,0 +1,68 @@
+@import variables
+
+@mixin custom-device($width)
+  @media (max-width: #{$width})
+    @content
+
+@mixin xs-device
+  @media (max-width: #{$xs-device-width})
+    @content
+
+@mixin sm-device
+  @media (max-width: #{$sm-device-width})
+    @content
+
+@mixin md-device
+  @media (min-width: #{$sm-device-width}) and (max-width: #{$md-device-width})
+    @content
+
+@mixin grid($columns: 0)
+  box-sizing: border-box
+  display: flex
+  flex-wrap: wrap
+  > *
+    box-sizing: border-box
+  > *
+    width: (1/$columns) * 100%
+
+@mixin grid_width($width)
+  width: $width * 100%
+
+@mixin placeholder
+  &::-webkit-input-placeholder
+    @content
+  &:-moz-placeholder
+    @content
+  &::-moz-placeholder
+    @content
+  &:-ms-input-placeholder
+    @content
+
+@mixin col-x($n)
+  @for $i from 1 through $n
+    .column-#{$i}
+      width: $i * 1%
+
+=appearance
+  -webkit-appearance: none
+  -moz-appearance: none
+
+=display-flex
+  display: -webkit-flex
+  display: flex
+
+=flex-direction($direction)
+  -webkit-flex-direction: $direction
+  flex-direction: $direction
+
+=flex-wrap
+  -webkit-flex-wrap: wrap
+  flex-wrap: wrap
+
+=align-content($position)
+  -webkit-align-items: $position
+  align-items: $position
+
+=justify-content($position)
+  -webkit-justify-content: $position
+  justify-content: $position
diff --git a/assets/sass/_page_header.sass b/assets/sass/_page_header.sass
new file mode 100644
index 00000000..7a3681f2
--- /dev/null
+++ b/assets/sass/_page_header.sass
@@ -0,0 +1,45 @@
+@import variables
+@import mixins
+
+.page-header
+  margin-bottom: 20px
+  .dropdown
+    padding-right: 10px
+  h2
+    margin: 0
+    padding: 0
+    font-weight: bold
+    border-bottom: 1px dotted #ccc
+    a
+      color: color('primary')
+      text-decoration: none
+      &:focus, &:hover
+        color: color('light')
+  ul
+    text-align: left
+    margin-top: 5px
+    display: inline-block
+  li
+    display: inline
+    padding-right: 15px
+
+    @include xs-device
+      display: block
+      line-height: 1.5em
+
+    &.active a
+      color: color('primary')
+      text-decoration: none
+      font-weight: bold
+      &:hover, &:focus
+        text-decoration: underline
+
+.menu-inline
+  margin-bottom: 5px
+  li
+    display: inline
+    padding-right: 15px
+    .active a
+      font-weight: bold
+      color: color('dark')
+      text-decoration: none
diff --git a/assets/sass/_pagination.sass b/assets/sass/_pagination.sass
new file mode 100644
index 00000000..792fb945
--- /dev/null
+++ b/assets/sass/_pagination.sass
@@ -0,0 +1,10 @@
+@import variables
+
+.pagination
+  text-align: center
+
+.pagination-next
+  margin-left: 5px
+
+.pagination-previous
+  margin-right: 5px
diff --git a/assets/sass/_popover.sass b/assets/sass/_popover.sass
new file mode 100644
index 00000000..3939f059
--- /dev/null
+++ b/assets/sass/_popover.sass
@@ -0,0 +1,33 @@
+@import variables
+@import mixins
+
+#popover-container
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  background: rgba(0, 0, 0, 0.8)
+  overflow: auto
+  z-index: 100
+
+#popover-content
+  position: absolute
+  width: 75%
+  left: 12%
+  top: 1%
+  padding: 15px
+  background: #fff
+  overflow: auto
+  max-height: 95%
+
+  @include xs-device
+    left: 0
+    width: 100%
+
+  @include sm-device
+    left: 2.5%
+    width: 85%
+
+.popover-form
+  margin-bottom: 0
diff --git a/assets/sass/_project.sass b/assets/sass/_project.sass
new file mode 100644
index 00000000..0f91d92a
--- /dev/null
+++ b/assets/sass/_project.sass
@@ -0,0 +1,19 @@
+@import variables
+
+.project-header
+  margin-top: 8px
+  margin-bottom: 20px
+
+.action-menu
+  color: color('primary')
+  text-decoration: none
+  &:hover, &:focus
+    text-decoration: underline
+
+.project-creation-options
+  max-width: 500px
+  border-left: 3px dotted #efefef
+  margin-top: 20px
+  padding-left: 15px
+  padding-bottom: 5px
+  padding-top: 5px
diff --git a/assets/sass/_project_header.sass b/assets/sass/_project_header.sass
new file mode 100644
index 00000000..4e6c496f
--- /dev/null
+++ b/assets/sass/_project_header.sass
@@ -0,0 +1,39 @@
+@import variables
+@import mixins
+
+.project-header
+  @include grid(100)
+
+  .dropdown-component
+    @include grid_width(5/100)
+    @include md-device
+      @include grid_width(8/100)
+    @include sm-device
+      @include grid_width(1)
+
+  .views-switcher-component
+    @include grid_width(38/100)
+    @include custom-device(1300px)
+      @include grid_width(45/100)
+    @include md-device
+      @include grid_width(92/100)
+    @include sm-device
+      @include grid_width(1)
+
+  .filter-box-component
+    margin: 0
+    @include grid_width(55/100)
+    @include custom-device(1300px)
+      @include grid_width(50/100)
+    @include md-device
+      @include grid_width(1)
+      margin-top: 10px
+      .filter-box
+        max-width: 100%
+    @include sm-device
+      @include grid_width(1)
+      margin-top: 10px
+      .filter-box
+        max-width: 100%
+    form
+      margin: 0
diff --git a/assets/sass/_project_overview.sass b/assets/sass/_project_overview.sass
new file mode 100644
index 00000000..675bde92
--- /dev/null
+++ b/assets/sass/_project_overview.sass
@@ -0,0 +1,32 @@
+@import variables
+@import mixins
+
+.project-overview-columns
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +align-content(center)
+  +justify-content(center)
+  margin-bottom: 20px
+  font-size: size('large')
+  @include xs-device
+    display: block
+
+.project-overview-column
+  text-align: center
+  margin-right: 3%
+  margin-top: 5px
+  padding: 3px 15px 3px 15px
+  border: 1px dashed #ddd
+
+  @include xs-device
+    text-align: left
+
+  small
+    color: color('light')
+  strong
+    color: color('medium')
+    display: block
+
+    @include xs-device
+      display: inline
diff --git a/assets/sass/_project_views_switcher.sass b/assets/sass/_project_views_switcher.sass
new file mode 100644
index 00000000..4ead9e2b
--- /dev/null
+++ b/assets/sass/_project_views_switcher.sass
@@ -0,0 +1,43 @@
+@import variables
+@import mixins
+
+$breakdown-switcher: 560px
+
+.views
+  display: inline-block
+  margin-right: 10px
+  font-size: size('compact')
+  @include custom-device($breakdown-switcher)
+    width: 100%
+  @include sm-device
+    margin-top: 10px
+    font-size: size('normal')
+  li
+    white-space: nowrap
+    background: #fafafa
+    border: 1px solid #ddd
+    border-right: none
+    padding: 4px 8px
+    display: inline
+    @include custom-device($breakdown-switcher)
+      display: block
+      margin-top: 5px
+      border-radius: 5px
+      border: 1px solid #ddd
+    &.active a
+      font-weight: bold
+      color: color('dark')
+      text-decoration: none
+    &:first-child
+      border-top-left-radius: 5px
+      border-bottom-left-radius: 5px
+    &:last-child
+      border-right: 1px solid #ddd
+      border-top-right-radius: 5px
+      border-bottom-right-radius: 5px
+  a
+    color: color('medium')
+    text-decoration: none
+    &:hover
+      color: color('primary')
+      text-decoration: underline
diff --git a/assets/sass/_reset.sass b/assets/sass/_reset.sass
new file mode 100644
index 00000000..c4568ce7
--- /dev/null
+++ b/assets/sass/_reset.sass
@@ -0,0 +1,33 @@
+@import variables
+
+h1,
+li,
+ul,
+ol,
+table,
+tr,
+td,
+th,
+p,
+blockquote,
+body
+  margin: 0
+  padding: 0
+  font-size: 100%
+
+body
+  margin-left: 10px
+  margin-right: 10px
+  padding-bottom: 10px
+  color: color('primary')
+  font-family: $text-font
+  text-rendering: optimizeLegibility
+
+small
+  font-size: size('small')
+
+hr
+  border: 0
+  height: 0
+  border-top: 1px solid rgba(0, 0, 0, 0.1)
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3)
diff --git a/assets/sass/_sidebar.sass b/assets/sass/_sidebar.sass
new file mode 100644
index 00000000..52177ba0
--- /dev/null
+++ b/assets/sass/_sidebar.sass
@@ -0,0 +1,56 @@
+@import variables
+@import mixins
+
+.sidebar-container
+  @include grid(100)
+
+.sidebar-content
+  padding-left: 10px
+  @include grid_width(82/100)
+  @include xs-device
+    @include grid_width(1)
+
+.sidebar
+  max-width: 240px
+  min-width: 190px
+  @include grid_width(18/100)
+  @include xs-device
+    @include grid_width(1)
+    max-width: 99%
+    min-width: 0
+  h2
+    margin-top: 0
+  > ul
+    a
+      text-decoration: none
+      color: color('light')
+      font-weight: 300
+      &:hover
+        color: color('primary')
+    li
+      list-style-type: none
+      line-height: 35px
+      border-bottom: 1px dotted #efefef
+      padding-left: 13px
+      &:hover
+        border-left: 5px solid #555
+        padding-left: 8px
+      &.active
+        border-left: 5px solid #333
+        padding-left: 8px
+        a
+          color: color('primary')
+          font-weight: bold
+
+.sidebar-icons > ul li
+  padding-left: 0
+  &:hover, &.active
+    padding-left: 0
+    border-left: none
+
+.sidebar > ul li
+  &.active a
+    &:focus, &:hover
+      color: color('medium')
+  &:last-child
+    margin-bottom: 15px
diff --git a/assets/sass/_subtasks.sass b/assets/sass/_subtasks.sass
new file mode 100644
index 00000000..ad467b81
--- /dev/null
+++ b/assets/sass/_subtasks.sass
@@ -0,0 +1,5 @@
+@import variables
+
+.subtasks-table
+  td
+    vertical-align: middle
diff --git a/assets/sass/_table.sass b/assets/sass/_table.sass
new file mode 100644
index 00000000..c570ef16
--- /dev/null
+++ b/assets/sass/_table.sass
@@ -0,0 +1,54 @@
+@import variables
+@import mixins
+
+table
+  width: 100%
+  border-collapse: collapse
+  border-spacing: 0
+  margin-bottom: 20px
+
+  &.table-fixed
+    table-layout: fixed
+    white-space: nowrap
+    th
+      overflow: hidden
+    td
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
+
+  &.table-small
+    font-size: size('small')
+
+  &.table-striped tr:nth-child(odd)
+    background: bg-color('lighter')
+
+  &.table-scrolling
+    @include sm-device
+      overflow-x: auto
+      display: inline-block
+      vertical-align: top
+      max-width: 100%
+      white-space: nowrap
+
+  th
+    text-align: left
+    padding: 0.5em 3px
+    border: 1px solid #eee
+    background: bg-color('primary')
+
+    a
+      text-decoration: none
+      color: color('primary')
+      &:focus, &:hover
+        text-decoration: underline
+
+  td
+    border: 1px solid #eee
+    padding: 0.5em 3px
+    vertical-align: top
+
+    li
+      margin-left: 20px
+
+@include col-x(100)
diff --git a/assets/sass/_table_drag_and_drop.sass b/assets/sass/_table_drag_and_drop.sass
new file mode 100644
index 00000000..80f7e7fe
--- /dev/null
+++ b/assets/sass/_table_drag_and_drop.sass
@@ -0,0 +1,23 @@
+@import variables
+
+.draggable-row-handle
+  cursor: move
+  color: color('lighter')
+  &:hover
+    color: color('primary')
+
+tr.draggable-item-selected
+  background: #fff
+  border: 2px solid #666
+  box-shadow: 4px 2px 10px -4px rgba(0, 0, 0, 0.55)
+  td
+    border-top: none
+    border-bottom: none
+    &:first-child
+      border-left: none
+    &:last-child
+      border-right: none
+
+.table-stripped
+  tr.draggable-item-hover, tr.draggable-item-hover
+    background: #FEFFF2
diff --git a/assets/sass/_task_board.sass b/assets/sass/_task_board.sass
new file mode 100644
index 00000000..3f33f0cb
--- /dev/null
+++ b/assets/sass/_task_board.sass
@@ -0,0 +1,36 @@
+@import variables
+
+.task-board
+  position: relative
+  margin-bottom: 4px
+  border: 1px solid #000
+  padding: 2px
+  word-wrap: break-word
+  font-size: size('compact')
+
+div
+  &.task-board-recent
+    border-width: 2px
+  &.task-board-status-closed
+    user-select: none
+    border: 1px dotted #555
+
+.task-board
+  a
+    color: color('dark')
+    text-decoration: none
+  .dropdown-menu
+    font-weight: bold
+  .task-score
+    font-weight: bold
+
+.task-board-collapsed
+  overflow: hidden
+  white-space: nowrap
+  text-overflow: ellipsis
+
+.task-board-title
+  margin-top: 5px
+  margin-bottom: 8px
+  a:hover
+    text-decoration: underline
diff --git a/assets/sass/_task_board_age.sass b/assets/sass/_task_board_age.sass
new file mode 100644
index 00000000..1e91880f
--- /dev/null
+++ b/assets/sass/_task_board_age.sass
@@ -0,0 +1,18 @@
+@import variables
+
+.task-board-age
+  display: inline-block
+
+span
+  &.task-board-age-total
+    border: #666 1px solid
+    padding: 1px 3px 1px 3px
+    border-top-left-radius: 3px
+    border-bottom-left-radius: 3px
+  &.task-board-age-column
+    border: #666 1px solid
+    border-left: none
+    margin-left: -5px
+    padding: 1px 3px 1px 3px
+    border-top-right-radius: 3px
+    border-bottom-right-radius: 3px
diff --git a/assets/sass/_task_board_avatar.sass b/assets/sass/_task_board_avatar.sass
new file mode 100644
index 00000000..2a5563b3
--- /dev/null
+++ b/assets/sass/_task_board_avatar.sass
@@ -0,0 +1,10 @@
+@import variables
+
+.task-board-avatars
+  text-align: right
+  float: right
+
+.task-board-change-assignee
+  &:hover
+    opacity: 0.6
+  cursor: pointer
diff --git a/assets/sass/_task_board_category.sass b/assets/sass/_task_board_category.sass
new file mode 100644
index 00000000..37a4ea47
--- /dev/null
+++ b/assets/sass/_task_board_category.sass
@@ -0,0 +1,15 @@
+@import variables
+
+.task-board-category-container
+  text-align: right
+  margin-top: 8px
+  margin-bottom: 8px
+
+.task-board-category
+  font-weight: 500
+  color: color('dark')
+  border: 1px solid #555
+  padding: 1px 2px 1px 2px
+  border-radius: 4px
+  &:hover
+    opacity: 0.6
diff --git a/assets/sass/_task_board_date.sass b/assets/sass/_task_board_date.sass
new file mode 100644
index 00000000..9b11cce2
--- /dev/null
+++ b/assets/sass/_task_board_date.sass
@@ -0,0 +1,11 @@
+@import variables
+
+.task-board-date
+  font-weight: bold
+  color: color('dark')
+
+span
+  &.task-board-date-today
+    opacity: 1.0
+  &.task-board-date-overdue
+    opacity: 1.0
diff --git a/assets/sass/_task_board_icons.sass b/assets/sass/_task_board_icons.sass
new file mode 100644
index 00000000..c9240325
--- /dev/null
+++ b/assets/sass/_task_board_icons.sass
@@ -0,0 +1,17 @@
+@import variables
+
+.task-board-icons
+  font-size: size('small')
+  text-align: right
+  margin-top: 4px
+  margin-bottom: 2px
+  a
+    opacity: 0.5
+  span
+    opacity: 0.5
+    margin-left: 2px
+  a:hover, span:hover
+    opacity: 1.0
+
+.flag-milestone
+  color: green
diff --git a/assets/sass/_task_board_saving_state.sass b/assets/sass/_task_board_saving_state.sass
new file mode 100644
index 00000000..31465e9c
--- /dev/null
+++ b/assets/sass/_task_board_saving_state.sass
@@ -0,0 +1,11 @@
+@import variables
+
+.task-board-saving-state
+  opacity: 0.3
+
+.task-board-saving-icon
+  position: absolute
+  margin: auto
+  width: 100%
+  text-align: center
+  color: color('dark')
diff --git a/assets/sass/_task_links.sass b/assets/sass/_task_links.sass
new file mode 100644
index 00000000..4d68703c
--- /dev/null
+++ b/assets/sass/_task_links.sass
@@ -0,0 +1,11 @@
+@import variables
+
+.task-links-table
+  td
+    vertical-align: middle
+
+.task-links-task-count
+  color: color('light')
+
+.task-link-closed
+  text-decoration: line-through
diff --git a/assets/sass/_task_listing.sass b/assets/sass/_task_listing.sass
new file mode 100644
index 00000000..1c265e87
--- /dev/null
+++ b/assets/sass/_task_listing.sass
@@ -0,0 +1,14 @@
+@import variables
+
+.task-table .dropdown-menu
+  color: color('dark')
+  text-decoration: none
+  font-weight: bold
+  &:focus, &:hover
+    text-decoration: underline
+
+td.task-table a
+  color: color('dark')
+  text-decoration: none
+  &:hover
+    text-decoration: underline
diff --git a/assets/sass/_task_summary.sass b/assets/sass/_task_summary.sass
new file mode 100644
index 00000000..06ff64ec
--- /dev/null
+++ b/assets/sass/_task_summary.sass
@@ -0,0 +1,33 @@
+@import variables
+@import mixins
+
+#task-summary
+  margin-bottom: 15px
+  h2
+    color: color('medium')
+    font-size: size('xlarge')
+    margin-top: 0
+    padding-top: 0
+
+.task-summary-container
+  border: 2px solid #000
+  border-radius: 8px
+  padding: 15px
+
+.task-summary-columns
+  display: -webkit-flex
+  display: flex
+  -webkit-flex-direction: row
+  flex-direction: row
+  -webkit-justify-content: space-between
+  justify-content: space-between
+
+  @include xs-device
+    display: block
+
+.task-summary-column
+  color: color('primary')
+  span
+    color: color('medium')
+  li
+    line-height: 23px
diff --git a/assets/sass/_task_tags.sass b/assets/sass/_task_tags.sass
new file mode 100644
index 00000000..30bafd67
--- /dev/null
+++ b/assets/sass/_task_tags.sass
@@ -0,0 +1,13 @@
+@import variables
+@import mixins
+
+.task-tags li
+  display: inline
+  margin: 0 4px 0 0
+  padding: 2px
+  color: color('medium')
+  border: 1px solid #666
+  border-radius: 2px
+
+.task-summary-container .task-tags
+  margin-top: 10px
diff --git a/assets/sass/_thumbnails.sass b/assets/sass/_thumbnails.sass
new file mode 100644
index 00000000..9e130576
--- /dev/null
+++ b/assets/sass/_thumbnails.sass
@@ -0,0 +1,43 @@
+@import variables
+@import mixins
+
+.file-thumbnails
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +justify-content(flex-start)
+
+.file-thumbnail
+  width: 250px
+  border: 1px solid #efefef
+  border-radius: 5px
+  margin-bottom: 20px
+  box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, 0.55)
+  margin-right: 15px
+  img
+    border-top-left-radius: 5px
+    border-top-right-radius: 5px
+    &:hover
+      opacity: 0.5
+
+.file-thumbnail-content
+  padding-left: 8px
+  padding-right: 8px
+
+.file-thumbnail-title
+  font-weight: 700
+  font-size: size('compact')
+  color: color('medium')
+
+.file-thumbnail-description
+  font-size: size('small')
+  color: color('light')
+  margin-top: 8px
+  margin-bottom: 5px
+
+.file-viewer
+  position: relative
+  img
+    max-width: 95%
+    max-height: 85%
+    margin-top: 10px
diff --git a/assets/sass/_title.sass b/assets/sass/_title.sass
new file mode 100644
index 00000000..16e81df3
--- /dev/null
+++ b/assets/sass/_title.sass
@@ -0,0 +1,16 @@
+@import variables
+
+h1, h2, h3
+  font-weight: normal
+  color: color('primary')
+
+h1
+  font-size: size('title')
+
+h2
+  font-size: size('large')
+  margin-bottom: 10px
+
+h3
+  margin-top: 10px
+  font-size: size('medium')
diff --git a/assets/sass/_tooltip.sass b/assets/sass/_tooltip.sass
new file mode 100644
index 00000000..19365a33
--- /dev/null
+++ b/assets/sass/_tooltip.sass
@@ -0,0 +1,52 @@
+@import variables
+
+.tooltip-arrow:after
+  background: #fff
+  border: 1px solid #aaaaaa
+  box-shadow: 0 0 5px #aaa
+
+div.ui-tooltip
+  min-width: 200px
+  max-width: 600px
+
+.tooltip-arrow
+  width: 20px
+  height: 10px
+  overflow: hidden
+  position: absolute
+  &.top
+    top: -10px
+  &.bottom
+    bottom: -10px
+  &.align-left
+    left: 10px
+  &.align-right
+    right: 10px
+  &:after
+    content: ""
+    position: absolute
+    width: 14px
+    height: 14px
+    -webkit-transform: rotate(45deg)
+    -ms-transform: rotate(45deg)
+    transform: rotate(45deg)
+  &.bottom:after
+    top: -10px
+  &.top:after
+    bottom: -10px
+  &.align-left:after
+    left: 0
+  &.align-right:after
+    right: 0
+
+.tooltip-large
+  width: 600px
+
+.ui-tooltip-content .markdown p
+  margin-bottom: 0
+
+.ui-tooltip li
+  list-style-type: none
+
+.tooltip .fa-info-circle
+  color: color('light')
diff --git a/assets/sass/_user_mentions.sass b/assets/sass/_user_mentions.sass
new file mode 100644
index 00000000..4c0f038e
--- /dev/null
+++ b/assets/sass/_user_mentions.sass
@@ -0,0 +1,8 @@
+@import variables
+
+.user-mention-link
+  font-weight: bold
+  color: color('dark')
+  text-decoration: none
+  &:hover
+    color: color('medium')
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
new file mode 100644
index 00000000..49e1b3f5
--- /dev/null
+++ b/assets/sass/_variables.sass
@@ -0,0 +1,62 @@
+$xs-device-width: 480px
+$sm-device-width: 768px
+$md-device-width: 1150px
+
+$colors: ('primary': #333, 'light': #999, 'lighter': #dedede, 'dark': #000, 'medium': #555, 'error': #b94a48)
+$link-colors: ('primary': #3366CC, 'focus': #DF5353, 'hover': #333)
+$background-colors: ('primary': #fbfbfb, 'light': #fcfcfc, 'lighter': #fefefe)
+
+$alert-colors: ('default': #c09853, 'success': #468847, 'error': #b94a48, 'info': #3a87ad, 'normal': #333)
+$alert-background-colors: ('default': #fcf8e3, 'success': #dff0d8, 'error': #f2dede, 'info': #d9edf7, 'normal': #f0f0f0)
+$alert-border-colors: ('default': #fbeed5, 'success': #d6e9c6, 'error': #eed3d7, 'info': #bce8f1, 'normal': #ddd)
+
+$button-colors: ('default': #333, 'red': #fff, 'blue': #fff, 'disabled': #ccc)
+$button-background-colors: ('default': #f5f5f5, 'red': #d14836, 'blue': #4d90fe, 'disabled': #f7f7f7)
+$button-border-colors: ('default': #ddd, 'red': #b0281a, 'blue': #3079ed, 'disabled': #ccc)
+$button-hover-colors: ('default': #000, 'red': #fff, 'blue': #fff)
+$button-hover-background-colors: ('default': #fafafa, 'red': #c53727, 'blue': #357ae8)
+$button-hover-border-colors: ('default': #bbb, 'red': #b0281a, 'blue': #3079ed)
+
+$font-sizes: ('normal': 1.0em, 'tiny': 0.7em, 'small': 0.8em, 'compact': 0.9em, 'medium': 1.2em, 'large': 1.4em, 'xlarge': 1.6em, 'title': 1.5em)
+
+$text-font: 'Helvetica Neue', Helvetica, Arial, sans-serif
+$board-task-limit-color: #DF5353
+
+@function size($key)
+  @return map-get($font-sizes, $key)
+
+@function color($key: 'primary')
+  @return map-get($colors, $key)
+
+@function link-color($key: 'primary')
+  @return map-get($link-colors, $key)
+
+@function bg-color($key: 'primary')
+  @return map-get($background-colors, $key)
+
+@function alert-color($key)
+  @return map-get($alert-colors, $key)
+
+@function alert-bg-color($key)
+  @return map-get($alert-background-colors, $key)
+
+@function alert-border-color($key)
+  @return map-get($alert-border-colors, $key)
+
+@function button-color($key)
+  @return map-get($button-colors, $key)
+
+@function button-bg-color($key)
+  @return map-get($button-background-colors, $key)
+
+@function button-border-color($key)
+  @return map-get($button-border-colors, $key)
+
+@function button-hover-color($key)
+  @return map-get($button-hover-colors, $key)
+
+@function button-hover-bg-color($key)
+  @return map-get($button-hover-background-colors, $key)
+
+@function button-hover-border-color($key)
+  @return map-get($button-hover-border-colors, $key)
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
new file mode 100644
index 00000000..9a93e4ab
--- /dev/null
+++ b/assets/sass/app.sass
@@ -0,0 +1,51 @@
+@import reset
+@import base
+@import links
+@import title
+@import table
+@import table_drag_and_drop
+@import form
+@import input_addon
+@import alert
+@import button
+@import tooltip
+@import dropdown
+@import accordion
+@import dialog_box
+@import popover
+@import pagination
+@import header
+@import logo
+@import page_header
+@import sidebar
+@import avatar
+@import file_upload
+@import thumbnails
+@import color_picker
+@import filter_box
+@import project
+@import project_overview
+@import project_header
+@import project_views_switcher
+@import dashboard
+@import board
+@import task_board
+@import task_board_saving_state
+@import task_board_category
+@import task_board_avatar
+@import task_board_icons
+@import task_board_age
+@import task_board_date
+@import task_tags
+@import task_summary
+@import task_listing
+@import comment
+@import subtasks
+@import task_links
+@import markdown_editor
+@import markdown_rendering
+@import documentation
+@import listing
+@import activity_stream
+@import gantt_chart
+@import user_mentions