Responsive tweaks and refactoring

app/less/app.less

@@ -66,6 +66,14 @@ div, a, li {
   clear: both;
 }
 
+.ri {
+  text-align: right;
+}
+
+.le {
+  text-align: left;
+}
+
 .cen {
   text-align: center;
 }

app/less/buttons.less

@@ -6,7 +6,7 @@ button {
   }
   border: none;
   font-family: @fStandard;
-
+  vertical-align: middle;
   padding: 0.5em;
   cursor: pointer;
   background: none;

app/less/charts.less

@@ -13,7 +13,7 @@
     width: 50%;
   });
 
-  .smallTablet({
+  .largePhone({
     width: 100%;
   });
 

app/less/colors.less

@@ -37,11 +37,26 @@
   fill: @primary;
 }
 
+.primary-bg {
+  color: @primary-bg;
+  fill: @primary-bg;
+}
+
 .primary-disabled {
   color: @primary-disabled;
   fill: @primary-disabled;
 }
 
+.secondary {
+  color: @secondary;
+  fill: @secondary;
+}
+
+.secondary-disabled {
+  color: @secondary-disabled;
+  fill: @secondary-disabled;
+}
+
 .warning {
   color: @warning;
   fill: @warning;

app/less/comparison.less

@@ -4,29 +4,41 @@
   text-align: left;
   border-collapse: collapse;
   text-transform: uppercase;
-  font-size: 0.9em;
+  font-size: 0.8em;
 
   td {
     border: 1px solid @primary-disabled;
     padding: 0;
 
     h3 {
+      font-size: 1.1em;
       margin: 0 1em;
       line-height: 2em;
       display: inline-block;
     }
 
     .tablet({
-      font-size: 0.8em;
+      font-size: 0.9em;
     });
   }
 
   input {
+    background: none;
+    line-height: 1.3em;
+    width: 20em;
     height: 100%;
-    width: 100%;
-    box-sizing: border-box;
+    display: inline-block;
+    padding: 0.3em;
+    vertical-align: middle;
     border: none;
-    padding-left: 1em;
+    border-right: 1px solid @primary-disabled;
+
+    .largePhone({
+      width: 100%;
+      height: 2em;
+      border-right: none;
+      border-bottom: 1px solid @primary-disabled;
+    });
   }
 
   .head {
@@ -57,7 +69,7 @@
   cursor: pointer;
   background-color: @primary-bg;
   margin: 0;
-  padding: 0.5em 1em;
+  padding: 0.5em 0.5em;
   list-style: none;
   white-space: nowrap;
   color: @disabled;
@@ -124,6 +136,10 @@
   white-space: nowrap;
   font-size: 0.8em;
 
+  td {
+    padding: 0 0.5em;
+  }
+
   .tablet({
     font-size: 0.7em;
   });

app/less/modal.less

@@ -16,8 +16,7 @@
   left:50%; top:50%;
   transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);
-  width: 75%;
-  max-width: 1000px;
+  width: 800px;
   max-height: 100%;
   padding: 2em;
   background-color: @bgBlack;
@@ -27,6 +26,10 @@
   -webkit-overflow-scrolling: touch;
 
   .smallTablet({
+    width: 90%;
+  });
+
+  .largePhone({
     padding: 1em;
     width: 100%;
   });

app/less/outfit.less

@@ -3,22 +3,29 @@
   max-width: 1600px;
   margin: 0 auto;
   .user-select-none();
+  font-size: 0.9em;
 
   .tablet({
+    font-size: 0.8em;
     width: 100%;
   });
+
+  .smallTablet({
+    font-size: 1em;
+  });
+
+  table {
+    white-space: nowrap;
+  }
 }
 
 #overview {
-  .tablet({
-      font-size: 0.9em;
-  });
-
   h1 {
     margin: 0;
     float: left;
   }
   overflow: hidden;
+  margin: 0.5em;
 }
 
 #summary {
@@ -27,48 +34,77 @@
   box-sizing: border-box;
   width: 100%;
   padding: 0.5em 0.2em;
