fixing prop order in the lib scss

sass/bars.scss

@@ -10,8 +10,8 @@
   height: $bar-base-height;
   padding-right: $bar-side-spacing;
   padding-left: $bar-side-spacing;
-  border-bottom: $border-default;
   background-color: $chrome-color;
+  border-bottom: $border-default;
 }
 
 // Modifier class to dock any bar below .bar-nav
@@ -38,8 +38,8 @@
 .bar-footer,
 .bar-footer-secondary,
 .bar-footer-secondary-tab {
-  border-bottom: 0;
   border-top: $border-default;
+  border-bottom: 0;
 }
 
 
@@ -83,18 +83,18 @@
   width: 100%;
   height: $bar-tab-height;
   padding: 0;
+  table-layout: fixed;
   border-top: $border-default;
   border-bottom: 0;
-  table-layout: fixed;
 
   // Navigational tab (Nested to be more specific for the icons in tab-items)
   .tab-item {
     display: table-cell;
     width: 1%;
     height: $bar-tab-height;
-    vertical-align: middle;
     color: #929292;
     text-align: center;
+    vertical-align: middle;
 
     // Active states for the tab bar
     &.active,
@@ -144,8 +144,8 @@
   top: 0;
   padding: 0;
   font-size: 16px;
-  color: $primary-color;
   line-height: $bar-base-height;
+  color: $primary-color;
   border: 0;
 
   &:active,

sass/buttons.scss

@@ -12,8 +12,8 @@
   line-height: 1;
   color: #333;
   text-align: center;
-  vertical-align: top;
   white-space: nowrap;
+  vertical-align: top;
   cursor: pointer;
   background-color: $chrome-color;
   border: 1px solid #ccc;
@@ -40,42 +40,42 @@
 // Primary button (Default color is blue)
 .btn-primary {
   color: #fff;
-  border: 1px solid $primary-color;
   background-color: $primary-color;
+  border: 1px solid $primary-color;
 
   &:active,
   &.active {
     color: #fff;
-    border: 1px solid darken($primary-color, 10%);
     background-color: darken($primary-color, 10%);
+    border: 1px solid darken($primary-color, 10%);
   }
 }
 
 // Positive button (Default color is green)
 .btn-positive {
   color: #fff;
-  border: 1px solid $positive-color;
   background-color: $positive-color;
+  border: 1px solid $positive-color;
 
   &:active,
   &.active {
     color: #fff;
-    border: 1px solid darken($positive-color, 10%);
     background-color: darken($positive-color, 10%);
+    border: 1px solid darken($positive-color, 10%);
   }
 }
 
 // Negative button (Default color is red)
 .btn-negative {
   color: #fff;
-  border: 1px solid $negative-color;
   background-color: $negative-color;
+  border: 1px solid $negative-color;
 
   &:active,
   &.active {
     color: #fff;
-    border: 1px solid darken($negative-color, 10%);
     background-color: darken($negative-color, 10%);
+    border: 1px solid darken($negative-color, 10%);
   }
 }
 
@@ -140,8 +140,8 @@ input[type="button"] {
 
 // Generic styles for all badges within default buttons
 .btn .badge {
-  font-size: 12px;
   margin: -2px -4px -2px 4px;
+  font-size: 12px;
   background-color: rgba(0,0,0,.15);
 }
 

sass/cards.scss

@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 .card {
-  overflow: hidden;
   margin: $bar-side-spacing;
+  overflow: hidden;
   background-color: $card-bg;
   border: $border-default;
   border-radius: $border-radius;
@@ -21,14 +21,14 @@
   // Rounding first divider on carded lists and remove border on the top
   .table-view-divider:first-child {
     top: 0;
-    border-top-right-radius: $border-radius;
     border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   // Rounding last divider on carded table views
   .table-view-divider:last-child {
-    border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
   }
 }
 // Remove the bottom border from last table cell

sass/forms.scss

@@ -30,6 +30,7 @@ input[type="tel"],
 input[type="color"] {
   width: 100%;
   height: 35px;
+  -webkit-appearance: none;
   padding: 0 15px;
   margin-bottom: 15px;
   line-height: $line-height-default;
@@ -37,7 +38,6 @@ input[type="color"] {
   border: $border-default;
   border-radius: 3px;
   outline: none;
-  -webkit-appearance: none;
 }
 
 // Rounded search input
@@ -80,8 +80,8 @@ select {
   margin-bottom: 0;
   background-color: transparent;
   border-top: 0;
-  border-left: 0;
   border-right: 0;
+  border-left: 0;
   border-radius: 0;
   @include box-shadow(none);
 }

sass/mixins.scss

@@ -22,8 +22,8 @@
 @mixin clearfix() {
   &:before,
   &:after {
-    content: " "; // 1
     display: table; // 2
+    content: " "; // 1
   }
   &:after {
     clear: both;

sass/modals.scss

@@ -5,12 +5,12 @@
 .modal {
   position: fixed;
   top: 0;
-  opacity: 0;
   z-index: 11;
   width: 100%;
   min-height: 100%;
   overflow: hidden;
   background-color: #fff;
+  opacity: 0;
   -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
      -moz-transition: -moz-transform .25s, opacity 1ms .25s;
           transition: transform .25s, opacity 1ms .25s;
@@ -18,8 +18,8 @@
 
   // Active modal
   &.active {
-    opacity: 1;
     height: 100%;
+    opacity: 1;
     -webkit-transition: -webkit-transform .25s;
        -moz-transition: -moz-transform .25s;
             transition: transform .25s;

sass/normalize.scss

@@ -131,8 +131,8 @@ dfn {
 //
 
 h1 {
-  font-size: 2em;
   margin: 0.67em 0;
+  font-size: 2em;
 }
 
 //
@@ -140,8 +140,8 @@ h1 {
 //
 
 mark {
-  background: #ff0;
   color: #000;
+  background: #ff0;
 }
 
 //
@@ -158,18 +158,18 @@ small {
 
 sub,
 sup {
+  position: relative;
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 
 sup {
-  top: -0.5em;
+  top: -.5em;
 }
 
 sub {
-  bottom: -0.25em;
+  bottom: -.25em;
 }
 
 // Embedded content
@@ -207,9 +207,9 @@ figure {
 //
 
 hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
   height: 0;
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
 }
 
 //
@@ -252,9 +252,9 @@ input,
 optgroup,
 select,
 textarea {
+  margin: 0; // 3
   color: inherit; // 1
   font: inherit; // 2
-  margin: 0; // 3
 }
 
 //
@@ -308,8 +308,8 @@ html input[disabled] {
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-  border: 0;
   padding: 0;
+  border: 0;
 }
 
 //
@@ -331,8 +331,8 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
-  box-sizing: border-box; // 1
   padding: 0; // 2
+  box-sizing: border-box; // 1
 }
 
 //
@@ -353,10 +353,10 @@ input[type="number"]::-webkit-outer-spin-button {
 //
 
 input[type="search"] {
-  -webkit-appearance: textfield; // 1
-  -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box; // 2
-  box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;         
+  -webkit-appearance: textfield; // 1
 }
 
 //
@@ -375,9 +375,9 @@ input[type="search"]::-webkit-search-decoration {
 //
 
 fieldset {
-  border: 1px solid #c0c0c0;
+  padding: .35em .625em .75em;
   margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
+  border: 1px solid #c0c0c0;
 }
 
 //
@@ -386,8 +386,8 @@ fieldset {
 //
 
 legend {
-  border: 0; // 1
   padding: 0; // 2
+  border: 0; // 1
 }
 
 //
@@ -415,8 +415,8 @@ optgroup {
 //
 
 table {
-  border-collapse: collapse;
   border-spacing: 0;
+  border-collapse: collapse;
 }
 
 td,

sass/popovers.scss

@@ -25,10 +25,10 @@
     width: 0;
     height: 0;
     margin-left: -15px;
+    content: '';
     border-right: 15px solid transparent;
     border-bottom: 15px solid $chrome-color;
     border-left: 15px solid transparent;
-    content: '';
   }
 
   // Popover transition
@@ -76,8 +76,8 @@
 
 .popover .bar-nav {
   border-bottom: $border-default;
-  border-top-right-radius: 12px;
   border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
   @include box-shadow(none);
 }
 
@@ -89,9 +89,9 @@
   max-height: 300px;
   margin-bottom: 0;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
   background-color: #fff;
   border-top: 0;
   border-bottom: 0;
   border-radius: $border-radius;
-  -webkit-overflow-scrolling: touch;
 }

sass/push.scss

@@ -42,11 +42,11 @@
     position: absolute;
     top: 50%;
     display: inline-block;
-    color: #bbb;
     font-family: Ratchicons;
     font-size: inherit;
-    text-decoration: none;
     line-height: 1;
+    color: #bbb;
+    text-decoration: none;
     -webkit-font-smoothing: antialiased;
     @include transform(translateY(-50%));
   }

sass/ratchicons.scss

@@ -4,21 +4,21 @@
 
 @font-face {
   font-family: Ratchicons;
+  font-weight: normal;
+  font-style: normal;
   src: url('../fonts/ratchicons.eot');
   src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ratchicons.woff') format('woff'),
        url('../fonts/ratchicons.ttf') format('truetype'),
        url('../fonts/ratchicons.svg#svgFontName') format('svg');
-  font-weight: normal;
-  font-style: normal;
 }
 
 .icon {
   display: inline-block;
   font-family: Ratchicons;
   font-size: 24px;
-  text-decoration: none;
   line-height: 1;
+  text-decoration: none;
   -webkit-font-smoothing: antialiased;
 }
 

sass/segmented-controls.scss

@@ -15,15 +15,15 @@
   // Section within controller
   .control-item {
     display: table-cell;
-    overflow: hidden;
     width: 1%;
     padding-top: 6px;
     padding-bottom: 7px;
+    overflow: hidden;
     line-height: 1;
     color: #333;
     text-align: center;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: nowrap;
     border-left: 1px solid #ccc;
 
     // Remove border-left and shadow from first section

sass/sliders.scss

@@ -22,10 +22,10 @@
     // Individual slide
     .slide {
       display: inline-block;
-      vertical-align: top; // Ensure that li always aligns to top
       width: 100%;
       height: 100%;
       font-size: 14px;
+      vertical-align: top; // Ensure that li always aligns to top
     }
   }
 }

sass/table-views.scss

@@ -15,8 +15,8 @@
 // Pad each table view item and add dividers
 .table-view-cell {
   position: relative;
-  overflow: hidden;
   padding: 11px 65px 11px 15px;
+  overflow: hidden;
   border-bottom: $border-default;
 
   // Remove the border from the last table view item
@@ -27,9 +27,9 @@
   > a:not(.btn) {
     position: relative;
     display: block;
-    overflow: hidden;
     padding: inherit;
     margin: -11px -65px -11px -15px; // Make the entire list item tappable.
+    overflow: hidden;
     color: inherit;
 
     &:active {
@@ -51,11 +51,11 @@
   padding-left: 15px;
   margin-top: -1px; // Hides the border of the previous list item
   margin-left: 0;
-  color: #999;
   font-weight: $font-weight;
+  color: #999;
+  background-color: #fafafa;
   border-top: $border-default;
   border-bottom: $border-default;
-  background-color: #fafafa;
 }
 
 

sass/toggles.scss

@@ -3,8 +3,8 @@
 // --------------------------------------------------
 
 .toggle {
-  display: block;
   position: relative;
+  display: block;
   width: 74px;
   height: 30px;
   background-color: #fff;
@@ -33,16 +33,16 @@
     position: absolute;
     top: 3px;
     right: 11px;
-    color: #999;
     font-size: 13px;
+    color: #999;
     text-transform: uppercase;
     content: "Off";
   }
 
   // Active state for toggle
   &.active {
-    border: 2px solid $positive-color;
     background-color: $positive-color;
+    border: 2px solid $positive-color;
 
     .toggle-handle {
       border-color: $positive-color;