Fixed backlog table

app/partials/us-detail.jade

@@ -80,7 +80,7 @@ block content
                                      a.avatar(href="", title="Assigned to")
                                          img(src="http://thecodeplayer.com/u/uifaces/32.jpg", alt="username")
                                  a.watcher-name(href="", title="Jesús Espino") Jesús Espino
-                section.us-settings
+                section.us-detail-settings
                     a.button.button-gray(href="", title="Client requirement") Client requirement
                     a.button.button-gray(href="", title="Team requirement") Team requirement
                     a.button.button-red(href="", title="Block") Block

app/partials/views/components/addnewus.jade

@@ -1,5 +1,6 @@
 div.new-us
-    a.button.button-green(href="", ng-click="ctrl.addNewUs('standard')", title="Add New US")
-        span.text + Add new US
-    a.button.button-bulk(href="", ng-click="ctrl.addNewUs('bulk')", title="Bulk")
-        span.icon.icon-bulk
+    div.new-us-inner
+        a.button.button-green(href="", ng-click="ctrl.addNewUs('standard')", title="Add New US")
+            span.text + Add new US
+        a.button.button-bulk(href="", ng-click="ctrl.addNewUs('bulk')", title="Bulk")
+            span.icon.icon-bulk

app/styles/components/buttons.scss

@@ -19,7 +19,7 @@
     @extend %title;
     @include transition (background .3s linear);
     display: inline-block;
-    padding: 8px 40px;
+    padding: 7px 40px 6px;
     text-transform: uppercase;
     &:hover {
         @include transition (background .3s linear);
@@ -34,6 +34,7 @@
 
 .button-green {
     background: $green-taiga;
+    vertical-align: middle;
     &:hover {
         background: $fresh-taiga;
     }

app/styles/layout/backlog.scss

@@ -1,6 +1,10 @@
 .backlog {
     .new-us {
-        float: right;
+        @include clearfix;
+        margin-bottom: 2rem;
+        .new-us-inner {
+            float: right;
+        }
     }
 }
 

app/styles/layout/us-detail.scss

@@ -224,7 +224,7 @@
     }
 }
 
-.us-settings {
+.us-detail-settings {
     margin-top: 2rem;
     .button {
         color: $white;

app/styles/modules/backlog-table.scss

@@ -4,14 +4,12 @@
     width: 100%;
     .row {
         @include table-flex();
+        @extend %small;
+        border-bottom: 1px solid $gray-light;
         padding: 1rem 0 1rem 1rem;
         text-align: left;
         width: 100%;
     }
-    .row { //Previously table-main
-        @extend %small;
-        border-bottom: 1px solid $gray-light;
-    }
     .backlog-table-title,
     .backlog-table-subtitle,
     .row {
@@ -76,11 +74,13 @@
 
 .backlog-table-body {
     .row {
+        position: relative;
         &:hover {
             @include transition (background .2s ease-in);
             background: lighten($green-taiga, 60%);
-            .us-settings {
-                @include transition (opacity .2s ease-in);
+            .us-settings,
+            .icon-drag-v {
+                @include transition (all .2s ease-in);
                 opacity: 1;
             }
         }
@@ -92,7 +92,8 @@
     .user-story-name {
         flex-basis: 500px;
         input {
-            vertical-align: top;
+            margin-right: 1rem;
+            vertical-align: middle;
         }
         span {
             display: inline-block;
@@ -101,13 +102,6 @@
             text-overflow: ellipsis;
             white-space: nowrap;
         }
-        .icon {
-            color: $gray-light;
-            &:hover {
-                color: $grayer;
-                @include transition (color .3s linear);
-            }
-        }
     }
     .user-story-tags {
         display: none;
@@ -141,10 +135,26 @@
         margin: .5rem 0;
         width: 100%;
     }
+    .us-settings a,
+    .icon-drag-v {
+        @include transition (all .2s ease-in);
+        @extend %large;
+        color: $gray-light;
+        &:hover {
+            @include transition (all .2s ease-in);
+            color: $grayer;
+        }
+    }
     .us-settings {
         float: right;
         margin-right: 2rem;
         opacity: 0;
-        @include transition (opacity .2s ease-in);
+    }
+    .icon-drag-v {
+        cursor: move;
+        opacity: 0;
+        position: absolute;
+        right: .5rem;
+        top: 1rem;
     }
 }

app/styles/modules/lightbox.scss

@@ -96,7 +96,8 @@
             cursor: pointer;
             display: block;
         }
-        .requirement, .iocaine {
+        .requirement,
+        .iocaine {
             &:hover {
                 @include transition(all .2s ease-in);
                 background: $fresh-taiga;

gulpfile.coffee

@@ -87,7 +87,7 @@ gulp.task "template", ->
         .pipe(gulp.dest(paths.dist))
 
 gulp.task "scsslint", ->
-    gulp.src(paths.scssStyles, '!app/styles/bourbon/**/*.scss')
+    gulp.src([paths.scssStyles, '!app/styles/bourbon/**/*.scss'])
         .pipe(cache("scsslint"))
         .pipe(scsslint({
             config: "scsslint.yml"