+  font-size: 0.9em;
 
   #summaryTable {
     .user-select-none();
     width: 100%;
-    white-space: nowrap;
     border-collapse: collapse;
-    font-size: 0.8em;
-
   }
 }
 
 #build {
   float: right;
   line-height: 2em;
-  font-size: 0.8em;
+  text-align: left;
 
   input {
     background: none;
-    line-height: 1.5em;
-    font-size: 0.8em;
+    line-height: 1.3em;
     width: 20em;
+    font-size: 0.9em;
     box-sizing: border-box;
     display: inline-block;
-    padding: 0.5em;
+    padding: 0.3em;
+    vertical-align: middle;
 
     &:focus {
       border: 1px solid @primary;
       color: @primary;
     }
-  }
-  button {
-    .smallPhone({
-      padding: 0.25em;
+
+    .largePhone({
+      width: 70%;
+    });
+
+    .medPhone({
+      width: 100%;
     });
   }
 
   .largePhone({
     float: left;
     clear: left;
+    width: 100%;
   });
 }
 
+.sortable {
+  &:hover {
+    color: @primary;
+  }
+}
+
+.shorten {
+  overflow: hidden;
+  max-width: 8em;
+  text-overflow: ellipsis;
+}
+
+table.total {
+  width: 100%;
+
+  &, td {
+    border-collapse: collapse;
+    border: 1px solid @primary-disabled;
+  }
+  .lbl {
+    text-transform: uppercase;
+    color: @primary-bg;
+    background-color: @primary-disabled;
+  }
+}
+
 .group {
   width: 25%;
   padding: 0.5em 0.2em;
@@ -78,20 +114,27 @@
   .user-select-none();
   cursor: default;
 
+  [ng-click] {
+    cursor: pointer;
+  }
+
+
   h1 {
     font-family: @fStandard;
     color: @bgBlack;
     background-color: @primary-disabled;
     text-transform: uppercase;
     margin: 0;
+    padding-top: 2px;
     font-size: 1em;
     line-height: 1.3em;
     font-weight: normal;
   }
 
-  .tablet({
-    font-size: 0.9em;
-  });
+  tbody tr:hover {
+    background-color: @warning-bg;
+  }
+
 
   .smallTablet({
     width: 50%;
@@ -104,9 +147,15 @@
   &.dbl {
     width: 50%;
 
+    .tablet({
+      td {
+        line-height: 2em;
+      }
+    });
+
     .smallTablet({
+      overflow-x: auto;
       width: 100% !important;
     });
   }
-
 }

app/less/slot.less

@@ -3,7 +3,6 @@
   float: left;
   text-align: left;
   width: 100%;
-  font-size: 0.85em;
   margin-top: 0.25em;
   position: relative;
   z-index: 0;
@@ -16,7 +15,7 @@
   fill: @fg;
 
   .details {
-    min-height: 2.5em;
+    min-height: 2.7em;
     padding: 0.25em 0;
     box-sizing: border-box;
     overflow: hidden;
@@ -48,7 +47,7 @@
   }
 
   .empty {
-    font-size: 1.5em;
+    font-size: 1.3em;
     color: lighten(@primary-bg, 12%);
     text-align: center;
     letter-spacing: 0.1em;

app/less/table.less

@@ -14,7 +14,7 @@ thead {
   color: @bgBlack;
   background-color: @primary-disabled;
   text-transform: uppercase;
-  line-height: 1.4em;
+  line-height: 1.3em;
   .user-select-none();
 
   .main th {
@@ -26,8 +26,9 @@ thead {
   }
 
   th {
+    vertical-align: middle;
     font-weight: normal;
-    padding: 0 0.75em;
+    padding: 2px 0.4em 0; // Padding top for font vertical alignment
 
     &.prop {
       cursor: pointer;
@@ -50,15 +51,13 @@ tbody tr {
     text-align: right;
 
     &:hover {
-      color: @fg;
-      fill: @warning;
       background-color: @warning-bg;
     }
   }
 
   td {
     line-height: 1.4em;
-    padding: 0 0.7em;
+    padding: 0 0.3em;
   }
 
 }