Add styling

client/components/cards/cardDetails.js

@@ -74,7 +74,7 @@ BlazeComponent.extendComponent({
       helper: 'clone',
       handle: '.checklist-title',
       items: '.js-checklist',
-      placeholder: 'js-checklist placeholder',
+      placeholder: 'checklist placeholder',
       distance: 7,
       start(evt, ui) {
         ui.placeholder.height(ui.helper.height());

client/components/cards/checklists.jade

@@ -18,7 +18,7 @@ template(name="checklists")
         | {{_ 'add-checklist'}}...
 
 template(name="checklistDetail")
-  .js-checklist
+  .js-checklist.checklist
     +inlinedForm(classNames="js-edit-checklist-title" checklist = checklist)
       +editChecklistItemForm(checklist = checklist)
     else

client/components/cards/checklists.styl

@@ -78,12 +78,27 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
   bottom: -600px
   right: 0
 
+.checklist
+  background: darken(white, 3%)
+
+  &.placeholder
+    background: darken(white, 20%)
+    border-radius: 2px
+
+  &.ui-sortable-helper
+    box-shadow: -2px 2px 8px rgba(0, 0, 0, .3),
+                0 0 1px rgba(0, 0, 0, .5)
+    transform: rotate(4deg)
+    cursor: grabbing
+
+
 .checklist-item
   margin: 0 0 0.5em 1.33em
   line-height: 25px
   font-size: 1.1em
   margin-top: 3px
   display: flex
+  background: darken(white, 3%)
 
   &.placeholder
     background: darken(white, 20%)