Make tables more responsive

assets/sass/_mixins.sass

@@ -37,3 +37,8 @@
     @content
   &:-ms-input-placeholder
     @content
+
+@mixin col-x($n)
+  @for $i from 1 through $n
+    .column-#{$i}
+      width: $i * 1%

assets/sass/_sidebar.sass

@@ -5,7 +5,7 @@
 
 .sidebar-content
   padding-left: 10px
-  @include grid_width(80/100)
+  @include grid_width(82/100)
   @include xs-device
     @include grid_width(1)
 

assets/sass/_table.sass

@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 table
   width: 100%
@@ -6,106 +7,48 @@ table
   border-spacing: 0
   margin-bottom: 20px
 
-th
-  border: 1px solid #eee
-  padding: 0.5em 3px
-
-td
-  border: 1px solid #eee
-  padding: 0.5em 3px
-  vertical-align: top
-
-th
-  background: bg-color('primary')
-  text-align: left
-
-td li
-  margin-left: 20px
-
-.table-small
-  font-size: size('small')
-
-th a
-  text-decoration: none
-  color: color('primary')
-  &:focus, &:hover
-    text-decoration: underline
-
-.table-fixed
-  table-layout: fixed
-  white-space: nowrap
-  th
-    overflow: hidden
-  td
+  &.table-fixed
+    table-layout: fixed
     white-space: nowrap
-    overflow: hidden
-    text-overflow: ellipsis
+    th
+      overflow: hidden
+    td
+      white-space: nowrap
+      overflow: hidden
+      text-overflow: ellipsis
 
-.table-stripped tr:nth-child(odd)
-  background: #fefefe
+  &.table-small
+    font-size: size('small')
 
-.column-3
-  width: 3%
+  &.table-striped tr:nth-child(odd)
+    background: bg-color('lighter')
 
-.column-5
-  width: 5%
+  &.table-scrolling
+    @include sm-device
+      overflow-x: auto
+      display: inline-block
+      vertical-align: top
+      max-width: 100%
+      white-space: nowrap
 
-.column-8
-  width: 7.5%
+  th
+    text-align: left
+    padding: 0.5em 3px
+    border: 1px solid #eee
+    background: bg-color('primary')
 
-.column-10
-  width: 10%
+    a
+      text-decoration: none
+      color: color('primary')
+      &:focus, &:hover
+        text-decoration: underline
 
-.column-12
-  width: 12%
-
-.column-15
-  width: 15%
-
-.column-18
-  width: 18%
-
-.column-20
-  width: 20%
-
-.column-25
-  width: 25%
-
-.column-30
-  width: 30%
-
-.column-35
-  width: 35%
-
-.column-40
-  width: 40%
-
-.column-50
-  width: 50%
-
-.column-60
-  width: 60%
-
-.column-70, .column-80
-  width: 70%
-
-.draggable-row-handle
-  cursor: move
-  color: #dedede
-  &: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
+    border: 1px solid #eee
+    padding: 0.5em 3px
+    vertical-align: top
 
-.table-stripped tr.draggable-item-hover, tr.draggable-item-hover
-  background: #FEFFF2
+    li
+      margin-left: 20px
+
+@include col-x(100)

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

assets/sass/_variables.sass

@@ -4,7 +4,7 @@ $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)
+$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)

assets/sass/app.sass

@@ -3,6 +3,7 @@
 @import links
 @import title
 @import table
+@import table_drag_and_drop
 @import form
 @import input_addon
 @import alert