Simplify the hairline mixin.

dist/ratchet.css

@@ -409,7 +409,7 @@ strong {
 .table-view .table-view-cell {
   position: relative;
   padding: 11px 60px 12px 15px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='2000' height='0.5'/></svg>");
   background-position: 15px 100%;
   background-repeat: no-repeat;
 }
@@ -448,7 +448,7 @@ strong {
   color: #999;
   font-weight: 500;
   background-color: #fafafa;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='2000' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='2000' height='0.5'/></svg>");
   background-position: 0 100%, 0 0%;
   background-repeat: no-repeat;
 }
@@ -588,7 +588,7 @@ select {
   border-radius: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='2000' height='0.5'/></svg>");
   background-position: 15px 100%;
   background-repeat: no-repeat;
 }
@@ -599,7 +599,7 @@ select {
 
 .input-row {
   overflow: hidden;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#c8c7cc' x='0' y='0' width='2000' height='0.5'/></svg>");
   background-position: 15px 100%;
   background-repeat: no-repeat;
 }

dist/ratchet.js

@@ -30,11 +30,12 @@
   window.addEventListener('touchend', function (event) {
     var modal = getModal(event);
     if (modal) {
-      modal.classList.toggle('active');
+      if (modal && modal.classList.contains('modal')) modal.classList.toggle('active');
       event.preventDefault(); // prevents rewriting url (apps can still use hash values in url)
     }
   });
 }();
+
 /* ----------------------------------
  * POPOVER v1.0.0
  * Licensed under The MIT License

lib/sass/forms.scss

@@ -90,7 +90,7 @@ select {
   border: 0;
   border-radius: 0;
   @include box-shadow(none);
-  @include hairline(single, #c8c7cc, 320px, 15px);
+  @include hairline(single, #c8c7cc, 15px);
 }
 
 // Remove bottom border on last input to avoid double bottom border
@@ -105,7 +105,7 @@ select {
 // To use labels with input groups, wrap a label and an input in an .input-row
 .input-row {
   overflow: hidden;
-  @include hairline(single, #c8c7cc, 320px, 15px);
+  @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
 }
 
 // Remove bottom border on last input-row to avoid double bottom border

lib/sass/mixins.scss

@@ -71,14 +71,14 @@
 
 // Misc
 // --------------------------------------------------
-@mixin hairline($type, $color, $width, $offset) {
+@mixin hairline($type, $color, $offset) {
   @if $type == single {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#{$color}' x='0' y='0' width='2000' height='0.5'/></svg>");
     background-position: $offset 100%;
 
   } @else if $type == double {
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"),
-                      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#{$color}' x='0' y='0' width='2000' height='0.5'/></svg>"),
+                      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2000' height='1'><rect fill='#{$color}' x='0' y='0' width='2000' height='0.5'/></svg>");
     background-position: $offset 100%, $offset 0%;
   }
   background-repeat: no-repeat;

lib/sass/table-views.scss

@@ -12,7 +12,7 @@
   .table-view-cell {
     position: relative;
     padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
-    @include hairline(single, #c8c7cc, 320px, 15px); // Single grey border with a width of 320px and 15px offset.
+    @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
 
 
     // Remove the border from the last table view item
@@ -68,7 +68,7 @@
     color: #999;
     font-weight: $font-weight;
     background-color: #fafafa;
-    @include hairline(double, #c8c7cc, 320px, 0);  // Double (top and bottom) grey border with a width of 320px and no offset.
+    @include hairline(double, #c8c7cc, 0);  // Double (top and bottom) grey border with no offset.
 
     // Rounding first divider on inset lists and remove border on the top
     &:first-child {